variant-selector-images-ex-01

1"use client";
2 
3import { useState } from "react";
4import VariantSelectorImages from "@/components/commerce-ui/variant-selector-images";
5 
6const variants = [
7  {
8    id: "cat-default",
9    label: "Default Cat",
10    url: "/placeholders/cat-default.webp",
11    value: "cat-default",
12  },
13  {
14    id: "cat-steampunk",
15    label: "Steampunk Cat",
16    url: "/placeholders/cat-steampunk.webp",
17    value: "cat-steampunk",
18  },
19  {
20    id: "cat-cyberpunk",
21    label: "Cyberpunk Cat",
22    url: "/placeholders/cat-cyberpunk.webp",
23    value: "cat-cyberpunk",
24  },
25];
26 
27export default function VariantSelector_Images_Ex_01() {
28  const [selected, setSelected] = useState("cat-default");
29 
30  return (
31    <div className="flex flex-col gap-4">
32      <fieldset className="space-y-4">
33        <legend className="mb-2 text-sm font-medium">Select Variant:</legend>
34        <VariantSelectorImages
35          value={selected}
36          onValueChange={setSelected}
37          variants={variants}
38        />
39      </fieldset>
40      <p className="text-muted-foreground text-center text-sm">
41        Selected variant: {selected}
42      </p>
43    </div>
44  );
45}