ballistic-builder/app/components/Header.tsx

import { Box, Flex, Link, Heading } from "@chakra-ui/react";
import NextLink from "next/link";

const Header: React.FC = () => {
  return (
    <Box as="header" bg="primary" color="white" px="6" py="4" shadow="md">
      <Flex justify="space-between" align="center" maxW="5xl" mx="auto">
        <Heading as="h1" size="lg">
          <NextLink href="/" passHref>
            <Link color="white" _hover={{ textDecoration: "none" }}>
              Ballistic Builder
            </Link>
          </NextLink>
        </Heading>
        <Flex as="nav" gap="6">
          <NextLink href="/builder" passHref>
            <Link color="white" _hover={{ textDecoration: "underline" }}>
              Builder
            </Link>
          </NextLink>
          <NextLink href="/products" passHref>
            <Link color="white" _hover={{ textDecoration: "underline" }}>
              Products
            </Link>
          </NextLink>
          <NextLink href="/auth/signin" passHref>
            <Link color="white" _hover={{ textDecoration: "underline" }}>
              Sign In
            </Link>
          </NextLink>
        </Flex>
      </Flex>
    </Box>
  );
};

export default Header;