colour picker component

packages/frontend/src/App.css

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/complexity/noImportantStyles: <needs it because the initial styles are in the component> */
 @import "./fonts.css";
 
 @import "tailwindcss";
@@ -161,3 +162,35 @@
     -ms-user-select: none;
     user-select: none;
 }
+
+/* react-colorful */
+.react-colorful {
+    width: 150px !important;
+    height: 150px !important;
+}
+
+.react-colorful__saturation {
+    border-radius: 0 !important;
+    /* cursor: pointer; */
+}
+
+.react-colorful__last-control {
+    border-radius: 0 !important;
+}
+
+.react-colorful__saturation-pointer {
+    width: 16px !important;
+    height: 16px !important;
+    border: 1px solid white !important;
+}
+
+.react-colorful__hue {
+    height: 10px !important;
+    cursor: pointer;
+}
+
+.react-colorful__hue-pointer {
+    width: 16px !important;
+    height: 16px !important;
+    border: 1px solid white !important;
+}

packages/frontend/src/components/ui/colour-picker.tsx

@@ -0,0 +1,34 @@
+import { HexColorPicker } from "react-colorful";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+export default function ColourPicker({
+    colour,
+    onChange,
+}: {
+    colour: string;
+    onChange: (value: string) => void;
+}) {
+    return (
+        <Popover>
+            <PopoverTrigger>
+                <Button className="w-8 h-8" style={{ backgroundColor: colour }}></Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-fit grid gap-2 p-2" align="start" side={"top"}>
+                <HexColorPicker color={colour} onChange={onChange} className="p-0 m-0" />
+                <div className="border w-[92px] inline-flex items-center">
+                    <Input
+                        value={colour.slice(1).toUpperCase()}
+                        onChange={(e) => onChange(`#${e.target.value}`)}
+                        spellCheck={false}
+                        className="flex-1 border-transparent h-fit pl-0 mx-0"
+                        maxLength={6}
+                        showCounter={false}
+                        showHashPrefix
+                    />
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

packages/frontend/src/components/ui/input.tsx

@@ -1,13 +1,14 @@
+import { Hash } from "lucide-react";
 import type * as React from "react";
-
 import { cn } from "@/lib/utils";
 
 function Input({
     className,
     type,
     showCounter = true,
+    showHashPrefix = false,
     ...props
-}: React.ComponentProps<"input"> & { showCounter?: boolean }) {
+}: React.ComponentProps<"input"> & { showCounter?: boolean; showHashPrefix?: boolean }) {
     const maxLength = typeof props.maxLength === "number" ? props.maxLength : undefined;
     const currentLength = typeof props.value === "string" ? props.value.length : undefined;
 
@@ -22,6 +23,11 @@ function Input({
                 className,
             )}
         >
+            {showHashPrefix && (
+                <span className="border-r px-1 py-1 text-muted-foreground">
+                    <Hash className="size-3.5" strokeWidth={1.5} />
+                </span>
+            )}
             <input
                 type={type}
                 data-slot="input"
@@ -30,6 +36,7 @@ function Input({
                     "h-full flex-1 min-w-0 bg-transparent px-3 py-1 pr-1 text-base outline-none",
                     "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
                     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                    showHashPrefix ? "pl-2 py-0" : "pl-3",
                 )}
                 {...props}
             />

packages/frontend/src/pages/Test.tsx

@@ -1,7 +1,11 @@
+import { useState } from "react";
 import LogOutButton from "@/components/log-out-button";
 import { Button } from "@/components/ui/button";
+import ColourPicker from "@/components/ui/colour-picker";
 
 function Test() {
+    const [colour, setColour] = useState("#e05656");
+
     return (
         <main className="w-full h-[100vh] flex flex-col items-center justify-center gap-4 p-4">
             <h1 className="text-3xl font-bold">Test</h1>
@@ -11,6 +15,8 @@ function Test() {
                 <Button linkTo="/">go back to "/"</Button>
             </div>
             <LogOutButton />
+
+            <ColourPicker colour={colour} onChange={setColour} />
         </main>
     );
 }