mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/website/components/dashboard/ActivityFeedPanel.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Panel } from '@/ui/Panel';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { ActivityFeed } from '../feed/ActivityFeed';
interface FeedItem {
@@ -27,9 +27,9 @@ interface ActivityFeedPanelProps {
export function ActivityFeedPanel({ items, hasItems }: ActivityFeedPanelProps) {
return (
<Panel title="Activity Feed" padding={0}>
<Box px={6} pb={6}>
<Stack px={6} pb={6}>
<ActivityFeed items={items} hasItems={hasItems} />
</Box>
</Stack>
</Panel>
);
}

5
apps/website/components/dashboard/DashboardControlBar.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
@@ -16,13 +15,13 @@ interface DashboardControlBarProps {
*/
export function DashboardControlBar({ title, actions }: DashboardControlBarProps) {
return (
<Box display="flex" h="full" alignItems="center" justifyContent="between" px={6}>
<Stack direction="row" h="full" align="center" justify="between" px={6}>
<Heading level={6} weight="bold">
{title}
</Heading>
<Stack direction="row" align="center" gap={4}>
{actions}
</Stack>
</Box>
</Stack>
);
}

6
apps/website/components/dashboard/DashboardKpiRow.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
interface KpiItem {
label: string;
@@ -23,7 +23,7 @@ export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
return (
<Grid responsiveGridCols={{ base: 2, md: 3, lg: 6 }} gap={4}>
{items.map((item, index) => (
<Box key={index} borderLeft pl={4} borderColor="var(--color-outline)">
<Stack key={index} borderLeft pl={4} borderColor="var(--color-outline)">
<Text
size="xs"
weight="bold"
@@ -42,7 +42,7 @@ export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
>
{item.value}
</Text>
</Box>
</Stack>
))}
</Grid>
);

6
apps/website/components/dashboard/DashboardRail.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
interface DashboardRailProps {
children: React.ReactNode;
@@ -13,8 +13,8 @@ interface DashboardRailProps {
*/
export function DashboardRail({ children }: DashboardRailProps) {
return (
<Box as="nav" display="flex" h="full" flexDirection="col" alignItems="center" py={4} gap={4}>
<Stack as="nav" h="full" align="center" py={4} gap={4}>
{children}
</Box>
</Stack>
);
}

26
apps/website/components/dashboard/DashboardShell.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
interface DashboardShellProps {
children: React.ReactNode;
@@ -16,24 +16,24 @@ interface DashboardShellProps {
*/
export function DashboardShell({ children, rail, controlBar }: DashboardShellProps) {
return (
<Box display="flex" h="screen" overflow="hidden" bg="base-black" color="white">
<Stack direction="row" h="screen" overflow="hidden" bg="base-black" color="white">
{rail && (
<Box as="aside" w="16" flexShrink={0} borderRight bg="surface-charcoal" borderColor="var(--color-outline)">
<Stack as="aside" w="16" flexShrink={0} borderRight bg="surface-charcoal" borderColor="var(--color-outline)">
{rail}
</Box>
</Stack>
)}
<Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
<Stack flexGrow={1} overflow="hidden">
{controlBar && (
<Box as="header" h="14" borderBottom bg="surface-charcoal" borderColor="var(--color-outline)">
<Stack as="header" h="14" borderBottom bg="surface-charcoal" borderColor="var(--color-outline)">
{controlBar}
</Box>
</Stack>
)}
<Box as="main" flexGrow={1} overflow="auto" p={6}>
<Box maxWidth="7xl" mx="auto" display="flex" flexDirection="col" gap={6}>
<Stack as="main" flexGrow={1} overflow="auto" p={6}>
<Stack maxWidth="7xl" mx="auto" gap={6} fullWidth>
{children}
</Box>
</Box>
</Box>
</Box>
</Stack>
</Stack>
</Stack>
</Stack>
);
}

76
apps/website/components/dashboard/RecentActivityTable.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { StatusDot } from '@/ui/StatusDot';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
export interface ActivityItem {
id: string;
@@ -32,43 +32,41 @@ export function RecentActivityTable({ items }: RecentActivityTableProps) {
};
return (
<Box overflow="auto">
<Box as="table" w="full" textAlign="left">
<Box as="thead">
<Box as="tr" borderBottom borderColor="var(--color-outline)">
<Box as="th" pb={2}>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Type</Text>
</Box>
<Box as="th" pb={2}>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Description</Text>
</Box>
<Box as="th" pb={2}>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Time</Text>
</Box>
<Box as="th" pb={2}>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Status</Text>
</Box>
</Box>
</Box>
<Box as="tbody">
{items.map((item) => (
<Box key={item.id} as="tr" borderBottom borderColor="rgba(35, 39, 43, 0.5)" hoverBg="rgba(255, 255, 255, 0.05)" transition>
<Box as="td" py={3}>
<Text font="mono" color="var(--color-telemetry)" size="xs">{item.type}</Text>
</Box>
<Box as="td" py={3}>
<Text color="var(--color-text-med)" size="xs">{item.description}</Text>
</Box>
<Box as="td" py={3}>
<Text color="var(--color-text-low)" size="xs">{item.timestamp}</Text>
</Box>
<Box as="td" py={3}>
<StatusDot color={getStatusColor(item.status)} size={1.5} />
</Box>
</Box>
))}
</Box>
</Box>
</Box>
<Table>
<TableHead>
<TableRow>
<TableHeader>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Type</Text>
</TableHeader>
<TableHeader>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Description</Text>
</TableHeader>
<TableHeader>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Time</Text>
</TableHeader>
<TableHeader>
<Text size="xs" weight="medium" uppercase letterSpacing="wider" color="var(--color-text-low)">Status</Text>
</TableHeader>
</TableRow>
</TableHead>
<TableBody>
{items.map((item) => (
<TableRow key={item.id}>
<TableCell>
<Text font="mono" color="var(--color-telemetry)" size="xs">{item.type}</Text>
</TableCell>
<TableCell>
<Text color="var(--color-text-med)" size="xs">{item.description}</Text>
</TableCell>
<TableCell>
<Text color="var(--color-text-low)" size="xs">{item.timestamp}</Text>
</TableCell>
<TableCell>
<StatusDot color={getStatusColor(item.status)} size={1.5} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}

16
apps/website/components/dashboard/TelemetryPanel.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { Surface } from '@/ui/Surface';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
interface TelemetryPanelProps {
title: string;
@@ -16,13 +15,10 @@ interface TelemetryPanelProps {
*/
export function TelemetryPanel({ title, children }: TelemetryPanelProps) {
return (
<Surface variant="dark" border rounded="sm" padding={4} shadow="sm">
<Heading level={6} mb={4} color="var(--color-text-low)">
{title}
</Heading>
<Box fontSize="sm">
<Panel title={title} variant="dark" padding={4}>
<Stack fontSize="sm">
{children}
</Box>
</Surface>
</Stack>
</Panel>
);
}