feat(ui-toolkit): announcement banner to highlight mainnet sims (#2800)

libs/ui-toolkit/src/components/announcement-banner/announcement-banner.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { AnnouncementBanner } from './announcement-banner';
+
+describe('Banner', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<AnnouncementBanner>Hi</AnnouncementBanner>);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/announcement-banner/announcement-banner.stories.tsx

@@ -0,0 +1,18 @@
+import type { Story, ComponentMeta } from '@storybook/react';
+import { AnnouncementBanner } from './announcement-banner';
+
+export default {
+  component: AnnouncementBanner,
+  title: 'Announcement Banner',
+} as ComponentMeta<typeof AnnouncementBanner>;
+
+const Template: Story = (args) => (
+  <div className="mb-8">
+    <AnnouncementBanner {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: <div className="text-center">Banner text</div>,
+};

libs/ui-toolkit/src/components/announcement-banner/announcement-banner.tsx

@@ -0,0 +1,15 @@
+import classnames from 'classnames';
+import type { ReactNode } from 'react';
+
+export interface BannerProps {
+  children?: ReactNode;
+}
+
+export const AnnouncementBanner = ({ children }: BannerProps) => {
+  const bannerClasses = classnames(
+    "bg-[url('https://static.vega.xyz/assets/img/banner-bg.jpg')] bg-cover bg-center bg-no-repeat",
+    'p-4'
+  );
+
+  return <div className={bannerClasses}>{children}</div>;
+};

libs/ui-toolkit/src/components/announcement-banner/index.ts

@@ -0,0 +1 @@
+export * from './announcement-banner';

libs/ui-toolkit/src/components/index.ts

@@ -3,6 +3,7 @@ export * from './ag-grid';
 export * from './arrows';
 export * from './async-renderer';
 export * from './background-video';
+export * from './announcement-banner';
 export * from './button';
 export * from './callout';
 export * from './checkbox';