refactor: move ColorPicker to a file

Blankeos · Mar 18, 2023 · 2f080d0 · 2f080d0
1 parent 566a72e
commit 2f080d0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 43 deletions.
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
@@ -0,0 +1,42 @@
+import { ChromePicker } from "@hello-pangea/color-picker";
+import Tippy from "@tippyjs/react";
+
+interface IColorPickerProps {
+  hoverContent: string;
+  color: string;
+  setColor: (color: string) => any;
+}
+export const ColorPicker: React.FC<IColorPickerProps> = ({
+  color,
+  setColor,
+  hoverContent,
+}) => {
+  return (
+    <div className="relative h-16 w-16">
+      <Tippy content={hoverContent} hideOnClick={true}>
+        <div>
+          <Tippy
+            theme="transparent"
+            interactive={true}
+            trigger="click"
+            arrow={false}
+            content={
+              <div className="">
+                <ChromePicker
+                  disableAlpha={true}
+                  color={color}
+                  onChange={(v) => setColor(v.hex)}
+                />
+              </div>
+            }
+          >
+            <div
+              className="absolute h-16 w-16 rounded-md border cursor-pointer"
+              style={{ backgroundColor: color }}
+            ></div>
+          </Tippy>
+        </div>
+      </Tippy>
+    </div>
+  );
+};
diff --git a/src/components/StringToQRCode.tsx b/src/components/StringToQRCode.tsx
@@ -1,12 +1,11 @@
 import React, { useState, useCallback, useRef } from "react";
 import { nanoid } from "nanoid";
 import QRCode from "react-qr-code";
-import Tippy from "@tippyjs/react";
 import { toPng } from "html-to-image";
 // import { addNote, notes } from "../store";
 // import { useStore } from "@nanostores/react";
-import { ChromePicker } from "@hello-pangea/color-picker";
 import { VscLoading as LoadingIcon } from "react-icons/vsc";
+import { ColorPicker } from "./ColorPicker";
 
 const StringToQRCode = () => {
   const qrRef = useRef<HTMLDivElement>(null);
@@ -116,43 +115,3 @@ const StringToQRCode = () => {
 };
 
 export default StringToQRCode;
-
-interface IColorPickerProps {
-  hoverContent: string;
-  color: string;
-  setColor: (color: string) => any;
-}
-const ColorPicker: React.FC<IColorPickerProps> = ({
-  color,
-  setColor,
-  hoverContent,
-}) => {
-  return (
-    <div className="relative h-16 w-16">
-      <Tippy content={hoverContent} hideOnClick={true}>
-        <div>
-          <Tippy
-            theme="transparent"
-            interactive={true}
-            trigger="click"
-            arrow={false}
-            content={
-              <div className="">
-                <ChromePicker
-                  disableAlpha={true}
-                  color={color}
-                  onChange={(v) => setColor(v.hex)}
-                />
-              </div>
-            }
-          >
-            <div
-              className="absolute h-16 w-16 rounded-md border cursor-pointer"
-              style={{ backgroundColor: color }}
-            ></div>
-          </Tippy>
-        </div>
-      </Tippy>
-    </div>
-  );
-};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,6 +1,5 @@
 import StringToQRCode from "@/components/StringToQRCode";
 import Head from "next/head";
-import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {