57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { useState, ReactNode } from "react";
|
|
|
|
import Icon from "Icons/Icon";
|
|
import ShowMore from "Element/ShowMore";
|
|
|
|
interface CollapsedProps {
|
|
text?: string;
|
|
children: ReactNode;
|
|
collapsed: boolean;
|
|
setCollapsed(b: boolean): void;
|
|
}
|
|
|
|
const Collapsed = ({ text, children, collapsed, setCollapsed }: CollapsedProps) => {
|
|
return collapsed ? (
|
|
<div className="collapsed">
|
|
<ShowMore text={text} onClick={() => setCollapsed(false)} />
|
|
</div>
|
|
) : (
|
|
<div className="uncollapsed">{children}</div>
|
|
);
|
|
};
|
|
|
|
interface CollapsedIconProps {
|
|
icon: ReactNode;
|
|
collapsed: boolean;
|
|
}
|
|
|
|
export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => {
|
|
return collapsed ? <div className="collapsed">{icon}</div> : <div className="uncollapsed">{icon}</div>;
|
|
};
|
|
|
|
interface CollapsedSectionProps {
|
|
title: ReactNode;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const CollapsedSection = ({ title, children }: CollapsedSectionProps) => {
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const icon = (
|
|
<div className={`collapse-icon ${collapsed ? "" : "flip"}`} onClick={() => setCollapsed(!collapsed)}>
|
|
<Icon name="chevronDown" />
|
|
</div>
|
|
);
|
|
return (
|
|
<>
|
|
<div className="collapsable-section">
|
|
<h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
|
|
<CollapsedIcon icon={icon} collapsed={collapsed} />
|
|
</div>
|
|
|
|
{collapsed ? null : children}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Collapsed;
|