image-viewer-basic-ex-02

1"use client";
2import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
3 
4const EXAMPLE_IMAGE_URL =
5  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg";
6const EXAMPLE_THUMBNAIL_URL =
7  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg";
8 
9export default function ImageViewer_Basic_Ex_02() {
10  return (
11    <div className="flex w-full flex-col gap-8">
12      <div>
13        <div className="flex flex-col gap-6 md:grid-cols-3">
14          {/* Tall thumbnail - 300px height */}
15          <div className="flex flex-col gap-2">
16            <p className="text-muted-foreground text-xs">Tall (300px)</p>
17            <ImageViewer
18              thumbnailUrl={EXAMPLE_THUMBNAIL_URL}
19              imageUrl={EXAMPLE_IMAGE_URL}
20              classNameThumbnailViewer="h-[300px]"
21              imageTitle="Tall Thumbnail Example"
22            />
23          </div>
24 
25          {/* Medium thumbnail - 200px height */}
26          <div className="flex flex-col gap-2">
27            <p className="text-muted-foreground text-xs">Medium (200px)</p>
28            <ImageViewer
29              thumbnailUrl={EXAMPLE_THUMBNAIL_URL}
30              imageUrl={EXAMPLE_IMAGE_URL}
31              classNameThumbnailViewer="h-[200px]"
32              imageTitle="Medium Thumbnail Example"
33            />
34          </div>
35 
36          {/* Small thumbnail - 100px height */}
37          <div className="flex flex-col gap-2">
38            <p className="text-muted-foreground text-xs">Small (100px)</p>
39            <ImageViewer
40              thumbnailUrl={EXAMPLE_THUMBNAIL_URL}
41              imageUrl={EXAMPLE_IMAGE_URL}
42              classNameThumbnailViewer="h-[100px]"
43              imageTitle="Small Thumbnail Example"
44            />
45          </div>
46        </div>
47      </div>
48    </div>
49  );
50}