57 lines
1.6 KiB
TypeScript
Executable File
57 lines
1.6 KiB
TypeScript
Executable File
import {ReactNode} from 'react';
|
|
import clsx from 'clsx';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {CloseIcon} from '@common/icons/material/Close';
|
|
|
|
export interface SectionHelperProps {
|
|
title?: ReactNode;
|
|
description?: ReactNode;
|
|
actions?: ReactNode;
|
|
color?: 'positive' | 'danger' | 'warning' | 'primary' | 'neutral' | 'bgAlt';
|
|
className?: string;
|
|
size?: 'sm' | 'md';
|
|
leadingIcon?: ReactNode;
|
|
onClose?: () => void;
|
|
}
|
|
export function SectionHelper({
|
|
title,
|
|
description,
|
|
actions,
|
|
color = 'primary',
|
|
className,
|
|
size = 'md',
|
|
leadingIcon,
|
|
onClose,
|
|
}: SectionHelperProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
className,
|
|
'rounded-panel px-10 pb-10',
|
|
leadingIcon || onClose ? 'py-4' : 'py-10',
|
|
size === 'sm' ? 'text-xs' : 'text-sm',
|
|
color === 'positive' && 'bg-positive/focus',
|
|
color === 'warning' && 'bg-warning/focus',
|
|
color === 'danger' && 'bg-danger/focus',
|
|
color === 'primary' && 'bg-primary/focus',
|
|
color === 'neutral' && 'border bg',
|
|
color === 'bgAlt' && 'border bg-alt',
|
|
)}
|
|
>
|
|
{title && (
|
|
<div className="mb-4 flex items-center gap-6">
|
|
{leadingIcon}
|
|
<div className="font-medium">{title}</div>
|
|
{onClose ? (
|
|
<IconButton size="xs" className="ml-auto" onClick={() => onClose()}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
{description && <div>{description}</div>}
|
|
{actions && <div className="mt-14">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|