61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import { AccountCard } from './AccountCard';
|
|
|
|
interface Account {
|
|
id: string;
|
|
jid: string;
|
|
displayName: string | null;
|
|
status: string;
|
|
platform: string;
|
|
}
|
|
|
|
export function AccountsList({ initialAccounts }: { initialAccounts: Account[] }) {
|
|
const [accounts, setAccounts] = useState<Account[]>(initialAccounts);
|
|
const [displayName, setDisplayName] = useState('');
|
|
|
|
async function handleAdd() {
|
|
try {
|
|
const res = await fetch('/api/accounts', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ displayName: displayName || undefined }),
|
|
});
|
|
if (!res.ok) return;
|
|
const account: Account = await res.json();
|
|
setAccounts((prev) => [...prev, account]);
|
|
setDisplayName('');
|
|
} catch {}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex gap-2 mb-6">
|
|
<input
|
|
type="text"
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|
placeholder="Display name (optional)"
|
|
className="flex-1 border rounded px-3 py-2 text-sm"
|
|
/>
|
|
<button
|
|
onClick={handleAdd}
|
|
className="bg-blue-600 text-white rounded px-4 py-2 text-sm hover:bg-blue-700"
|
|
>
|
|
Add Account
|
|
</button>
|
|
</div>
|
|
|
|
{accounts.length === 0 ? (
|
|
<p className="text-gray-500">No accounts yet. Add one above to get started.</p>
|
|
) : (
|
|
<div className="flex flex-col gap-3">
|
|
{accounts.map((a) => (
|
|
<AccountCard key={a.id} account={a} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|