Nav Header initial

packages/frontend/components/common/Avatar.tsx

@@ -0,0 +1,5 @@
+import { Avatar as MantineAvatar } from "@mantine/core";
+
+export function Avatar({ src }: { src: string }) {
+  return <MantineAvatar radius="lg" src={src} />;
+}

packages/frontend/components/common/Button.tsx

@@ -0,0 +1,16 @@
+import { Button as MantineButton } from "@mantine/core";
+import { ReactNode } from "react";
+
+export function Button({
+  children,
+  icon,
+}: {
+  children: ReactNode;
+  icon: ReactNode;
+}) {
+  return (
+    <MantineButton radius="lg" rightIcon={icon}>
+      {children}
+    </MantineButton>
+  );
+}

packages/frontend/components/common/TextInput.tsx

@@ -0,0 +1,38 @@
+import { TextInput as MantineTextInput } from "@mantine/core";
+import { createStyles, MantineSize } from "@mantine/styles";
+import { ReactNode } from "react";
+
+const useStyles = createStyles(() => ({
+  input: {
+    backgroundColor: "var(--colors-bg-lighter)",
+    color: "var(--colors-text)",
+    fontWeight: 500,
+    fontSize: "0.9rem",
+    "::placeholder": {
+      color: "var(--colors-text-lighter)",
+    },
+  },
+}));
+
+export function TextInput({
+  placeholder,
+  icon,
+  size,
+}: {
+  placeholder: string;
+  icon?: ReactNode;
+  size?: MantineSize;
+}) {
+  const { classes } = useStyles();
+  return (
+    <MantineTextInput
+      placeholder={placeholder}
+      rightSection={icon}
+      size={size}
+      radius="lg"
+      classNames={{
+        input: classes.input,
+      }}
+    />
+  );
+}

packages/frontend/components/layout.tsx

@@ -1,28 +1,58 @@
 import styled from "@emotion/styled";
 import { ReactNode } from "react";
+import { HiChevronDown, HiSearch } from "react-icons/hi";
+import { TextInput } from "./common/TextInput";
+import NextImage from "next/image";
+import logo from "../assets/img/logo.png";
+import { Avatar } from "./common/Avatar";
+import { Button } from "./common/Button";
 
-const _Button = styled.button`
-  padding: 32px;
-  background-color: hotpink;
-  font-size: 24px;
-  border-radius: 4px;
-  color: black;
-  font-weight: bold;
-  &:hover {
-    color: white;
+const _Header = styled.header`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  padding: 1rem;
+
+  & > :first-child {
+    justify-self: flex-start;
+  }
+
+  & > :last-child {
+    justify-self: flex-end;
   }
 `;
 
-const Container = styled.div`
-  background-color: var(--bg);
+const _RightContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+`;
+
+const _LogoContainer = styled.div`
+  background-color: var(--colors-bg-lighter);
+  display: grid;
+  place-items: center;
+  padding: 0.25rem;
+  border-radius: 16px;
 `;
 
 export function Layout({ children }: { children: ReactNode }) {
   return (
-    <Container>
-      <header className="font-bold p-4">sendou.ink</header>
-      <_Button>hello</_Button>
+    <>
+      <_Header>
+        <_LogoContainer>
+          <NextImage src={logo} width={30} height={30} />
+        </_LogoContainer>
+        <TextInput
+          placeholder="Search for anything"
+          icon={<HiSearch />}
+          size="md"
+        />
+        <_RightContainer>
+          <Button icon={<HiChevronDown />}>Create new...</Button>
+          <Avatar src="https://cdn.discordapp.com/avatars/79237403620945920/fcfd65a3bea598905abb9ca25296816b.png?size=80" />
+        </_RightContainer>
+      </_Header>
       <main>{children}</main>
-    </Container>
+    </>
   );
 }

packages/frontend/package-lock.json

@@ -13,6 +13,7 @@
         "next": "^11.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "swr": "^1.0.1"
       },
       "devDependencies": {
@@ -3583,6 +3584,14 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -7090,6 +7099,12 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

packages/frontend/package.json

@@ -14,6 +14,7 @@
     "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "swr": "^1.0.1"
   },
   "devDependencies": {

packages/frontend/pages/_app.css

@@ -1,6 +1,8 @@
 :root {
-  --colors-bg: #2d306f;
-  --colors-text: rgba(255, 255, 255, 0.85);
+  --colors-bg: hsl(237.3, 42.3%, 30.6%);
+  --colors-bg-lighter: hsl(237.3, 42.3%, 35.6%);
+  --colors-text: rgba(255, 255, 255, 0.95);
+  --colors-text-lighter: rgba(255, 255, 255, 0.55);
 }
 
 *,

packages/frontend/pages/_app.tsx

@@ -22,6 +22,7 @@ export default function App(props: AppProps) {
       <MantineProvider
         theme={{
           colorScheme: "dark",
+          primaryColor: "violet",
         }}
       >
         <NormalizeCSS />