remove collapse

pull/142/head
lyc8503 2025-09-21 21:54:42 +08:00
parent 52b98acdf4
commit ebd665cf46
1 changed files with 15 additions and 38 deletions

View File

@ -77,9 +77,6 @@ export default function OverallStatus({
), ),
})) }))
const [activeOpen, setActiveOpen] = useState(true)
const [upcomingOpen, setUpcomingOpen] = useState(false)
return ( return (
<Container size="md" mt="xl"> <Container size="md" mt="xl">
<Center>{icon}</Center> <Center>{icon}</Center>
@ -96,47 +93,27 @@ export default function OverallStatus({
{/* Active Maintenance */} {/* Active Maintenance */}
{activeMaintenances.length > 0 && ( {activeMaintenances.length > 0 && (
<> <>
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: '1rem' }}> {activeMaintenances.map((maintenance, idx) => (
<Title order={3} style={{ color: '#f29030' }}> <MaintenanceAlert
Ongoing Maintenance key={`active-${idx}`}
</Title> maintenance={maintenance}
<Button variant="subtle" size="xs" onClick={() => setActiveOpen((o) => !o)}> style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
{activeOpen ? <IconMinus size={16} /> : <IconPlus size={16} />} />
</Button> ))}
</Box>
<Collapse in={activeOpen}>
{activeMaintenances.map((maintenance, idx) => (
<MaintenanceAlert
key={`active-${idx}`}
maintenance={maintenance}
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
/>
))}
</Collapse>
</> </>
)} )}
{/* Upcoming Maintenance */} {/* Upcoming Maintenance */}
{upcomingMaintenances.length > 0 && ( {upcomingMaintenances.length > 0 && (
<> <>
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: '1rem' }}> {upcomingMaintenances.map((maintenance, idx) => (
<Title order={3} style={{ color: 'gray' }}> <MaintenanceAlert
Upcoming Maintenance key={`upcoming-${idx}`}
</Title> maintenance={maintenance}
<Button variant="subtle" size="xs" onClick={() => setUpcomingOpen((o) => !o)}> style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
{upcomingOpen ? <IconMinus size={16} /> : <IconPlus size={16} />} upcoming
</Button> />
</Box> ))}
<Collapse in={upcomingOpen}>
{upcomingMaintenances.map((maintenance, idx) => (
<MaintenanceAlert
key={`upcoming-${idx}`}
maintenance={maintenance}
style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
upcoming
/>
))}
</Collapse>
</> </>
)} )}
</Container> </Container>