Page header component

package.json

@@ -31,6 +31,7 @@
     "lucide-react": "^0.378.0",
     "polished": "^4.3.1",
     "react-icons": "^5.2.1",
+    "react-router-dom": "^6.26.1",
     "react-select": "^5.8.0",
     "styled-components": "^6.1.8"
   },

src/components/PageHeader/PageHeader.stories.ts

@@ -0,0 +1,39 @@
+import { PageHeader } from './PageHeader';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+	title: 'Components/PageHeader',
+	component: PageHeader,
+} satisfies Meta<typeof PageHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultProps = {
+
+};
+
+const disableControls = {
+	parameters: {
+		controls: {
+			disable: true
+		},
+		actions: {
+			disable: true
+		},
+	}
+};
+
+export const Demo: Story = {
+	args: {
+		...defaultProps
+	},
+	tags: ['excludeFromSidebar']
+};
+
+export const Default: Story = {
+	args: {
+		...defaultProps
+	},
+	...disableControls
+};

src/components/PageHeader/PageHeader.style.ts

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { ThemeElementSize, ThemeColor } from '../../types';
+import { readableColor, shade } from 'polished';
+
+type StyledPageHeaderProps = {
+	$size: ThemeElementSize;
+    $color: ThemeColor;
+};
+
+export const StyledPageHeader = styled.header<StyledPageHeaderProps>`
+    .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        max-width: ${props => (props.$size === 'sm' ? '600px' : '1200px')};
+        height: ${props => props.$size === 'sm' ? props.theme.spacing.xl : props.theme.spacing.xxl};
+        padding: ${props => props.$size === 'sm' ? props.theme.spacing.sm : props.theme.spacing.md};
+        margin: 0 auto;
+        background-color: ${props => props.theme.colors[props.$color]};
+        color: ${props => readableColor(props.theme.colors[props.$color])};
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .logo-container {
+        flex-shrink: 0;
+    }
+
+    .logo {
+        height: 100%;
+        max-height: ${props => props.$size === 'sm' ? props.theme.spacing.sm : props.theme.spacing.lg};
+        width: auto;
+    }
+
+    .menu-container {
+        display: flex;
+        gap: ${props => props.$size === 'sm' ? props.theme.spacing.sm : props.theme.spacing.md};
+    }
+
+    .menu-item {
+        all: unset;
+        font-size: ${props => props.$size === 'sm' ? props.theme.fontSizes.sm : props.theme.fontSizes.md};
+        padding: ${props => props.$size === 'sm' ? props.theme.spacing.xs : props.theme.spacing.sm};
+        cursor: pointer;
+        transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
+        text-decoration: none;
+    }
+
+    .menu-item:hover {
+        background-color: ${props => shade(0.15, props.theme.colors.primary)};
+    }
+
+    .menu-item.active {
+        font-weight: ${props => props.theme.fontWeights.bold};
+    }
+`;

src/components/PageHeader/PageHeader.test.tsx

@@ -0,0 +1,13 @@
+import { screen } from '@testing-library/react';
+import { renderWithDeps } from '../../../jest.utils';
+import { PageHeader } from './PageHeader';
+
+describe('<PageHeader />', () => {
+	it('renders', () => {
+		renderWithDeps(<PageHeader logo={''} menuItems={[]} />);
+
+		const pageHeader = screen.getByTestId('PageHeader');
+
+		expect(pageHeader).toBeInTheDocument();
+	});
+});

src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { NavLink } from 'react-router-dom';
+import { StyledPageHeader } from './PageHeader.style';
+import { ThemeElementSize, ThemeColor } from '../../types';
+
+type MenuItem = {
+	label: string;
+	path: string;
+};
+
+type PageHeaderProps = {
+	logo: string; // URL or path to the logo image
+	menuItems: MenuItem[]; // Array of menu items
+	size?: ThemeElementSize; // Optional size prop, if needed
+	color?: ThemeColor;
+};
+
+export const PageHeader: FC<PageHeaderProps> = ({
+	logo = 'Path/to/logo.png',
+	menuItems = [],
+	size = 'lg',
+	color = 'primary',
+}: PageHeaderProps) => {
+	return (
+		<StyledPageHeader data-testid="PageHeader" $size={size} $color={color}>
+			<div className="header-container">
+				<div className="logo-container">
+					<img src={logo} alt="Logo" className="logo" />
+				</div>
+				<nav className="menu-container">
+					{menuItems.length > 0 ? (
+						menuItems.map((item, index) => (
+							<NavLink
+								key={index}
+								to={item.path}
+								className={({ isActive }) => (isActive ? 'menu-item active' : 'menu-item')}
+							>
+								{item.label}
+							</NavLink>
+						))
+					) : (
+						<p>No menu items available</p>
+					)}
+				</nav>
+			</div>
+		</StyledPageHeader>
+	);
+};

src/index.ts

@@ -6,4 +6,5 @@ export * from './components/Label/Label';
 export * from './components/LinkButton/LinkButton';
 export * from './components/Table/Table';
 export * from './components/TruncatedText/TruncatedText';
-export * from './components/Modal/Modal';
+export * from './components/PageHeader/PageHeader';
+export * from './components/Modal/Modal';

templates/TemplateName.test.tsx

@@ -1,4 +1,5 @@
 import { screen } from '@testing-library/react';
+
 import { renderWithDeps } from '../../../jest.utils';
 import TemplateName from './TemplateName';
 import { axe } from 'jest-axe';