darman
969e4d6e37
Implement web frontend using Vite + React + TypeScript with: - Chakra UI component library for theming and styling - SignalR bridge (lunaBridge) for real-time server communication - Chat components (ChatPanel, ChatInput, ChatMessage) - Layout components (AppLayout, Sidebar, StatusBar, SystemPanel) - Custom useChat hook for conversation state management - Dark/light theme support via ColorModeProvider - Mock conversation data for development
35 lines
970 B
TypeScript
35 lines
970 B
TypeScript
import { Flex, Text, Box } from '@chakra-ui/react';
|
|
|
|
export const StatusBar = () => {
|
|
return (
|
|
<Flex
|
|
h="28px"
|
|
bg="gray.950"
|
|
borderTop="1px solid"
|
|
borderColor="green.900"
|
|
align="center"
|
|
px={4}
|
|
justify="space-between"
|
|
fontFamily="'JetBrains Mono', monospace"
|
|
fontSize="11px"
|
|
color="green.500"
|
|
css={{
|
|
boxShadow: 'inset 0 1px 0 rgba(0,255,0,0.1)'
|
|
}}
|
|
>
|
|
<Flex gap={6} align="center">
|
|
<Flex gap={2} align="center">
|
|
<Box w="6px" h="6px" borderRadius="full" bg="green.400" css={{ animation: 'blink 2s infinite' }} />
|
|
<Text fontWeight="bold">LUNA_CORE_ONLINE</Text>
|
|
</Flex>
|
|
<Text color="gray.500">SESSION: sess_99x</Text>
|
|
<Text color="gray.500">MEM: 4.2GB / 16GB</Text>
|
|
</Flex>
|
|
|
|
<Flex gap={6}>
|
|
<Text color="gray.500">{new Date().toISOString()}</Text>
|
|
<Text>v2.4.1</Text>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}; |