چیدمان با Box

-حذف‌شده: import { Box, Text, useInput } from "@textjs/app";+افزوده‌شده: import { Box, Spacer, Text, useInput } from "@textjs/app";  export default function Page() {   return (-حذف‌شده:     <Box className="flex-col border rounded px-2 py-1">-حذف‌شده:       <Text bold>▼ Acme Deploys</Text>-حذف‌شده:       <Text color="muted">Hello, console.</Text>+افزوده‌شده:     <Box className="flex-col grow">+افزوده‌شده:       <Box className="flex-row h-1 px-1 gap-2 shrink-0">+افزوده‌شده:         <Text bold>▼ Acme</Text>+افزوده‌شده:         <Text color="subtle">acme.local</Text>+افزوده‌شده:         <Spacer />+افزوده‌شده:       </Box>+افزوده‌شده:       <Box className="flex-row grow">{/* sidebar + cards */}</Box>     </Box>   ); }

+افزوده‌شده: const NAV = ["Overview", "Deployments", "Settings"];+افزوده‌شده: +افزوده‌شده: function Card({ title, value }: { title: string; value: string }) {+افزوده‌شده:   return (+افزوده‌شده:     <Box className="flex-col border rounded px-1 grow shrink basis-0" minWidth={14} minHeight={4}>+افزوده‌شده:       <Text color="subtle">{title}</Text>+افزوده‌شده:       <Text bold>{value}</Text>+افزوده‌شده:     </Box>+افزوده‌شده:   );+افزوده‌شده: }+افزوده‌شده:  export default function Page() {+افزوده‌شده:   const [sidebar, setSidebar] = useState(true);+افزوده‌شده:   const [stacked, setStacked] = useState(false);+افزوده‌شده: +افزوده‌شده:   useInput((e) => {+افزوده‌شده:     if (e.input === "s") setSidebar((v) => !v);+افزوده‌شده:     if (e.input === "d") setStacked((v) => !v);+افزوده‌شده:   });+افزوده‌شده:    return (     <Box className="flex-col grow">       {/* top bar */}-حذف‌شده:       <Box className="flex-row grow">{/* sidebar + cards */}</Box>+افزوده‌شده:       <Box className="flex-row grow">+افزوده‌شده:         {sidebar && (+افزوده‌شده:           <Box className="flex-col w-18 shrink-0 border-r px-1 pt-1">+افزوده‌شده:             {NAV.map((item) => <Text key={item}>{item}</Text>)}+افزوده‌شده:           </Box>+افزوده‌شده:         )}+افزوده‌شده:         <Box className={stacked ? "flex-col grow gap-1 p-1" : "flex-row grow items-start gap-1 p-1"}>+افزوده‌شده:           <Card title="Production" value="acme-web" />+افزوده‌شده:           <Card title="Deployments" value="6 today" />+افزوده‌شده:           <Card title="Build time" value="38s p50" />+افزوده‌شده:         </Box>+افزوده‌شده:       </Box>     </Box>   ); }