49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
|
|
|
|
import { ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface AccordionProps {
|
|
title: string;
|
|
icon: ReactNode;
|
|
children: ReactNode;
|
|
isOpen: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
|
|
return (
|
|
<Box border={true} borderColor="border-charcoal-outline" rounded="lg" overflow="hidden" bg="bg-iron-gray/30">
|
|
<Box
|
|
as="button"
|
|
onClick={onToggle}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
px={3}
|
|
py={2}
|
|
fullWidth
|
|
className="hover:bg-iron-gray/50 transition-colors"
|
|
>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
{icon}
|
|
<Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
|
|
{title}
|
|
</Text>
|
|
</Stack>
|
|
<Icon icon={isOpen ? ChevronDown : ChevronUp} size={4} color="text-gray-400" />
|
|
</Box>
|
|
|
|
{isOpen && (
|
|
<Box p={3} borderTop={true} borderColor="border-charcoal-outline">
|
|
{children}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|