Spaces:
Running
Running
File size: 3,752 Bytes
afd56bc | 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 { CheckCircle, Clock } from 'lucide-react';
export interface SectionDef {
id?: string;
section_type: string;
title: string;
}
interface SectionListProps {
sections: SectionDef[];
activeSection: string;
setActiveSection: (id: string) => void;
completedSections?: string[];
}
const SectionList: React.FC<SectionListProps> = ({ sections, activeSection, setActiveSection, completedSections = [] }) => {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
<h3 style={{ fontSize: '1rem', color: 'var(--text-primary)', marginBottom: '1rem', paddingLeft: '0.5rem' }}>Struktura Wniosku</h3>
{sections.map((section) => {
const isActive = activeSection === section.section_type;
const isCompleted = completedSections.includes(section.section_type);
return (
<div
key={section.section_type}
onClick={() => setActiveSection(section.section_type)}
style={{
padding: '0.8rem 1rem',
borderRadius: '8px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
background: isActive ? 'rgba(59, 130, 246, 0.15)' : 'transparent',
border: isActive ? '1px solid rgba(59, 130, 246, 0.3)' : '1px solid transparent',
color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
fontWeight: isActive ? 600 : 400,
transition: 'all 0.2s'
}}
className={!isActive ? "hover-bg" : ""}
>
<span style={{ fontSize: '0.9rem', flex: 1 }}>{section.title}</span>
{isCompleted ? (
<CheckCircle size={16} color="var(--accent-green)" />
) : (
<Clock size={16} color="rgba(255,255,255,0.2)" />
)}
</div>
);
})}
<div style={{ height: '1px', background: 'rgba(255,255,255,0.1)', margin: '0.5rem 0' }} />
<div
onClick={() => setActiveSection('final_document')}
style={{
padding: '0.8rem 1rem',
borderRadius: '8px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
background: activeSection === 'final_document' ? 'rgba(16, 185, 129, 0.15)' : 'transparent',
border: activeSection === 'final_document' ? '1px solid rgba(16, 185, 129, 0.3)' : '1px solid transparent',
color: activeSection === 'final_document' ? 'var(--accent-green)' : 'var(--text-secondary)',
fontWeight: activeSection === 'final_document' ? 600 : 400,
transition: 'all 0.2s'
}}
className={activeSection !== 'final_document' ? "hover-bg" : ""}
>
<span style={{ fontSize: '0.9rem', flex: 1 }}>Gotowy Wniosek</span>
<CheckCircle size={16} color={activeSection === 'final_document' ? "var(--accent-green)" : "rgba(255,255,255,0.2)"} />
</div>
</div>
);
};
export default SectionList;
|