30 lines
949 B
TypeScript
30 lines
949 B
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { ChevronDown, ChevronUp } from 'lucide-react'
|
|
|
|
interface ExpandableSectionProps {
|
|
title: string
|
|
content: string
|
|
}
|
|
|
|
export function ExpandableSection({ title, content }: ExpandableSectionProps) {
|
|
const [isExpanded, setIsExpanded] = useState(false)
|
|
|
|
return (
|
|
<div className="border border-border rounded-lg overflow-hidden">
|
|
<button
|
|
className="w-full px-6 py-4 text-left bg-secondary/50 hover:bg-secondary/70 transition-colors flex items-center justify-between"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
>
|
|
<h3 className="font-semibold">{title}</h3>
|
|
{isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
|
|
</button>
|
|
{isExpanded && (
|
|
<div className="px-6 py-4 bg-background animate-slide-up">
|
|
<p className="text-muted-foreground leading-relaxed">{content}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |