45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
/*
|
|
* Vencord, a Discord client mod
|
|
* Copyright (c) 2026 Vendicated and contributors
|
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
*/
|
|
|
|
import "./ExpandableCard.css";
|
|
|
|
import { classes } from "@utils/misc";
|
|
import { Clickable, useState } from "@webpack/common";
|
|
import { PropsWithChildren } from "react";
|
|
|
|
import { Card } from "./Card";
|
|
import { DownArrow, RightArrow } from "./Icons";
|
|
|
|
export type ExpandableSectionProps = PropsWithChildren<{
|
|
renderContent: () => React.ReactNode;
|
|
className?: string;
|
|
initialExpanded?: boolean;
|
|
}>;
|
|
|
|
/**
|
|
* A card component that can expand and collapse to show/hide content. The header (props.children) is always visible, and the content (props.renderContent) is only visible when expanded.
|
|
*/
|
|
export function ExpandableSection({ children, renderContent: Content, className, initialExpanded = false }: ExpandableSectionProps) {
|
|
const [expanded, setExpanded] = useState(initialExpanded);
|
|
|
|
const Icon = expanded ? DownArrow : RightArrow;
|
|
|
|
return (
|
|
<Card data-expanded={expanded} className={classes("vc-expandable-card", className)}>
|
|
<Clickable className="vc-expandable-card-header" onClick={() => setExpanded(c => !c)} >
|
|
{children}
|
|
<Icon className="vc-expandable-card-icon" />
|
|
</Clickable>
|
|
|
|
{expanded
|
|
? <div className="vc-expandable-card-content">
|
|
<Content />
|
|
</div>
|
|
: null
|
|
}
|
|
</Card>
|
|
);
|
|
}
|