Files
daphnis/app/(authenticated)/(admin)/admin/(admin components)/generateKeychip/generateKeychip.tsx

75 lines
2.1 KiB
TypeScript

"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;