Page header component

package.json

@@ -25,6 +25,7 @@
     "lucide-react": "^0.378.0",
     "polished": "^4.3.1",
     "react-icons": "^5.2.1",
+    "react-router-dom": "^6.26.1",
     "styled-components": "^6.1.8"
   },
   "peerDependencies": {

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,51 @@
+import styled from 'styled-components';
+
+export const StyledPageHeader = styled.header<{ size: 'small' | 'large' }>`
+    .header-container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        max-width: ${props => (props.size === 'small' ? '600px' : '1200px')};
+        height: ${props => (props.size === 'small' ? '60px' : '100px')};
+        padding: ${props => (props.size === 'small' ? '0.5rem' : '1rem')};
+        margin: 0 auto;
+        background-color: #333; /* Background color for the header */
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow for header */
+    }
+
+    .logo-container {
+        flex-shrink: 0;
+    }
+
+    .logo {
+        height: 100%;
+        max-height: ${props => (props.size === 'small' ? '50px' : '80px')}; /* Adjust logo size */
+        width: auto;
+    }
+
+    .menu-container {
+        display: flex;
+        gap: ${props => (props.size === 'small' ? '0.5rem' : '1rem')}; /* Space between menu items */
+    }
+
+    .menu-item {
+        all: unset;
+        color: white; /* Text color for menu items */
+        font-size: ${props => (props.size === 'small' ? '0.8rem' : '1rem')}; /* Font size based on size prop */
+        padding: ${props => (props.size === 'small' ? '0.25rem 0.5rem' : '0.5rem 1rem')}; /* Padding around menu items */
+        cursor: pointer;
+        transition: color 150ms ease-in-out, background-color 150ms ease-in-out; /* Transition for hover effects */
+        text-decoration: none; /* Remove underline from links */
+    }
+
+    .menu-item:hover {
+        color: #ddd; /* Hover text color */
+        background-color: rgba(255, 255, 255, 0.1); /* Hover background color */
+    }
+
+    .menu-item.active {
+        color: #ffd700; /* Active link color */
+        font-weight: bold; /* Bold active link */
+    }
+`;

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,45 @@
+import { FC } from 'react';
+import { NavLink } from 'react-router-dom';
+import { StyledPageHeader } from './PageHeader.style';
+
+type MenuItem = {
+	label: string;
+	path: string;
+};
+
+type PageHeaderProps = {
+	logo: string; // URL or path to the logo image
+	menuItems: MenuItem[]; // Array of menu items
+	size?: 'small' | 'large'; // Optional size prop, if needed
+};
+
+export const PageHeader: FC<PageHeaderProps> = ({
+	logo = 'Path/to/logo.png',
+	menuItems = [],
+	size = 'large',
+}: PageHeaderProps) => {
+	return (
+		<StyledPageHeader data-testid="PageHeader" size={size}>
+			<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,3 +6,4 @@ export * from './components/Label/Label';
 export * from './components/LinkButton/LinkButton';
 export * from './components/Table/Table';
 export * from './components/TruncatedText/TruncatedText';
+export * from './components/PageHeader/PageHeader';

templates/TemplateName.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
-import { renderWithDeps } from '../../../jest.utils.tsx';
-import TemplateName from './TemplateName';
+import { renderWithDeps } from '../jest.utils';
+import { TemplateName } from './TemplateName';
 
 describe('<TemplateName />', () => {
 	it('renders', () => {