Added Go logo

client/components/layout/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { AppShell } from "@mantine/core";
 import LayoutNavbar from "./layout-navbar";
-import LayoutHeader from "./layout-navbar";
+import LayoutHeader from "./layout-header";
 
 type LayoutProps = {
   children: React.ReactNode;

client/components/layout/layout-header/index.tsx

@@ -0,0 +1,11 @@
+import { Header, Text } from "@mantine/core";
+import Image from "next/image";
+const LayoutHeader: React.FC = () => {
+  return (
+    <Header height={60} p="xs">
+      <Image src="/go.svg" alt="go logo" width="48" height="48" />
+    </Header>
+  );
+};
+
+export default LayoutHeader;

client/components/layout/layout-navbar/index.tsx

@@ -1,51 +1,12 @@
-import {
-  Group,
-  Navbar,
-  ScrollArea,
-  Text,
-  ThemeIcon,
-  UnstyledButton,
-} from "@mantine/core";
-
-const NavbarAction = () => {
-  return (
-    <UnstyledButton
-      sx={(theme) => ({
-        display: "block",
-        width: "100%",
-        padding: theme.spacing.xs,
-        borderRadius: theme.radius.sm,
-        color:
-          theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
-
-        "&:hover": {
-          backgroundColor:
-            theme.colorScheme === "dark"
-              ? theme.colors.dark[6]
-              : theme.colors.gray[0],
-        },
-      })}
-    >
-      <Group>
-        <ThemeIcon color={color} variant="light">
-          {icon}
-        </ThemeIcon>
-
-        <Text size="sm">{label}</Text>
-      </Group>
-    </UnstyledButton>
-  );
-};
+import { Navbar, ScrollArea } from "@mantine/core";
+import NavbarActions from "./navbar-actions";
 
 const LayoutNavbar: React.FC = () => {
   return (
     <Navbar width={{ base: 300 }} p="xs">
-      <Navbar.Section
-        grow
-        component={ScrollArea}
-        mx="-x"
-        px="xs"
-      ></Navbar.Section>
+      <Navbar.Section grow component={ScrollArea} mx="-x" px="xs">
+        <NavbarActions />
+      </Navbar.Section>
     </Navbar>
   );
 };

client/components/layout/layout-navbar/navbar-actions.tsx

@@ -4,11 +4,13 @@ import {
   ThemeIcon,
   Text,
   MantineTheme,
+  DefaultMantineColor,
 } from "@mantine/core";
+import { Heart } from "tabler-icons-react";
 
 interface NavbarActionProps {
   icon: React.ReactNode;
-  color: string;
+  color: DefaultMantineColor;
   label: string;
 }
 
@@ -38,3 +40,16 @@ const NavbarAction: React.FC<NavbarActionProps> = ({ color, icon, label }) => {
     </UnstyledButton>
   );
 };
+
+const actionsList: NavbarActionProps[] = [
+  { icon: <Heart size={16} />, color: "pink", label: "Watchlist" },
+];
+
+const NavbarActions: React.FC = () => {
+  const actions = actionsList.map((action) => (
+    <NavbarAction {...action} key={action.label} />
+  ));
+  return <>{actions}</>;
+};
+
+export default NavbarActions;