Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: export keys & new settings page

Browse Source
This commit is contained in:
Kieran
2023-04-21 21:55:04 +01:00
parent e6daf6536e
commit 45ca273064
9 changed files with 152 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/app/src/Element/Collapsed.tsx
View File

@ -32,23 +32,25 @@ export const CollapsedIcon = ({ icon, collapsed }: CollapsedIconProps) => {
interface CollapsedSectionProps {
title: ReactNode;
children: ReactNode;
className?: string;
}
export const CollapsedSection = ({ title, children }: CollapsedSectionProps) => {
export const CollapsedSection = ({ title, children, className }: CollapsedSectionProps) => {
const [collapsed, setCollapsed] = useState(true);
const icon = (
<div className={`collapse-icon ${collapsed ? "" : "flip"}`} onClick={() => setCollapsed(!collapsed)}>
<Icon name="chevronDown" />
<div className={`collapse-icon ${collapsed ? "" : "flip"}`}>
<Icon name="arrowFront" />
</div>
);
return (
<>
<div className="collapsable-section">
<h3 onClick={() => setCollapsed(!collapsed)}>{title}</h3>
<div
className={`collapsable-section${className ? ` ${className}` : ""}`}
onClick={() => setCollapsed(!collapsed)}>
{title}
<CollapsedIcon icon={icon} collapsed={collapsed} />
</div>
{collapsed ? null : children}
{!collapsed && children}
</>
);
};