diff --git a/dashboard/components/banner/Banner.mocks.tsx b/dashboard/components/banner/Banner.mocks.tsx
new file mode 100644
index 000000000..09d1379b2
--- /dev/null
+++ b/dashboard/components/banner/Banner.mocks.tsx
@@ -0,0 +1,89 @@
+import { StarIcon } from '@components/icons';
+import formatNumber from '@utils/formatNumber';
+import Image from 'next/image';
+import { BannerProps } from './Banner';
+
+const base: BannerProps = {
+ children: 'Banner Content',
+ displayBanner: true,
+ dismissBanner: () => {}
+};
+
+const primary: BannerProps = {
+ children: (
+ <>
+
+ Support Komiser by giving us a star on GitHub.
+
+
+
+
+ Star Komiser
+
+
+ {formatNumber(100000)}
+
+
+
+ ),
+ displayBanner: true,
+ dismissBanner: () => {}
+};
+
+const secondary: BannerProps = {
+ children: (
+ <>
+
+ Support Komiser by giving us a star on GitHub.
+
+
+
+
+ Star Komiser
+
+
+ {formatNumber(100000)}
+
+
+
+ ),
+ displayBanner: true,
+ dismissBanner: () => {},
+ style: 'secondary'
+};
+
+const mockBannerProps = {
+ base,
+ primary,
+ secondary
+};
+
+export default mockBannerProps;
diff --git a/dashboard/components/banner/Banner.stories.tsx b/dashboard/components/banner/Banner.stories.tsx
new file mode 100644
index 000000000..cb1f8d587
--- /dev/null
+++ b/dashboard/components/banner/Banner.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Banner from './Banner';
+import mockBannerProps from './Banner.mocks';
+
+const meta: Meta = {
+ title: 'Komiser/Banner',
+ component: Banner,
+ tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ ...mockBannerProps.base
+ }
+};
+
+export const Primary: Story = {
+ args: {
+ ...mockBannerProps.primary
+ }
+};
+
+export const Secondary: Story = {
+ args: {
+ ...mockBannerProps.secondary
+ }
+};
diff --git a/dashboard/components/banner/Banner.tsx b/dashboard/components/banner/Banner.tsx
index ff4e32b04..229606e7a 100644
--- a/dashboard/components/banner/Banner.tsx
+++ b/dashboard/components/banner/Banner.tsx
@@ -1,60 +1,40 @@
-import Image from 'next/image';
-import { useContext } from 'react';
import classNames from 'classnames';
-import formatNumber from '../../utils/formatNumber';
-import GlobalAppContext from '../layout/context/GlobalAppContext';
-import StarIcon from '../icons/StarIcon';
+import { ReactNode } from 'react';
-type BannerProps = {
- githubStars: number | undefined;
+export type BannerProps = {
+ children: ReactNode;
+ displayBanner: boolean;
+ dismissBanner: () => void;
+ style?: 'primary' | 'secondary';
};
-function Banner({ githubStars }: BannerProps) {
- const { displayBanner, dismissBanner } = useContext(GlobalAppContext);
+function Banner({
+ children,
+ displayBanner,
+ dismissBanner,
+ style = 'primary'
+}: BannerProps) {
+ const bannerStyle = classNames(
+ 'top-0 z-10 flex w-full animate-fade-in-down-short items-center justify-center gap-6 bg-gradient-to-br py-3 opacity-0',
+ {
+ fixed: displayBanner,
+ hidden: !displayBanner,
+ 'text-white from-darkcyan-500 to-darkcyan-700': style === 'primary',
+ 'text-black bg-white shadow-right': style === 'secondary'
+ }
+ );
+ const buttonStyle = classNames(
+ 'absolute right-8 cursor-pointer rounded-lg p-3 transition-colors',
+ {
+ 'text-white hover:bg-white/10 active:bg-gray-950': style === 'primary',
+ 'text-black hover:bg-black/10': style === 'secondary'
+ }
+ );
return (
-
-
- Support Komiser by giving us a star on GitHub.
-
-
- {githubStars && (
-
-
- Star Komiser
-
-
- {formatNumber(githubStars)}
-
-
- )}
-
-