65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import CountBadge from './CountBadge.tsx';
|
|
|
|
const AccordionItem: React.FC<{
|
|
id: string;
|
|
title: string;
|
|
count: number;
|
|
icon: string;
|
|
level: 'location' | 'coop' | 'floor';
|
|
children?: React.ReactNode;
|
|
isOpen: boolean;
|
|
onToggle: (id: string) => void;
|
|
}> = ({ id, title, count, icon, level, children, isOpen, onToggle }) => {
|
|
const levelStyles = {
|
|
location: {
|
|
button: 'bg-gray-100 hover:bg-gray-200',
|
|
icon: 'text-gray-600',
|
|
title: 'text-lg font-bold text-gray-800',
|
|
},
|
|
coop: {
|
|
button: 'bg-white hover:bg-gray-50',
|
|
icon: 'text-gray-500',
|
|
title: 'font-semibold text-gray-700',
|
|
},
|
|
floor: {
|
|
button: 'bg-white',
|
|
icon: 'text-gray-500',
|
|
title: 'font-medium text-gray-700',
|
|
},
|
|
};
|
|
|
|
const styles = levelStyles[level];
|
|
|
|
return (
|
|
<div className={level === 'coop' ? 'pl-4' : ''}>
|
|
<div
|
|
className={`flex items-center justify-between p-3 rounded-md transition-colors ${styles.button}`}
|
|
>
|
|
<div className="flex items-center gap-4 flex-grow truncate">
|
|
<i className={`fa-solid ${icon} w-6 text-center text-xl ${styles.icon}`}></i>
|
|
<span className={`truncate ${styles.title}`} title={title}>
|
|
{title}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 flex-shrink-0">
|
|
<CountBadge count={count} />
|
|
{children && (
|
|
<button
|
|
onClick={() => onToggle(id)}
|
|
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-300/50"
|
|
>
|
|
<i
|
|
className={`fa-solid fa-chevron-down transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
|
|
></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{isOpen && <div className="mt-2">{children}</div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AccordionItem;
|