Image

1import React from 'react'
2
3import { Image } from '@/components/ui/image'
4
5export function ImageDemo() {
6    return (
7        <div className="flex gap-8">
8            <Image
9                src="/images/random-image/random-2.jpg"
10                alt="Placeholder Image"
11                width={280}
12                height={210}
13                className="rounded-lg"
14            />
15        </div>
16    )
17}
18

1import React from 'react'
2
3import { Image } from '@/components/ui/image'
4
5export function ImagePreview() {
6    return (
7        <div className="flex gap-8">
8            <Image
9                src="/images/random-image/random-3.jpg"
10                alt="Placeholder Image"
11                width={280}
12                height={210}
13                className="rounded-lg"
14                preview
15            />
16        </div>
17    )
18}
19

1import React from 'react'
2import { Search } from 'lucide-react'
3
4import { Image } from '@/components/ui/image'
5
6export function ImagePreviewIcon() {
7    return (
8        <div className="flex gap-8">
9            <Image
10                src="/images/random-image/random-10.jpg"
11                alt="Placeholder Image"
12                width={280}
13                height={210}
14                className="rounded-lg"
15                preview
16                indicatorIcon={<Search className="h-5 w-5 text-white" />}
17            />
18        </div>
19    )
20}
21

1import React from 'react'
2
3import { Image } from '@/components/ui/image'
4
5export function ImageAspectRatio() {
6    return (
7        <div className="flex h-[300px] w-[450px] gap-8">
8            <Image
9                src="/images/random-image/random-2.jpg"
10                alt="Placeholder Image"
11                className="rounded-lg"
12                aspectRatio={16 / 9}
13            />
14        </div>
15    )
16}
17