74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { Box, Button, Card, Flex, Grid, Heading, Text } from '@radix-ui/themes';
|
|
import type { Route } from './+types/home';
|
|
import TablePlaceholder from '../components/home/TablePlaceholder';
|
|
import { useLayout } from '../providers/LayoutProvider';
|
|
|
|
// eslint-disable-next-line no-empty-pattern
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [{ title: 'Proxy Host Demo | YANPM' }, { name: 'description', content: 'Demo of the unified navigation paradigm.' }];
|
|
}
|
|
|
|
export default function ProxyHostDemo() {
|
|
const { activeTab } = useLayout();
|
|
return (
|
|
<Box>
|
|
<Heading size="7" mb="1">
|
|
{activeTab}
|
|
</Heading>
|
|
<Text color="gray" mb="4" as="p">
|
|
This is the {activeTab.toLowerCase()} page demo.
|
|
</Text>
|
|
|
|
<Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="4">
|
|
<Card size="2">
|
|
<Flex direction="column" gap="2">
|
|
<Text size="2" weight="bold">
|
|
Status Overview
|
|
</Text>
|
|
<Text size="2" color="gray">
|
|
Everything is running smoothly in your {activeTab.toLowerCase()} section.
|
|
</Text>
|
|
<Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
|
|
View Details
|
|
</Button>
|
|
</Flex>
|
|
</Card>
|
|
<Card size="2">
|
|
<Flex direction="column" gap="2">
|
|
<Text size="2" weight="bold">
|
|
Recent Activity
|
|
</Text>
|
|
<Text size="2" color="gray">
|
|
No recent changes detected in the last 24 hours.
|
|
</Text>
|
|
<Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
|
|
Refresh
|
|
</Button>
|
|
</Flex>
|
|
</Card>
|
|
<Card size="2">
|
|
<Flex direction="column" gap="2">
|
|
<Text size="2" weight="bold">
|
|
Quick Actions
|
|
</Text>
|
|
<Text size="2" color="gray">
|
|
Common tasks related to {activeTab.toLowerCase()} are available here.
|
|
</Text>
|
|
<Button variant="solid" size="1" style={{ width: 'fit-content' }} mt="1">
|
|
Get Started
|
|
</Button>
|
|
</Flex>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{activeTab === 'Proxy Hosts' && (
|
|
<Box mt="6">
|
|
<Card variant="surface">
|
|
<TablePlaceholder />
|
|
</Card>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|