Spaces:
Running
Running
File size: 2,742 Bytes
ade3003 46a757e |
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 82 83 84 85 86 87 88 89 90 |
import React, { useState } from 'react';
import { ChevronDown, Lightbulb, BookOpen, Info } from 'lucide-react';
interface Props {
title: string;
children: React.ReactNode;
defaultOpen?: boolean;
variant?: 'default' | 'info' | 'deep-dive';
}
const Collapsible: React.FC<Props> = ({
title,
children,
defaultOpen = false,
variant = 'default'
}) => {
const [isOpen, setIsOpen] = useState(defaultOpen);
const getVariantStyles = () => {
switch (variant) {
case 'info':
return {
wrapper: 'border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10',
header: 'hover:bg-blue-100/50 dark:hover:bg-blue-900/20',
icon: <Info size={16} className="text-blue-500" />,
title: 'text-blue-700 dark:text-blue-300'
};
case 'deep-dive':
return {
wrapper: 'border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/10',
header: 'hover:bg-purple-100/50 dark:hover:bg-purple-900/20',
icon: <Lightbulb size={16} className="text-purple-500" />,
title: 'text-purple-700 dark:text-purple-300'
};
default:
return {
wrapper: 'border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/30',
header: 'hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
icon: <BookOpen size={16} className="text-gray-500" />,
title: 'text-gray-700 dark:text-gray-300'
};
}
};
const styles = getVariantStyles();
return (
<div className={`rounded-xl border overflow-hidden transition-all duration-300 ${styles.wrapper}`}>
<button
onClick={() => setIsOpen(!isOpen)}
className={`
w-full flex items-center justify-between p-4 text-left
transition-colors duration-200 ${styles.header}
`}
>
<div className="flex items-center gap-3">
{styles.icon}
<span className={`font-semibold text-sm ${styles.title}`}>
{title}
</span>
</div>
<ChevronDown
size={18}
className={`
transition-transform duration-300 ease-out text-gray-400
${isOpen ? 'rotate-180' : ''}
`}
/>
</button>
<div
className={`
overflow-hidden transition-all duration-300 ease-out
${isOpen ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'}
`}
>
<div className="p-4 pt-0 border-t border-gray-100 dark:border-gray-800">
<div className="pt-4 prose prose-sm dark:prose-invert max-w-none">
{children}
</div>
</div>
</div>
</div>
);
};
export default Collapsible;
|