[ui] add Banner component

apps/storybook/stories/banner.stories.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import type { ComponentMeta } from '@storybook/react';
+import type { BannerSize } from '@tih/ui';
+import { Banner } from '@tih/ui';
+
+const bannerSizes: ReadonlyArray<BannerSize> = ['xs', 'sm', 'md'];
+
+export default {
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    size: {
+      control: { type: 'select' },
+      options: bannerSizes,
+    },
+  },
+  component: Banner,
+  title: 'Banner',
+} as ComponentMeta<typeof Banner>;
+
+export const Basic = {
+  args: {
+    children: 'This notice is going to change your life',
+    size: 'md',
+  },
+};
+
+export function Sizes() {
+  const [isShown, setIsShown] = useState(true);
+  const [isShown2, setIsShown2] = useState(true);
+  const [isShown3, setIsShown3] = useState(true);
+  return (
+    <div className="space-y-4">
+      {isShown && (
+        <Banner onHide={() => setIsShown(false)}>
+          This notice is going to change your life unless you close it.
+        </Banner>
+      )}
+      {isShown2 && (
+        <Banner size="sm" onHide={() => setIsShown2(false)}>
+          This smaller notice is going to change your life unless you close it.
+        </Banner>
+      )}
+      {isShown3 && (
+        <Banner size="xs" onHide={() => setIsShown3(false)}>
+          This even smaller notice is going to change your life unless you close
+          it.
+        </Banner>
+      )}
+    </div>
+  );
+}

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';