diff --git a/src/components/color-viewer.tsx b/src/components/color-viewer.tsx index 8d45541..8501bdd 100644 --- a/src/components/color-viewer.tsx +++ b/src/components/color-viewer.tsx @@ -1,7 +1,8 @@ import { Pixel } from "@/types"; -import { isLight, pixelToHex, pixelToX } from "@/utils"; +import { isLight, pixelToHex, pixelToUrlSlug, pixelToX } from "@/utils"; import { useDebounce } from "@uidotdev/usehooks"; -import { ClipboardCopy, Sparkle } from "lucide-react"; +import { ClipboardCopy, Info, Sparkle } from "lucide-react"; +import Link from "next/link"; import { useState } from "react"; interface ColorViewerProps { @@ -33,8 +34,7 @@ export function ColorViewer({ return (
+
+ + + + ); } diff --git a/src/utils/index.ts b/src/utils/index.ts index 9092955..3f99a79 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -35,4 +35,15 @@ const colorToUrlSlug = (colorName: string) => { return colorName.toLowerCase().replace("/", "").replace(/ /g, "_"); }; -export { isLight, closest, pixelToHex, pixelToX, colorToUrlSlug }; +const pixelToUrlSlug = (pixel: Pixel) => { + return `${colorToUrlSlug(pixelToX(pixel, "name"))}`; +}; + +export { + isLight, + closest, + pixelToHex, + pixelToX, + colorToUrlSlug, + pixelToUrlSlug, +};