<a href="https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=26972-5841

Create alert banner component about twenty HOT 1 CLOSED

bosiraphael commented on July 18, 2024 1

Create alert banner component

from twenty.

Comments (1)

greptile-apps commented on July 18, 2024

To create an alert banner component, follow these steps:

Create Component File: Add a new file AlertBanner.tsx in /packages/twenty-front/src/modules/ui/feedback/alert-banner/components.
Component Structure: Define the AlertBanner component with props for message, type (e.g., success, error), and an optional close button.

import React from 'react';
import styled from '@emotion/styled';

interface AlertBannerProps {
  message: string;
  type: 'success' | 'error' | 'info';
  onClose?: () => void;
}

const Banner = styled.div<{ type: string }>`
  background-color: ${({ type }) => type === 'success' ? 'green' : type === 'error' ? 'red' : 'blue'};
  color: white;
  padding: 16px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
`;

const AlertBanner: React.FC<AlertBannerProps> = ({ message, type, onClose }) => (
  <Banner type={type}>
    {message}
    {onClose && <button onClick={onClose}>Close</button>}
  </Banner>
);

export default AlertBanner;

Add to Storybook: Create AlertBanner.stories.tsx in the same directory to add Storybook stories for the new component.

import React from 'react';
import { Meta, Story } from '@storybook/react';
import AlertBanner, { AlertBannerProps } from './AlertBanner';

export default {
  title: 'Feedback/AlertBanner',
  component: AlertBanner,
} as Meta;

const Template: Story<AlertBannerProps> = (args) => <AlertBanner {...args} />;

export const Success = Template.bind({});
Success.args = {
  message: 'This is a success alert!',
  type: 'success',
};

export const Error = Template.bind({});
Error.args = {
  message: 'This is an error alert!',
  type: 'error',
};

export const Info = Template.bind({});
Info.args = {
  message: 'This is an info alert!',
  type: 'info',
};