[ui] add Banner component

packages/ui/src/Banner/Banner.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import React from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+export type BannerSize = 'md' | 'sm' | 'xs';
+
+type Props = Readonly<{
+  children: React.ReactNode;
+  onHide?: () => void;
+  size?: BannerSize;
+}>;
+
+export default function Banner({ children, size = 'md', onHide }: Props) {
+  return (
+    <div
+      className={clsx(
+        'bg-primary-600 relative',
+        size === 'sm' && 'text-sm',
+        size === 'xs' && 'text-xs',
+      )}>
+      <div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
+        <div className="pr-16 sm:px-16 sm:text-center">
+          <p className="font-medium text-white">{children}</p>
+        </div>
+        {onHide != null && (
+          <div
+            className={clsx(
+              'absolute inset-y-0 right-0 flex items-start sm:items-start',
+              size === 'md' && 'pt-2 pr-2',
+              size === 'sm' && 'pt-2 pr-2',
+              size === 'xs' && 'pt-1.5 pr-2',
+            )}>
+            <button
+              className={clsx(
+                'hover:bg-primary-400 flex rounded-md focus:outline-none focus:ring-2 focus:ring-white',
+                size === 'md' && 'p-1',
+                size === 'sm' && 'p-0.5',
+                size === 'xs' && 'p-0.5',
+              )}
+              type="button"
+              onClick={onHide}>
+              <span className="sr-only">Dismiss</span>
+              <XMarkIcon aria-hidden="true" className="h-6 w-6 text-white" />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

packages/ui/src/index.tsx

@@ -4,6 +4,9 @@ export { default as Alert } from './Alert/Alert';
 // Badge
 export * from './Badge/Badge';
 export { default as Badge } from './Badge/Badge';
+// Banner
+export * from './Banner/Banner';
+export { default as Banner } from './Banner/Banner';
 // Button
 export * from './Button/Button';
 export { default as Button } from './Button/Button';