added skeleton ui for generating a users keychip with code copied from cozy

2024-08-31 17:25:14 -04:00
parent 4e20a9ac3b
commit 01fed162ae
6 changed files with 86 additions and 4 deletions
--- a/components)/generateKeychip/generateKeychip.tsx
+++ b/components)/generateKeychip/generateKeychip.tsx
@ -0,0 +1,74 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@radix-ui/react-dropdown-menu";
+import React, { useState } from "react";
+
+const GenerateKeychip = () => {
+  const [serial, setSerial] = useState("");
+
+  const generateRandomSerial = () => {
+    let uniqueNumbers = "";
+    while (uniqueNumbers.length < 4) {
+      const digit = Math.floor(Math.random() * 10);
+      if (!uniqueNumbers.includes(digit.toString())) {
+        uniqueNumbers += digit;
+      }
+    }
+    const randomNumbers = Math.floor(1000 + Math.random() * 9000);
+    const randomSerial = `A69E01A${uniqueNumbers}${randomNumbers}`;
+    setSerial(randomSerial);
+  };
+
+  return (
+    <Card x-chunk="aimecard">
+      <CardHeader>
+        <CardTitle className="text-2xl">Create Keychip</CardTitle>
+      </CardHeader>
+
+      <CardContent>
+        <div className="mb-4 text-lg">Current Access Code:</div>
+        <form className="grid gap-4">
+          <div className="grid gap-2">
+            <Label>Arcade Name</Label>
+            <Input name="arcadeName" type="text" placeholder="Arcade Name" />
+          </div>
+          <div className="grid gap-2">
+            <Label>Arcade Nickname</Label>
+            <Input
+              name="arcadeNickname"
+              type="text"
+              placeholder="Arcade Nickname"
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label>Generate Serial</Label>
+            <Input
+              name="GenerateSerial"
+              type="text"
+              placeholder="*******************"
+              value={serial} // Bind the serial state to the input field
+              readOnly
+            />
+          </div>
+          <Button
+            type="button"
+            className="w-full"
+            onClick={generateRandomSerial}
+          >
+            Generate Random Keychip
+          </Button>
+
+          <Button type="submit" className="w-full">
+            Finalize Keychip
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default GenerateKeychip;