variant-color-selector-basic-ex-01

1import * as React from "react";
2import VariantColorSelectorBasic, {
3  ColorVariantItem,
4} from "./variant-color-selector-basic";
5 
6const variants: ColorVariantItem[] = [
7  { color: "#000000", id: "color-black", label: "Black", value: "black" },
8  { color: "#FFFFFF", id: "color-white", label: "White", value: "white" },
9  { color: "#FF0000", id: "color-red", label: "Red", value: "red" },
10  { color: "#0000FF", id: "color-blue", label: "Blue", value: "blue" },
11  { color: "#00FF00", id: "color-green", label: "Green", value: "green" },
12  { color: "#FFFF00", id: "color-yellow", label: "Yellow", value: "yellow" },
13  { color: "#800080", id: "color-purple", label: "Purple", value: "purple" },
14];
15 
16export default function VariantColorSelectorBasicExample() {
17  const [selectedColor, setSelectedColor] = React.useState("black");
18 
19  return (
20    <div className="space-y-8">
21      <fieldset className="space-y-4">
22        <legend className="mb-2 text-sm font-medium">Select color:</legend>
23        <VariantColorSelectorBasic
24          value={selectedColor}
25          onValueChange={setSelectedColor}
26          variants={variants}
27        />
28      </fieldset>
29    </div>
30  );
31}