Adding Sidebar

components/product/Swatch/Swatch.module.css

@@ -0,0 +1,25 @@
+.root {
+  @apply h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out;
+}
+
+.active,
+.root:hover {
+  @apply border-gray-700;
+}
+
+.colorViolet {
+  @apply bg-violet;
+}
+
+.colorPink {
+  @apply bg-pink;
+}
+
+.colorBlack {
+  @apply bg-black;
+}
+
+.colorWhite,
+.size {
+  @apply bg-white;
+}

components/product/Swatch/Swatch.tsx

@@ -0,0 +1,35 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Swatch.module.css";
+import { Colors } from "@components/types";
+
+interface Props {
+  className?: string;
+  children?: any;
+  active?: boolean;
+  color?: Colors;
+  size?: string;
+}
+
+const Swatch: FunctionComponent<Props> = ({
+  className,
+  size,
+  color,
+  active,
+}) => {
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.active]: active,
+      [s.size]: size,
+      [s.colorPink]: color === "pink",
+      [s.colorWhite]: color === "white",
+      [s.colorBlack]: color === "black",
+      [s.colorViolet]: color === "violet",
+    },
+    className
+  );
+  return <span className={rootClassName}>{size ? size : null}</span>;
+};
+
+export default Swatch;

components/product/Swatch/index.ts

@@ -0,0 +1 @@
+export { default } from "./Swatch";