import { Head, Link, router, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Building2, Plus, Users } from 'lucide-react'; type Org = { id: number; name: string; slug: string; users: number; pending: number }; export default function OrganizationsIndex() { const { organizations } = usePage().props as unknown as { organizations: Org[] }; const [name, setName] = useState(''); return ( <>

Organizations

Create organizations and invite people into them.

setName(e.target.value)} placeholder="New organization name" className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm" />
{organizations.map((o) => (

{o.name}

{o.users} members {o.pending > 0 && {o.pending} pending}
))} {organizations.length === 0 && (

No organizations yet. Create your first above.

)}
); }