forked from baron/baron-sso
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from "react";
|
|
|
|
function cx(...classNames: Array<string | false | null | undefined>) {
|
|
return classNames.filter(Boolean).join(" ");
|
|
}
|
|
|
|
export const commonSearchFilterBarRowClass =
|
|
"flex flex-col gap-3 md:flex-row md:items-center md:justify-between";
|
|
export const commonSearchFilterBarPrimaryClass =
|
|
"flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:items-center";
|
|
export const commonSearchFilterBarActionsClass =
|
|
"flex flex-wrap items-center gap-2";
|
|
export const commonSearchFilterBarAdvancedClass =
|
|
"flex flex-col gap-4 rounded-lg border border-border/40 bg-secondary/30 p-4 animate-in fade-in slide-in-from-top-2 duration-200";
|
|
|
|
type SearchFilterBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
actions?: ReactNode;
|
|
advanced?: ReactNode;
|
|
advancedOpen?: boolean;
|
|
primary: ReactNode;
|
|
};
|
|
|
|
export function SearchFilterBar({
|
|
actions,
|
|
advanced,
|
|
advancedOpen = false,
|
|
className,
|
|
primary,
|
|
...props
|
|
}: SearchFilterBarProps) {
|
|
return (
|
|
<div className={cx("space-y-3", className)} {...props}>
|
|
<div className={commonSearchFilterBarRowClass}>
|
|
<div className={commonSearchFilterBarPrimaryClass}>{primary}</div>
|
|
{actions ? (
|
|
<div className={commonSearchFilterBarActionsClass}>{actions}</div>
|
|
) : null}
|
|
</div>
|
|
{advanced && advancedOpen ? (
|
|
<div className={commonSearchFilterBarAdvancedClass}>{advanced}</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|