Spaces:
Sleeping
Sleeping
File size: 1,700 Bytes
0d37119 | 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 | import { useState } from 'react';
import ProjectCard from './ProjectCard';
export default function ProjectCardsDrawer({ projects, statuses }) {
const [open, setOpen] = useState(false);
return (
<div style={{
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
zIndex: 20,
}}>
{/* Handle bar */}
<div
onClick={() => setOpen(!open)}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '10px',
padding: '10px',
background: '#ffffff',
borderTop: '1px solid #e0e0e0',
cursor: 'pointer',
}}
>
<span style={{
fontSize: '13px',
color: '#1f1f1f',
fontWeight: 500,
}}>
{open ? 'Fermer les projets' : `${projects.length} projets`}
</span>
<span style={{ fontSize: '10px', color: '#5f6368' }}>
{open ? '\u25BC' : '\u25B2'}
</span>
</div>
{/* Drawer content */}
{open && (
<div style={{
background: '#f8f9fa',
borderTop: '1px solid #e0e0e0',
padding: '16px 24px',
display: 'flex',
flexWrap: 'wrap',
gap: '12px',
maxHeight: '55vh',
overflowY: 'auto',
animation: 'fadeIn 0.2s ease-out',
}}>
{projects.map(project => (
<ProjectCard
key={project.id}
project={project}
status={statuses[project.id]?.status || 'STANDBY'}
alerts={statuses[project.id]?.alerts || []}
/>
))}
</div>
)}
</div>
);
}
|