48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
'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>
|
|
)
|
|
}
|