mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-02-20 07:37:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1082] Accordion variants (#1310)

Browse Source 
* updated with variants

* className

* naming

* requested updates

* Update Accordion.tsx

---------

Co-authored-by: Utku <74243531+utkubakir@users.noreply.github.com>
This commit is contained in:
ameer2468
2023-09-07 17:43:07 +03:00
committed by GitHub
parent d8ae7ac66f
commit fb9126ecee
2 changed files with 21 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
interface/components/Accordion.tsx
View File

@@ -3,41 +3,38 @@ import { CaretDown } from 'phosphor-react';
import { PropsWithChildren, useState } from 'react';
interface Props {
className?: string;
title: string;
titleClassName?: string;
containerClassName?: string;
caretSize?: number;
title: string;
variant?: keyof typeof styles;
className?: string;
}
const styles = {
default: {
container: 'flex flex-col gap-1 rounded-b-none px-4',
title: 'flex flex-row items-center justify-between px-3 py-2',
box: 'rounded-md border border-app-line bg-app-darkBox'
},
apple: {
container: 'flex flex-col gap-1 rounded-b-none px-4',
title: 'flex flex-row-reverse items-center justify-end gap-2 px-4 pb-1 pt-0 text-ink-dull',
box: 'rounded-none border-0 bg-transparent py-0'
}
};
const Accordion = (props: PropsWithChildren<Props>) => {
const [toggle, setToggle] = useState(false);
const variant = styles[props.variant ?? 'default'];
return (
<div className={clsx(props.className, 'rounded-md border border-app-line bg-app-darkBox')}>
<div
onClick={() => setToggle((t) => !t)}
className={clsx(
'flex flex-row items-center justify-between px-3 py-2',
props.titleClassName
)}
>
<div className={clsx(variant.box, props.className)}>
<div onClick={() => setToggle((t) => !t)} className={variant.title}>
<p className="text-xs">{props.title}</p>
<CaretDown
size={props.caretSize || 12}
className={clsx(toggle && 'rotate-180', 'transition-all duration-200')}
/>
</div>
{toggle && (
<div
className={clsx(
'rounded-b-md border-t border-app-line bg-app-box p-3 py-2',
props.containerClassName
)}
>
{props.children}
</div>
)}
{toggle && <div className={variant.container}>{props.children}</div>}
</div>
);
};