first build commit

src/components/accounts/AccountList.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useState } from 'react'
+import { Account } from '@/generated/prisma/client'
+import { Button } from '@/components/ui/button'
+import { Plus } from 'lucide-react'
+import { AccountCard } from './AccountCard'
+import { CreateAccountDialog } from './CreateAccountDialog'
+
+export function AccountList({ accounts }: { accounts: Account[] }) {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Accounts</h1>
+          <p className="text-sm text-muted-foreground">
+            {accounts.length} account{accounts.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+        <Button onClick={() => setDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add account
+        </Button>
+      </div>
+
+      {accounts.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-12 text-center">
+          <p className="text-muted-foreground">No accounts yet.</p>
+          <Button variant="outline" className="mt-4" onClick={() => setDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add your first account
+          </Button>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {accounts.map((account) => (
+            <AccountCard key={account.id} account={account} />
+          ))}
+        </div>
+      )}
+
+      <CreateAccountDialog open={dialogOpen} onOpenChange={setDialogOpen} />
+    </div>
+  )
+}