ballistic-builder/src/components/Header/index.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">

            <Link color="#374151" _hover={{ textDecoration: "none" }}>
              <NextLink href="/" passHref> Ballistic Builder </NextLink>
            </Link>


          </Heading>
          <Flex as="nav" gap="6">

            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
              <NextLink href="/builder" passHref> Builder </NextLink>
            </Link>


            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
              <NextLink href="/products" passHref>  Products </NextLink>
            </Link>

            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
              <NextLink href="/auth/signin" passHref> Sign In </NextLink>
            </Link>

          </Flex>
        </Flex>
      </Box>
    </>
  );
};

export default Header;