Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-09-08 08:56:09 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix minor styling issues with CollapsibleCard

Browse Source
This commit is contained in:
Jared Schoeny
2025-12-22 17:39:05 -10:00
parent 627836b448
commit a7daaff8f6
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Primitives/CollapsibleCard.tsx
View File

@@ -7,16 +7,17 @@ interface CollapsibleCardProps {
title: string;
children: ReactNode;
defaultExpanded?: boolean;
className?: string;
}
export default function CollapsibleCard({ title, children, defaultExpanded = false }: CollapsibleCardProps) {
export default function CollapsibleCard({ title, children, defaultExpanded = false, className }: CollapsibleCardProps) {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
return (
<div className="card-simple p-4 sm:p-5">
<div className={`px-4 sm:px-5 ${className}`}>
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center justify-between gap-2 text-left hover:opacity-80 transition-opacity"
className="py-4 sm:py-5 hover:cursor-pointer w-full flex items-center justify-between gap-2 text-left group-hover:opacity-80 transition-opacity"
aria-expanded={isExpanded}
>
<h2 className="text-sm font-semibold text-foreground/90">{title}</h2>
@@ -30,7 +31,7 @@ export default function CollapsibleCard({ title, children, defaultExpanded = fal
</button>
<div
className={`grid transition-all duration-300 ease-in-out ${
isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
isExpanded ? "grid-rows-[1fr] pb-4 sm:pb-5" : "grid-rows-[0fr]"
}`}
>
<div className="overflow-hidden">