1import type { FC } from "react";
 2
 3
 4interface HeaderProps {
 5    start?: React.ReactNode;
 6    center?: React.ReactNode;
 7    end?: React.ReactNode;
 8}
 9
10export const Header: FC<HeaderProps> = ({ start, center, end }) => (
11    <header className="h-[3.5rem]">
12        <div className="flex flex-row justify-between justify-items-stretch items-center lg:grid grid-cols-3 p-1 px-4 w-full h-full bg-primary text-primary-foreground dark:bg-primary-foreground">
13            <div className="flex flex-row gap-2 justify-center-start justify-start items-center">
14                {start}
15            </div>
16            <div className="justify-center justify-self-center">
17                {center}
18            </div>
19            <div className="flex flex-row gap-2 h-10 justify-end  justify-self-end items-center">
20                {end}
21            </div>
22        </div>
23    </header>
24);