refactor variant selector, variant selector color, image carousel

components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal-ex-01.tsx

@@ -0,0 +1,19 @@
+import ImageCarouselHorizontal from "@/components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal";
+
+const images = [
+  "https://prd.place/400/600?id=37",
+  "https://prd.place/400/600?id=38",
+  "https://prd.place/400/600?id=39",
+  "https://prd.place/800/1200?id=40",
+  "https://prd.place/800/300?id=41",
+];
+
+export default function ImageCarousel_Horizontal_Ex_01() {
+  return (
+    <ImageCarouselHorizontal
+      images={images}
+      imageFit="contain"
+      thumbPosition="right"
+    />
+  );
+}

components/commerce-ui/image-carousel/examples/image-carousel-01-ex-02.tsx → components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal-ex-02.tsx

@@ -1,4 +1,4 @@
-import ImageCarousel01 from "@/components/commerce-ui/image-carousel/image-carousel-01";
+import ImageCarouselHorizontal from "@/components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal";
 
 const images = [
   "https://prd.place/400/600?id=30",
@@ -10,9 +10,9 @@ const images = [
   "https://prd.place/400/600?id=36",
 ];
 
-export default function ImageCarousel01Example02() {
+export default function ImageCarousel_Horizontal_Ex_02() {
   return (
-    <ImageCarousel01
+    <ImageCarouselHorizontal
       images={images}
       imageFit="contain"
       thumbPosition="bottom"

components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal-ex-03.tsx

@@ -0,0 +1,18 @@
+import ImageCarouselHorizontal from "@/components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal";
+const images = [
+  "https://prd.place/400/600?id=37",
+  "https://prd.place/400/600?id=38",
+  "https://prd.place/400/600?id=39",
+  "https://prd.place/800/1200?id=40",
+  "https://prd.place/800/300?id=41",
+];
+
+export default function ImageCarousel_Horizontal_Ex_03() {
+  return (
+    <ImageCarouselHorizontal
+      images={images}
+      imageFit="contain"
+      showThumbs={false}
+    />
+  );
+}

components/commerce-ui/image-carousel/image-carousel-01.tsx → components/commerce-ui/image-carousel/horizontal/image-carousel-horizontal.tsx

@@ -7,19 +7,6 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 
-const PLACEHOLDER_IMAGES = [
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-  "https://placehold.co/600x400",
-];
-
 type ThumbPropType = {
   selected: boolean;
   index: number;
@@ -99,7 +86,8 @@ const Thumb: React.FC<ThumbPropType> = (props) => {
   );
 };
 
-interface ImageCarousel_01Props extends React.HTMLAttributes<HTMLDivElement> {
+interface ImageCarousel_HorizontalProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   images: string[];
   opts?: EmblaOptionsType;
   showControls?: boolean;
@@ -109,8 +97,8 @@ interface ImageCarousel_01Props extends React.HTMLAttributes<HTMLDivElement> {
   showThumbs?: boolean;
 }
 
-const ImageCarousel_01: React.FC<ImageCarousel_01Props> = ({
-  images = PLACEHOLDER_IMAGES,
+const ImageCarousel_Horizontal: React.FC<ImageCarousel_HorizontalProps> = ({
+  images,
   opts,
   showControls = true,
   className,
@@ -328,4 +316,4 @@ const ImageCarousel_01: React.FC<ImageCarousel_01Props> = ({
   );
 };
 
-export default ImageCarousel_01;
+export default ImageCarousel_Horizontal;

components/commerce-ui/variant-color-selector/basic/variant-color-selector-basic-ex-01.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import VariantColorSelectorBasic, {
+  ColorVariantItem,
+} from "./variant-color-selector-basic";
+
+const variants: ColorVariantItem[] = [
+  { id: "color-black", value: "black", color: "#000000", label: "Black" },
+  { id: "color-white", value: "white", color: "#FFFFFF", label: "White" },
+  { id: "color-red", value: "red", color: "#FF0000", label: "Red" },
+  { id: "color-blue", value: "blue", color: "#0000FF", label: "Blue" },
+  { id: "color-green", value: "green", color: "#00FF00", label: "Green" },
+  { id: "color-yellow", value: "yellow", color: "#FFFF00", label: "Yellow" },
+  { id: "color-purple", value: "purple", color: "#800080", label: "Purple" },
+];
+
+export default function VariantColorSelectorBasicExample() {
+  const [selectedColor, setSelectedColor] = React.useState("black");
+
+  return (
+    <div className="space-y-8">
+      <fieldset className="space-y-4">
+        <legend className="mb-2 text-sm font-medium">Select color:</legend>
+        <VariantColorSelectorBasic
+          value={selectedColor}
+          onValueChange={setSelectedColor}
+          variants={variants}
+        />
+      </fieldset>
+    </div>
+  );
+}