ballistic-builder/src/components/Header/index.tsx

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

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="#374151" _hover={{ textDecoration: "none" }}>
              Ballistic Builder
            </Link>
            {/*        </NextLink>  */}

          </Heading>
          <Flex as="nav" gap="6">
            {/*        <NextLink href="/builder" passHref> */}
            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
              Builder
            </Link>
            {/*           </NextLink> */}
            {/*           <NextLink href="/products" passHref> */}
            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
              Products
            </Link>
            {/*           </NextLink> */}
            {/*           <NextLink href="/auth/signin" passHref> */}
            <Link color="#374151" _hover={{ textDecoration: "underline" }}>
              Sign In
            </Link>
            {/*           </NextLink> */}
          </Flex>
        </Flex>
      </Box>
    </>
  );
};

export default Header;