random color generator react project

src/App.jsx

@@ -6,6 +6,7 @@ import Header from "@/layouts/header";
 import Home from "@/pages/Home";
 import NotFound from "@/pages/404";
 import Accordion from "@/pages/accordion/accordion";
+import RandomColor from "@/pages/RandomColor"
 
 function App() {
   return (
@@ -16,6 +17,8 @@ function App() {
           <Route index element={<Home />} /> 
           {/* Accordion component */}
           <Route path="accordion" element={<Accordion />} />
+          {/* Random color generator */} 
+          <Route path="color-generator" element={<RandomColor />} />
 
           {/* Error Page */}
           <Route path="*" element={<NotFound />} />

src/pages/Home.jsx

@@ -6,6 +6,7 @@ function Home() {
       <p className="text-xl">this page under <span className="font-bold text-primary">development</span></p> 
       <p className="text-neutral-500 text-xs">I&apos;ll start on it when add the first componenet (project)</p>
       <Link to='accordion'>accordion</Link>
+      <Link to='color-generator'>random Color Generator</Link>
     </div>
   );
 }

src/pages/RandomColor.jsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+function RandomColor() {
+  const [typeOfColor, settypeOfColor] = useState("hex");
+  const [color, setcolor] = useState("#2123da");
+
+  function randomColorUtility(length) {
+    return Math.floor(Math.random() * length);
+  }
+
+  function handleCreateRandomHexColor() {
+    const hex = [1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
+    let hexColor = "#";
+
+    for (let i = 0; i < 6; i++) {
+      hexColor += hex[randomColorUtility(hex.length)];
+    }
+    setcolor(hexColor);
+  }
+
+  function handleCreateRandomRgbColor() { 
+    const r = randomColorUtility(250)
+    const g = randomColorUtility(250)
+    const b = randomColorUtility(250)
+
+    setcolor(`rgb(${r},${g},${b})`)
+  }
+
+  return (
+    <div
+      className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen`}
+      style={{ background: color }}
+    >
+      <Button onClick={() => settypeOfColor("hex")} variant="secondary">
+        Create HEX Color
+      </Button>
+      <Button onClick={() => settypeOfColor("rgb")} variant="secondary">
+        Create RGB Color
+      </Button>
+      <Button
+        onClick={
+          typeOfColor === "hex"
+            ? handleCreateRandomHexColor
+            : handleCreateRandomRgbColor
+        }
+        variant="secondary"
+      >
+        Generate Random Color
+      </Button>
+      <div className="flex justify-center items-center mix-blend-multiply dark:mix-blend-exclusion mt-[50px]">
+        <h1 className="text-8xl font-micro">{color}</h1>
+      </div>
+    </div>
+  );
+}
+
+export default RandomColor;