website refactor
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user