FormCard

1"use client"
2 
3import { useMemo, useState } from "react"
4 
5import { Button } from "@/components/ui/button"
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/components/ui/card"
14import { Input } from "@/components/ui/input"
15import { Textarea } from "@/components/ui/textarea"
16import { cn } from "@/lib/utils"
17 
18export type FormCardField =
19  | {
20      name: string
21      label: string
22      type: "text" | "date" | "textarea"
23      required?: boolean
24      placeholder?: string
25    }
26  | {
27      name: string
28      label: string
29      type: "number"
30      required?: boolean
31      placeholder?: string
32      min?: number
33      max?: number
34    }
35  | {
36      name: string
37      label: string
38      type: "select"
39      required?: boolean
40      options: { label: string; value: string }[]
41    }
42  | { name: string; label: string; type: "toggle"; required?: boolean }
43 
44export type FormCardProps = {
45  title: string
46  description?: string
47  submitLabel?: string
48  fields: FormCardField[]
49  isLoading?: boolean
50  isDisabled?: boolean
51  error?: {
52    title: string
53    description?: string
54  }
55  onSubmit?: (values: Record<string, string | number | boolean>) => void
56}
57 
58export function FormCard({
59  title,
60  description,
61  submitLabel = "Submit",
62  fields = [],
63  isLoading,
64  isDisabled,
65  error,
66  onSubmit,
67}: FormCardProps) {
68  const initialValues = useMemo<
69    Record<string, string | number | boolean>
70  >(() => {
71    return Object.fromEntries(
72      fields.map((field) => [field.name, field.type === "toggle" ? false : ""])
73    )
74  }, [fields])
75  const [editedValues, setEditedValues] =
76    useState<Record<string, string | number | boolean>>(initialValues)
77  const values = useMemo(() => {
78    const next = { ...initialValues }
79 
80    for (const field of fields) {
81      if (field.name in editedValues) {
82        next[field.name] = editedValues[field.name]
83      }
84    }
85 
86    return next
87  }, [editedValues, fields, initialValues])
88  const formDisabled = Boolean(isDisabled || isLoading || error)
89 
90  function setValue(name: string, value: string | number | boolean) {
91    setEditedValues((current) => ({ ...current, [name]: value }))
92  }
93 
94  return (
95    <Card
96      className="w-full max-w-2xl"
97      data-fable-ui="form-card"
98      aria-busy={isLoading || undefined}
99    >
100      <CardHeader>
101        <CardTitle className="text-base">{title || "Collect input"}</CardTitle>
102// … truncated