first commit

common/resources/client/ui/images/illustrated-message.tsx

@@ -0,0 +1,63 @@
+import React, {ReactNode} from 'react';
+import clsx from 'clsx';
+import {InputSize} from '../forms/input-field/input-size';
+
+export interface IllustratedMessageProps {
+  className?: string;
+  size?: InputSize;
+  image?: ReactNode;
+  imageHeight?: string;
+  imageMargin?: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}
+export function IllustratedMessage({
+  image,
+  title,
+  description,
+  action,
+  className,
+  size = 'md',
+  imageHeight,
+  imageMargin = 'mb-24',
+}: IllustratedMessageProps) {
+  const style = getSizeClassName(size, imageHeight);
+  return (
+    <div className={clsx('text-center', className)}>
+      {image && <div className={clsx(style.image, imageMargin)}>{image}</div>}
+      {title && (
+        <div className={clsx(style.title, 'mb-2 text-main')}>{title}</div>
+      )}
+      {description && (
+        <div className={clsx(style.description, 'text-muted')}>
+          {description}
+        </div>
+      )}
+      {action && <div className="mt-20">{action}</div>}
+    </div>
+  );
+}
+
+function getSizeClassName(size: InputSize, imageHeight?: string) {
+  switch (size) {
+    case 'xs':
+      return {
+        image: imageHeight || 'h-60',
+        title: 'text-sm',
+        description: 'text-xs',
+      };
+    case 'sm':
+      return {
+        image: imageHeight || 'h-80',
+        title: 'text-base',
+        description: 'text-sm',
+      };
+    default:
+      return {
+        image: imageHeight || 'h-128',
+        title: 'text-lg',
+        description: 'text-base',
+      };
+  }
+}