File size: 3,055 Bytes
3318ac7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | "use client";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { UseFormReturn, FieldValues } from "react-hook-form";
import { Loader2 } from "lucide-react";
interface AnalyzeFormProps {
form: UseFormReturn<any>;
onSubmit: () => Promise<void>;
isLoading: boolean;
isDisabled: boolean;
}
export function AnalyzeForm({
form,
onSubmit,
isLoading,
isDisabled,
}: AnalyzeFormProps) {
const { register, formState } = form;
return (
<form onSubmit={onSubmit} className="space-y-4">
<div className="space-y-2">
<Label className="text-xs font-semibold uppercase tracking-wider text-slate-300">Material</Label>
<Input
{...register("material")}
placeholder="Steel 304, Aluminium 6061"
disabled={isLoading || isDisabled}
className="text-sm bg-slate-700/50 border-slate-600 text-slate-100 placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/30 transition-all duration-300 hover:border-slate-500"
/>
{formState.errors.material && (
<p className="text-xs text-red-400">{formState.errors.material.message as string}</p>
)}
</div>
<div className="space-y-2">
<Label className="text-xs font-semibold uppercase tracking-wider text-slate-300">Tolerance</Label>
<Input
{...register("tolerance")}
placeholder="±0.02mm, ±0.05mm"
disabled={isLoading || isDisabled}
className="text-sm bg-slate-700/50 border-slate-600 text-slate-100 placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/30 transition-all duration-300 hover:border-slate-500"
/>
{formState.errors.tolerance && (
<p className="text-xs text-red-400">{formState.errors.tolerance.message as string}</p>
)}
</div>
<div className="space-y-2">
<Label className="text-xs font-semibold uppercase tracking-wider text-slate-300">Threads (Optional)</Label>
<Input
{...register("threads")}
placeholder="M8x1.25, M10x1.5"
disabled={isLoading || isDisabled}
className="text-sm bg-slate-700/50 border-slate-600 text-slate-100 placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/30 transition-all duration-300 hover:border-slate-500"
/>
</div>
<Button
type="submit"
disabled={isLoading || isDisabled}
className="w-full h-11 font-semibold text-sm bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white rounded-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/50 shadow-lg"
>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
Analyzing...
</>
) : (
"Analyze Now"
)}
</Button>
</form>
);
}
|