feat(banner): introduce new design (#5762)

* feat(banner): introduce new design

related issue: #5760

* feat(banner): introduce new design

related issue: #5760

* update form feedback

* small update

* update with feedback

* Update components/Common/Banner/index.tsx

Co-authored-by: Claudio W <[email protected]>
Signed-off-by: Augustin Mauroy <[email protected]>

* Update index.tsx

---------

Signed-off-by: Augustin Mauroy <[email protected]>
Co-authored-by: Claudio W <[email protected]>

Author: AugustinMauroy

components/Common/Banner/index.module.scss

@@ -0,0 +1,23 @@
+.banner {
+  @apply text-sm text-white flex flex-row items-center justify-center gap-2 py-3 w-full;
+
+  a {
+    @apply underline;
+  }
+
+  svg {
+    @apply h-4 w-4;
+  }
+}
+
+.default {
+  @apply bg-green-600;
+}
+
+.error {
+  @apply bg-danger-600;
+}
+
+.warning {
+  @apply bg-warning-600;
+}

components/Common/Banner/index.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import Banner from './';
+
+type Story = StoryObj<typeof Banner>;
+type Meta = MetaObj<typeof Banner>;
+
+export const Default: Story = {
+  args: {
+    text: 'Nodejs collaborator summitNode.js Collaborator Summit 2023 - Bilbao, Spain (OpenJS World EU) 2023',
+    type: 'default',
+    url: 'https://github.com/openjs-foundation/summit/issues/360',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    text: 'STOP creating issue for error 500 on download',
+    type: 'error',
+    url: 'https://github.com/nodejs/nodejs.org/issues/4495',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    text: 'STOP creating issue for error 500 on download',
+    type: 'warning',
+    url: 'https://github.com/nodejs/nodejs.org/issues/4495',
+  },
+};
+
+export const NoLink: Story = {
+  args: {
+    text: 'Claudio is the best maintainer',
+    type: 'default',
+  },
+};
+
+export const NoType: Story = {
+  args: {
+    text: 'Claudio is the best maintainer',
+    url: 'https://github.com/ovflowd',
+  },
+};
+
+export default { component: Banner } as Meta;

components/Common/Banner/index.tsx

@@ -0,0 +1,20 @@
+import LocalizedLink from '@/components/LocalizedLink';
+import { ArrowUpRightIcon } from '@heroicons/react/24/outline';
+import styles from './index.module.scss';
+import type { FC } from 'react';
+
+type BannerProps = {
+  type: 'default' | 'error' | 'warning';
+  text: string;
+  url?: string;
+};
+
+const Banner: FC<BannerProps> = ({ type, text, url = '' }) => (
+  <div className={`${styles.banner} ${styles[type] || styles.default}`}>
+    {(url.length > 0 && <LocalizedLink href={url}>{text}</LocalizedLink>) ||
+      text}
+    {url.length > 0 && <ArrowUpRightIcon />}
+  </div>
+);
+
+export default Banner;