feat: add new CRUD block with table and form components

app/page.tsx

@@ -6,6 +6,7 @@ import { Github } from "lucide-react"
 import Link from "next/link"
 import { RelativeTime } from "@/registry/new-york/blocks/relative-time/relative-time"
 import { InputCopyable } from "@/registry/new-york/blocks/input-copyable/input-copyable"
+import CrudExample from "@/components/crud-example"
 
 export default function Home() {
   const date = new Date()
@@ -74,6 +75,18 @@ export default function Home() {
           </div>
         </div>
 
+        <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm text-muted-foreground sm:pl-3">
+              A component that displays a CRUD interface for a given resource
+            </h2>
+            <OpenInV0Button name="crud" className="w-fit" />
+          </div>
+          <div className="flex items-center justify-center min-h-[400px] relative">
+            <CrudExample />
+          </div>
+        </div>
+
         <Button variant="outline" asChild>
           <Link href="https://github.com/vinkashq/ui">
             <Github />

components/crud-example.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Crud, CrudForm, CrudFormType } from "@/registry/new-york/blocks/crud"
+import { Input } from "@/registry/new-york/ui/input"
+import { useState } from "react"
+
+type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const payments: Payment[] = [
+  {
+    id: "728ed52f",
+    amount: 100,
+    status: "pending",
+    email: "m@example.com",
+  },
+  {
+    id: "489e1d42",
+    amount: 125,
+    status: "processing",
+    email: "example@gmail.com",
+  },
+]
+
+export default function CrudExample() {
+  const [data, setData] = useState(payments)
+  const defaultPayment = {
+    id: "",
+    amount: 0,
+    status: "pending",
+    email: "",
+  } as Payment
+  const formState = useState<CrudFormType<Payment>>({
+    method: 'create',
+    data: defaultPayment,
+  })
+  const [formType, setFormType] = formState
+  const formData = formType.data
+  const setFormData = (data: Payment) => setFormType({ ...formType, data })
+  return (
+    <Crud
+      formState={formState}
+      defaultData={defaultPayment}
+      name="Payment"
+      data={data}
+      columns={[
+        {
+          accessorKey: "id",
+          header: "ID",
+        },
+        {
+          accessorKey: "amount",
+          header: "Amount",
+        },
+        {
+          accessorKey: "status",
+          header: "Status",
+        },
+        {
+          accessorKey: "email",
+          header: "Email",
+        },
+      ]} onEdit={(row) => {
+        setData(data.map((item) => item.id === row.id ? row : item))
+      }} onDelete={(row) => {
+        setData(data.filter((item) => item.id !== row.id))
+      }} onCreate={(e) => {
+        setData([...data, formData])
+      }}>
+      <CrudForm>
+        <Input type="number" name="amount" value={formData.amount} onChange={(e) => setFormData({ ...formData, amount: Number(e.target.value) })} />
+        <Input type="text" name="email" value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value })} />
+        <Input type="text" name="status" value={formData.status} onChange={(e) => setFormData({ ...formData, status: e.target.value as "pending" | "processing" | "success" | "failed" })} />
+        <Input type="text" name="id" value={formData.id} onChange={(e) => setFormData({ ...formData, id: e.target.value })} />
+      </CrudForm>
+    </Crud>
+  )
+}

package.json

@@ -12,10 +12,13 @@
     "registry:build": "shadcn build -o ./public/r"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.487.0",