1import { HeaderMenu } from "./menu";
 2import { GithubRepo } from "@marzneshin/features/github-repo";
 3import { Link } from "@tanstack/react-router";
 4import { CommandBox } from "@marzneshin/features/search-command";
 5import type { FC, PropsWithChildren } from "react";
 6import { useScreenBreakpoint } from "@marzneshin/hooks/use-screen-breakpoint";
 7
 8export const Header: FC<PropsWithChildren> = ({ children }) => {
 9    const isDesktop = useScreenBreakpoint("md");
10
11    return (
12        <div className="flex flex-row justify-between items-center p-1 px-4 w-full h-full bg-primary text-primary-foreground dark:bg-primary-foreground">
13            <div className="flex flex-row gap-4 justify-center items-center">
14                <Link to="/">
15                    <div className="flex flex-col justify-center items-center p-2 h-10 text-2xl font-bold bg-gray-800 rounded-lg font-header text-secondary border-accent dark:text-secondary-foreground">
16                        M
17                    </div>
18                </Link>
19                {children}
20                <CommandBox />
21            </div>
22            <div className="flex flex-row gap-2 h-10">
23                <GithubRepo variant={isDesktop ? "full" : "mini"} />
24                <HeaderMenu />
25            </div>
26        </div>
27    );
28};