feat: new header

src/components/Header.tsx

@@ -0,0 +1,107 @@
+import {
+  Autocomplete,
+  Burger,
+  Group,
+  Header,
+  createStyles,
+  rem,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconSearch } from "@tabler/icons-react";
+
+const useStyles = createStyles((theme) => ({
+  header: {
+    paddingLeft: theme.spacing.md,
+    paddingRight: theme.spacing.md,
+  },
+
+  inner: {
+    height: rem(56),
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+
+  links: {
+    [theme.fn.smallerThan("md")]: {
+      display: "none",
+    },
+  },
+
+  search: {
+    [theme.fn.smallerThan("xs")]: {
+      display: "none",
+    },
+  },
+
+  link: {
+    display: "block",
+    lineHeight: 1,
+    padding: `${rem(8)} ${rem(12)}`,
+    borderRadius: theme.radius.sm,
+    textDecoration: "none",
+    color:
+      theme.colorScheme === "dark"
+        ? theme.colors.dark[0]
+        : theme.colors.gray[7],
+    fontSize: theme.fontSizes.sm,
+    fontWeight: 500,
+
+    "&:hover": {
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors.dark[6]
+          : theme.colors.gray[0],
+    },
+  },
+}));
+
+interface HeaderSearchProps {
+  links: { link: string; label: string }[];
+}
+
+export default function HeaderSearch({ links }: HeaderSearchProps) {
+  const [opened, { toggle }] = useDisclosure(false);
+  const { classes } = useStyles();
+
+  const items = links.map((link) => (
+    <a
+      key={link.label}
+      href={link.link}
+      className={classes.link}
+      onClick={(event) => event.preventDefault()}
+    >
+      {link.label}
+    </a>
+  ));
+
+  return (
+    <Header height={56} className={classes.header} mb={120}>
+      <div className={classes.inner}>
+        <Group>
+          <Burger opened={opened} onClick={toggle} size="sm" />
+        </Group>
+
+        <Group>
+          <Group ml={50} spacing={5} className={classes.links}>
+            {items}
+          </Group>
+          <Autocomplete
+            className={classes.search}
+            placeholder="Search"
+            icon={<IconSearch size="1rem" stroke={1.5} />}
+            data={[
+              "React",
+              "Angular",
+              "Vue",
+              "Next.js",
+              "Riot.js",
+              "Svelte",
+              "Blitz.js",
+            ]}
+          />
+        </Group>
+      </div>
+    </Header>
+  );
+}

src/pages/index.page.tsx

@@ -1,10 +1,30 @@
+import Header from "@/components/Header";
 import { api } from "@/utils/api";
 import { Button } from "@mantine/core";
 import { type NextPage } from "next";
 import { signIn, signOut, useSession } from "next-auth/react";
 import Head from "next/head";
 import Link from "next/link";
 
+const Links = [
+  {
+    link: "/about",
+    label: "Features",
+  },
+  {
+    link: "/pricing",
+    label: "Pricing",
+  },
+  {
+    link: "/learn",
+    label: "Learn",
+  },
+  {
+    link: "/community",
+    label: "Community",
+  },
+];
+
 const Home: NextPage = () => {
   const hello = api.example.hello.useQuery({ text: "from useQuery" });
   return (
@@ -14,7 +34,8 @@ const Home: NextPage = () => {
         <meta name="description" content="Generated by create-t3-app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+      <Header links={Links}></Header>
+      <main className="justify-center">
         <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
           <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
             Create <span className="text-[hsl(280,100%,70%)]">T3</span> App