File size: 2,059 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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import React from 'react'
import { Group, Title, Badge, Button, Text, Box } from '@mantine/core'
import { IconRefresh } from '@tabler/icons-react'
import { useXRD } from '../context/XRDContext'
const Header = () => {
const { filename, analysisStatus, handleReset } = useXRD()
const getStatusBadge = () => {
switch (analysisStatus) {
case 'PROCESSING':
return (
<Badge color="blue" variant="light" size="lg">
Analyzing...
</Badge>
)
case 'COMPLETE':
return (
<Badge color="green" variant="light" size="lg">
Analysis Complete
</Badge>
)
default:
return (
<Badge color="gray" variant="light" size="lg">
Ready
</Badge>
)
}
}
return (
<Box
style={{
borderBottom: '1px solid #e9ecef',
backgroundColor: 'white',
padding: '1rem 2rem',
}}
>
<Group justify="space-between" align="center">
{/* Left: Logo/App Name */}
<Title
order={2}
style={{
fontWeight: 700,
letterSpacing: '-0.02em',
background: 'linear-gradient(135deg, #9775fa 0%, #1e88e5 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
backgroundClip: 'text'
}}
>
Open AlphaDiffract Demo
</Title>
{/* Center: Filename and Status */}
<Group gap="md">
<Text size="sm" c="dimmed" style={{ fontFamily: 'monospace' }}>
{filename || 'No File Loaded'}
</Text>
{getStatusBadge()}
</Group>
{/* Right: Action Toolbar */}
<Group gap="sm">
<Button
variant="subtle"
leftSection={<IconRefresh size={16} />}
size="sm"
onClick={handleReset}
>
Reset
</Button>
</Group>
</Group>
</Box>
)
}
export default Header
|