⁦Table⁩، List و نمودارها

+افزوده‌شده: import { Table, type SortState, type TableColumn } from "@textjs/app";+افزوده‌شده: +افزوده‌شده: const COLUMNS: TableColumn<Deployment>[] = [+افزوده‌شده:   { key: "status", header: "Status", width: 11, render: (d) => <Status status={d.status} /> },+افزوده‌شده:   { key: "commit", header: "Commit", grow: 2 },+افزوده‌شده:   { key: "project", header: "Project", width: 10 },+افزوده‌شده:   { key: "duration", header: "Build", width: 6, align: "right", value: (d) => d.duration, render: (d) => <Text>{`${d.duration}s`}</Text> },+افزوده‌شده: ];  export default function DeploymentsPage() {+افزوده‌شده:   const [sort, setSort] = useState<SortState | null>(null);   …-حذف‌شده:   return rows.map((d) => …);+افزوده‌شده:   return <Table columns={COLUMNS} rows={rows} getRowKey={(d) => d.id} sortable sort={sort} onSortChange={setSort} autoFocus />; }

+افزوده‌شده: import { BarChart, Sparkline } from "@textjs/app";+افزوده‌شده: +افزوده‌شده:   const [chart, setChart] = useState<"spark" | "bars">("spark");+افزوده‌شده:   useInput((e) => {+افزوده‌شده:     if (e.input === "c") setChart((c) => (c === "spark" ? "bars" : "spark"));+افزوده‌شده:   });+افزوده‌شده:    return (     <Box className="flex-col grow gap-1">+افزوده‌شده:       <Box className="flex-col" height={4}>+افزوده‌شده:         <Text color="subtle">Build time, last 24 deployments</Text>+افزوده‌شده:         {chart === "spark" ? (+افزوده‌شده:           <Sparkline data={buildTimes} height={3} color="accent" />+افزوده‌شده:         ) : (+افزوده‌شده:           <BarChart data={byProject} formatValue={(v) => `${v}s`} />+افزوده‌شده:         )}+افزوده‌شده:       </Box>       <Table … />     </Box>   );