| import { TabsContent } from '@radix-ui/react-tabs'; |
|
|
| import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'; |
|
|
| import { useTableStore } from '../store/tableStore'; |
| import AddTable from './AddTable'; |
| import { DataTable } from './DataTable'; |
|
|
| export function TableManager() { |
| const { tables, addTable } = useTableStore(); |
|
|
| const handleAddTable = (tableName: string) => { |
| if (tableName.trim()) { |
| addTable(tableName, [ |
| { name: 'email', type: 'text' }, |
| { name: 'amount', type: 'number' }, |
| { |
| name: 'status', |
| type: 'select', |
| options: ['pending', 'completed', 'failed'], |
| }, |
| ]); |
| } |
| }; |
|
|
| return ( |
| <> |
| <Tabs defaultValue={Object.keys(tables)[0]}> |
| <TabsList className="w-full justify-start"> |
| {Object.entries(tables).map(([tableId, table]) => ( |
| <TabsTrigger key={tableId} value={tableId}> |
| {table.name} |
| </TabsTrigger> |
| ))} |
| <div className="ml-auto flex items-center space-x-2"> |
| <AddTable onAddTable={handleAddTable} /> |
| </div> |
| </TabsList> |
| {Object.entries(tables).map(([tableId, table]) => ( |
| <TabsContent key={tableId} value={tableId}> |
| <div className="px-1 py-1"> |
| <DataTable data={table} /> |
| </div> |
| </TabsContent> |
| ))} |
| </Tabs> |
| </> |
| ); |
| } |
|
|
