validation

src/components/UI/Generator.tsx

@@ -1,4 +1,3 @@
-import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
 import { Button } from "@components/UI/Button.js";
@@ -11,67 +10,35 @@ import {
   SelectValue,
 } from "@components/UI/Select.js";
 
-const generatorVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2",
-  {
-    variants: {
-      variant: {
-        default: "",
-        destructive:
-          "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
-        success:
-          "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600",
-        outline:
-          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
-        subtle:
-          "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
-        ghost:
-          "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
-        link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
-      },
-      size: {
-        default: "h-10 py-2 px-4",
-        sm: "h-9 px-2 rounded-md",
-        lg: "h-11 px-8 rounded-md",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
 export interface GeneratorProps
-  extends React.BaseHTMLAttributes<HTMLElement>,
-    VariantProps<typeof generatorVariants> {
+  extends React.BaseHTMLAttributes<HTMLElement> {
   devicePSKBitCount?: number;
   value: string;
+  variant: "default" | "invalid";
   buttonText?: string;
-  changeEvent: (event: string) => void;
+  selectChange: (event: string) => void;
+  inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  buttonClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const getBitString = (bitcount?: number) => {
-  if (bitcount === 32) {
-    return "32";
-  }
-  if (bitcount === 1) {
-    return "1";
-  }
-  return "16";
-};
 
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
-    { devicePSKBitCount, value, buttonText, variant, changeEvent, ...props },
+    { devicePSKBitCount, variant, value, buttonText, selectChange, inputChange, buttonClick, ...props },
     ref,
   ) => {
     return (
       <>
-        <Input type="text" id="pskInput" value={value} />
+        <Input 
+          type="text" 
+          id="pskInput" 
+          variant={variant}
+          value={value}
+          onChange={inputChange}
+        />
         <Select
-          value={getBitString(devicePSKBitCount)}
-          onValueChange={(e) => changeEvent(e)}
+          value={devicePSKBitCount?.toString()}
+          onValueChange={(e) => selectChange(e)}
         >
           <SelectTrigger>
             <SelectValue />
@@ -88,7 +55,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
             </SelectItem>
           </SelectContent>
         </Select>
-        <Button type="button" variant="success" {...props}>
+        <Button type="button" variant="success" onClick={buttonClick} {...props}>
           {buttonText}
         </Button>
       </>
@@ -97,4 +64,4 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
 );
 Generator.displayName = "Button";
 
-export { Generator, generatorVariants };
+export { Generator };