File size: 1,915 Bytes
6d08d46 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React from 'react'
import { Box, Paper, Stack } from '@mantine/core'
import { XRDProvider } from './context/XRDContext'
import Header from './components/Header'
import ResultsHero from './components/ResultsHero'
import XRDGraph from './components/XRDGraph'
import Controls from './components/Controls'
import LogitDrawer from './components/LogitDrawer'
function App() {
return (
<XRDProvider>
<Box style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
{/* Header - Full Width */}
<Header />
{/* Main Content Area - T-Shape Layout */}
<Box style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
{/* Sidebar - Controls Only */}
<Box
style={{
width: '350px',
flexShrink: 0,
borderRight: '1px solid #e9ecef',
overflowY: 'auto',
backgroundColor: 'white',
}}
>
<Box p="lg" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
<Controls />
</Box>
</Box>
{/* Main Panel - Results + Visualization */}
<Box
style={{
flex: 1,
overflowY: 'auto',
background: 'linear-gradient(180deg, #f8f9fa 0%, #f1f3f5 100%)',
padding: '2rem',
}}
>
<Stack gap="xl">
{/* Results Hero Section */}
<ResultsHero />
{/* Visualization Section */}
<Paper shadow="lg" p="lg" withBorder radius="md" style={{ backgroundColor: 'white' }}>
<XRDGraph />
</Paper>
</Stack>
</Box>
</Box>
{/* Logit Inspector Drawer */}
<LogitDrawer />
</Box>
</XRDProvider>
)
}
export default App
|