starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-10 11:13:48 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better dropdown separator

Browse Source
This commit is contained in:
Gregory Schier
2023-03-25 11:06:05 -07:00
parent 41390e9142
commit 09c574bf30
6 changed files with 73 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src-web/components/core/Separator.tsx
View File

@@ -4,19 +4,26 @@ interface Props {
orientation?: 'horizontal' | 'vertical';
variant?: 'primary' | 'secondary';
className?: string;
label?: string;
}
export function Separator({ className, variant = 'primary', orientation = 'horizontal' }: Props) {
export function Separator({
className,
variant = 'primary',
orientation = 'horizontal',
label,
}: Props) {
return (
<div
role="separator"
className={classnames(
className,
variant === 'primary' && 'bg-highlight',
variant === 'secondary' && 'bg-highlightSecondary',
orientation === 'horizontal' && 'w-full h-[1px]',
orientation === 'vertical' && 'h-full w-[1px]',
)}
/>
<div role="separator" className={classnames(className, 'flex items-center')}>
{label && <div className="text-xs text-gray-500 mx-2 whitespace-nowrap">{label}</div>}
<div
className={classnames(
variant === 'primary' && 'bg-highlight',
variant === 'secondary' && 'bg-highlightSecondary',
orientation === 'horizontal' && 'w-full h-[1px]',
orientation === 'vertical' && 'h-full w-[1px]',
)}
/>
</div>
);
}