From d6fcb9cae88f3a04236f38d3536f2cf20827cdc2 Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 19 Jun 2024 15:41:57 +0200
Subject: [PATCH] 5934 create alert banner component (#5950)

Closes #5934

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../ui/layout/banner/components/Banner.tsx    | 22 ++++++++++++
 .../components/__stories__/Banner.stories.tsx | 34 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 packages/twenty-front/src/modules/ui/layout/banner/components/Banner.tsx
 create mode 100644 packages/twenty-front/src/modules/ui/layout/banner/components/__stories__/Banner.stories.tsx

diff --git a/packages/twenty-front/src/modules/ui/layout/banner/components/Banner.tsx b/packages/twenty-front/src/modules/ui/layout/banner/components/Banner.tsx
new file mode 100644
index 000000000..f08b15ce0
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/banner/components/Banner.tsx
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const StyledBanner = styled.div`
+  align-items: center;
+  backdrop-filter: blur(5px);
+  background: ${({ theme }) => theme.color.blue};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  height: 40px;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(3)};
+  width: 100%;
+  color: ${({ theme }) => theme.font.color.inverted};
+  font-family: Inter;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  line-height: 150%;
+  box-sizing: border-box;
+`;
+
+export { StyledBanner as Banner };
diff --git a/packages/twenty-front/src/modules/ui/layout/banner/components/__stories__/Banner.stories.tsx b/packages/twenty-front/src/modules/ui/layout/banner/components/__stories__/Banner.stories.tsx
new file mode 100644
index 000000000..2becd60a9
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/banner/components/__stories__/Banner.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator, IconRefresh } from 'twenty-ui';
+
+import { Button } from '@/ui/input/button/components/Button';
+
+import { Banner } from '../Banner';
+
+const meta: Meta<typeof Banner> = {
+  title: 'UI/Layout/Banner/Banner',
+  component: Banner,
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <Banner {...args}>
+      Sync lost with mailbox hello@twenty.com. Please reconnect for updates:
+      <Button
+        variant="secondary"
+        title="Reconnect"
+        Icon={IconRefresh}
+        size="small"
+        inverted
+      />
+    </Banner>
+  ),
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+export const Default: Story = {};