website refactor

This commit is contained in:
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions

View File

@@ -1,27 +1,25 @@
'use client';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/primitives/Stack';
import { ControlBar } from '@/ui/ControlBar';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { useState } from 'react';
export function ActionFiltersBar() {
const [filter, setFilter] = useState('all');
return (
<Stack
direction="row"
h="12"
borderBottom
borderColor="border-[#23272B]"
align="center"
px={6}
bg="bg-[#0C0D0F]"
gap={6}
<ControlBar
actions={
<Input
placeholder="SEARCH_ID..."
/>
}
>
<Stack direction="row" align="center" gap={2}>
<Text size="xs" color="text-gray-500" weight="bold" uppercase>Filter:</Text>
<Group direction="row" align="center" gap={2}>
<Text size="xs" variant="low" weight="bold" uppercase>Filter:</Text>
<Select
options={[
{ label: 'All Types', value: 'all' },
@@ -32,9 +30,9 @@ export function ActionFiltersBar() {
onChange={(e) => setFilter(e.target.value)}
fullWidth={false}
/>
</Stack>
<Stack direction="row" align="center" gap={2}>
<Text size="xs" color="text-gray-500" weight="bold" uppercase>Status:</Text>
</Group>
<Group direction="row" align="center" gap={2}>
<Text size="xs" variant="low" weight="bold" uppercase>Status:</Text>
<Select
options={[
{ label: 'All Status', value: 'all' },
@@ -46,12 +44,7 @@ export function ActionFiltersBar() {
onChange={() => {}}
fullWidth={false}
/>
</Stack>
<Stack className="ml-auto">
<Input
placeholder="SEARCH_ID..."
/>
</Stack>
</Stack>
</Group>
</ControlBar>
);
}

View File

@@ -28,19 +28,19 @@ export function ActionList({ actions }: ActionListProps) {
clickable
>
<TableCell>
<Text font="mono" size="xs" color="text-gray-400">{action.timestamp}</Text>
<Text font="mono" size="xs" variant="low">{action.timestamp}</Text>
</TableCell>
<TableCell>
<Text size="xs" weight="medium" color="text-gray-200">{action.type}</Text>
<Text size="xs" weight="medium" variant="med">{action.type}</Text>
</TableCell>
<TableCell>
<Text size="xs" color="text-gray-400">{action.initiator}</Text>
<Text size="xs" variant="low">{action.initiator}</Text>
</TableCell>
<TableCell>
<ActionStatusBadge status={action.status} />
</TableCell>
<TableCell>
<Text size="xs" color="text-gray-400">
<Text size="xs" variant="low">
{action.details}
</Text>
</TableCell>

View File

@@ -1,9 +1,10 @@
'use client';
import { Stack } from '@/ui/primitives/Stack';
import { Header } from '@/ui/Header';
import { StatusIndicator } from '@/ui/StatusIndicator';
import { Text } from '@/ui/Text';
import { Activity } from 'lucide-react';
import React from 'react';
interface ActionsHeaderProps {
title: string;
@@ -11,31 +12,15 @@ interface ActionsHeaderProps {
export function ActionsHeader({ title }: ActionsHeaderProps) {
return (
<Stack
as="header"
direction="row"
h="16"
borderBottom
borderColor="border-[#23272B]"
align="center"
px={6}
bg="bg-[#141619]"
<Header
actions={<StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />}
>
<Stack direction="row" align="center" gap={4}>
<Stack
w="2"
h="6"
bg="bg-[#198CFF]"
rounded="sm"
shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
>{null}</Stack>
<Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<div style={{ width: '0.5rem', height: '1.5rem', backgroundColor: 'var(--ui-color-intent-primary)', borderRadius: 'var(--ui-radius-sm)' }} />
<Text as="h1" size="xl" weight="medium" variant="high" uppercase>
{title}
</Text>
</Stack>
<Stack className="ml-auto" direction="row" align="center" gap={4}>
<StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
</Stack>
</Stack>
</div>
</Header>
);
}