first commit

common/resources/client/ui/section-helper.tsx

@@ -0,0 +1,56 @@
+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>
+  );
+}