website refactor
This commit is contained in:
@@ -1,30 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
|
||||
interface AppShellProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* AppShell is the root container for the entire application layout.
|
||||
* Provides the base structure with cockpit-inspired design.
|
||||
*/
|
||||
export function AppShell({ children }: AppShellProps) {
|
||||
return (
|
||||
<Box
|
||||
height="100vh"
|
||||
bg="var(--ui-color-bg-base)"
|
||||
color="var(--ui-color-text-high)"
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
overflowY="auto"
|
||||
overflowX="hidden"
|
||||
style={{
|
||||
fontFamily: 'var(--ui-font-sans)',
|
||||
background: 'linear-gradient(180deg, #0a0a0b 0%, #0f0f10 100%)',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -12,7 +12,7 @@ export function AppFooter() {
|
||||
variant="precision"
|
||||
paddingY={6}
|
||||
paddingX={6}
|
||||
borderTop={true}
|
||||
borderTop
|
||||
backgroundColor="rgba(10, 10, 11, 0.92)"
|
||||
className="backdrop-blur-xl"
|
||||
style={{
|
||||
@@ -24,7 +24,7 @@ export function AppFooter() {
|
||||
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
|
||||
© {new Date().getFullYear()} GridPilot
|
||||
</Text>
|
||||
<Box w="1px" h="12px" bg="var(--ui-color-border-muted)" opacity={0.6} />
|
||||
<Box w="px" h="3" bg="var(--ui-color-border-muted)" opacity={0.6} />
|
||||
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
|
||||
Session ready
|
||||
</Text>
|
||||
@@ -32,7 +32,7 @@ export function AppFooter() {
|
||||
|
||||
<Box display={{ base: 'none', sm: 'flex' }}>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
|
||||
<Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
|
||||
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
|
||||
System Normal
|
||||
</Text>
|
||||
|
||||
@@ -21,17 +21,11 @@ export function AppHeader() {
|
||||
<Surface
|
||||
as="header"
|
||||
variant="dark"
|
||||
position="fixed"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
height="56px"
|
||||
height="14"
|
||||
zIndex={50}
|
||||
style={{
|
||||
borderBottom: '1px solid var(--ui-color-border-default)',
|
||||
background: 'rgba(13, 13, 14, 0.8)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
}}
|
||||
borderBottom
|
||||
backgroundColor="rgba(13, 13, 14, 0.8)"
|
||||
className="backdrop-blur-xl"
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
|
||||
{/* Left: Brand & Context */}
|
||||
@@ -44,9 +38,9 @@ export function AppHeader() {
|
||||
alignItems="center"
|
||||
gap={3}
|
||||
paddingLeft={4}
|
||||
borderLeft={true}
|
||||
h="24px"
|
||||
style={{ borderLeftColor: 'var(--ui-color-border-muted)' }}
|
||||
borderLeft
|
||||
h="6"
|
||||
borderColor="var(--ui-color-border-muted)"
|
||||
>
|
||||
<Text size="xs" weight="medium" variant="low" font="mono" uppercase>
|
||||
Workspace
|
||||
@@ -65,7 +59,7 @@ export function AppHeader() {
|
||||
{/* Right: Session Controls */}
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
|
||||
<Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
|
||||
<Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
|
||||
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
|
||||
LIVE
|
||||
</Text>
|
||||
|
||||
@@ -18,23 +18,19 @@ export function AppSidebar() {
|
||||
<Surface
|
||||
as="aside"
|
||||
variant="dark"
|
||||
width="260px"
|
||||
position="fixed"
|
||||
top="56px"
|
||||
bottom={0}
|
||||
left={0}
|
||||
zIndex={40}
|
||||
width="64"
|
||||
h="full"
|
||||
borderRight
|
||||
backgroundColor="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
|
||||
style={{
|
||||
borderRight: '1px solid var(--ui-color-border-default)',
|
||||
boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
|
||||
background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
|
||||
}}
|
||||
>
|
||||
<DashboardRail>
|
||||
<Box py={8} fullWidth>
|
||||
<Box px={6} mb={10}>
|
||||
<Box display="flex" alignItems="center" gap={2} mb={2}>
|
||||
<Box w="2px" h="12px" bg="var(--ui-color-intent-primary)" />
|
||||
<Box w="0.5" h="3" bg="var(--ui-color-intent-primary)" />
|
||||
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
|
||||
DASHBOARD
|
||||
</Text>
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Box } from '@/ui/Box';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface MainContentProps {
|
||||
children: ReactNode;
|
||||
hasSidebar: boolean;
|
||||
}
|
||||
|
||||
export function MainContent({ children, hasSidebar }: MainContentProps) {
|
||||
return (
|
||||
<Box
|
||||
as="main"
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
flexGrow={1}
|
||||
style={{
|
||||
paddingTop: '56px', // Header height
|
||||
marginLeft: hasSidebar ? '260px' : '0',
|
||||
transition: 'margin-left 0.2s ease-in-out',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
position="relative"
|
||||
width="full"
|
||||
maxWidth="full"
|
||||
flexGrow={1}
|
||||
display="flex"
|
||||
flexDirection="col"
|
||||
>
|
||||
{/* Background Grid */}
|
||||
<Box
|
||||
position="absolute"
|
||||
inset={0}
|
||||
pointerEvents="none"
|
||||
zIndex={0}
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(circle at 2px 2px, rgba(255,255,255,0.018) 1px, transparent 0)',
|
||||
backgroundSize: '32px 32px',
|
||||
opacity: 0.5,
|
||||
backgroundAttachment: 'fixed',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<Box position="relative" zIndex={1} flexGrow={1} display="flex" flexDirection="col">
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user