updates

site/src/components/routes/home.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'preact/hooks'
 import { pb } from '@/lib/stores'
 import { SystemRecord } from '@/types'
 import { DataTable } from '../server-table/data-table'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
 
 export function Home() {
 	const [systems, setSystems] = useState([] as SystemRecord[])
@@ -38,7 +39,21 @@ export function Home() {
 
 	return (
 		<>
-			<DataTable data={systems} />
+			<Card>
+				<CardHeader>
+					<CardTitle className={'mb-3'}>All Systems</CardTitle>
+					<CardDescription>
+						Press{' '}
+						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+							<span className="text-xs">⌘</span>K
+						</kbd>{' '}
+						to open the command palette.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<DataTable data={systems} />
+				</CardContent>
+			</Card>
 			{/* <pre>{JSON.stringify(systems, null, 2)}</pre> */}
 		</>
 	)

site/src/components/routes/server.tsx

@@ -2,6 +2,7 @@ import { pb } from '@/lib/stores'
 import { SystemRecord } from '@/types'
 import { useEffect, useState } from 'preact/hooks'
 import { useRoute } from 'wouter-preact'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
 
 export function ServerDetail() {
 	const [_, params] = useRoute('/server/:name')
@@ -21,8 +22,15 @@ export function ServerDetail() {
 
 	return (
 		<>
-			<h1>{node.name}</h1>
-			<pre>{JSON.stringify(node, null, 2)}</pre>
+			<Card>
+				<CardHeader>
+					<CardTitle className={'mb-3'}>{node.name}</CardTitle>
+					<CardDescription>5.342.34.234</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<pre>{JSON.stringify(node, null, 2)}</pre>
+				</CardContent>
+			</Card>
 		</>
 	)
 }