first commit

src/components/Avatar.tsx

@@ -0,0 +1,27 @@
+import clsx from "clsx";
+import Image from "next/image";
+
+interface AvatarProps {
+  label: string;
+  url: string;
+  className: string;
+}
+
+export default function Avatar({
+  label = "Avatar",
+  url,
+  className,
+}: AvatarProps) {
+  return (
+    <>
+      <Image
+        className={clsx("rounded-full", className)}
+        alt={label}
+        src={url}
+        width={150}
+        height={150}
+        priority
+      />
+    </>
+  );
+}

src/components/Button.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+
+interface ButtonProps {
+  text: string;
+  url: string;
+  icon?: JSX.Element;
+  className?: string;
+}
+
+export default function Button({ text, url, icon, className }: ButtonProps) {
+  return (
+    <a href={url}>
+      <p
+        className={clsx(
+          "font-md flex w-fit transform-gpu flex-row items-center gap-1 rounded-md bg-blue-500 p-1 pl-2 pr-2 transition-all hover:opacity-80",
+          className,
+        )}
+      >
+        {icon}
+        {text}
+      </p>
+    </a>
+  );
+}

src/components/Container.tsx

@@ -0,0 +1,12 @@
+import Navbar from "./Navbar";
+
+export default function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div className="md:max-w-[1200px] m-auto flex flex-col items-center justify-center">
+        <Navbar></Navbar>
+        {children}
+      </div>
+    </>
+  );
+}

src/components/Navbar.tsx

@@ -0,0 +1,73 @@
+import {
+  CogIcon,
+  MagnifyingGlassIcon,
+  UserIcon,
+} from "@heroicons/react/20/solid";
+import { GlobeAltIcon } from "@heroicons/react/24/outline";
+import Button from "./Button";
+
+interface ButtonProps {
+  text: string;
+  icon?: JSX.Element;
+  href?: string;
+  children?: React.ReactNode;
+}
+
+function NavbarButton({ text, icon, href, children }: ButtonProps) {
+  return (
+    <div className="group">
+      <a
+        className="flex w-fit transform-gpu items-center justify-center gap-1 rounded-sm p-3 transition-all hover:cursor-pointer hover:bg-blue-500"
+        href={href}
+      >
+        <>
+          {icon}
+          <p className="hidden xs:block">{text}</p>
+        </>
+      </a>
+
+      {children && (
+        <div className="absolute z-20 hidden divide-y rounded-sm bg-neutral-600 shadow-sm group-hover:flex">
+          <div className="p-2">{children}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function Navbar() {
+  return (
+    <>
+      <div className="flex h-fit w-full rounded-sm bg-neutral-800">
+        <NavbarButton text="Friends" icon={<UserIcon height={20} width={20} />}>
+          <p className="text-sm font-bold">No friends, add someone!</p>
+
+          <Button
+            className="mt-2"
+            text="Search"
+            url="/search"
+            icon={<MagnifyingGlassIcon height={20} width={20} />}
+          />
+        </NavbarButton>
+        <NavbarButton
+          text="Ranking"
+          icon={<GlobeAltIcon height={20} width={20} />}
+          href="/ranking/global"
+        />
+
+        <div className="m-auto" />
+
+        <NavbarButton
+          text="Search"
+          icon={<MagnifyingGlassIcon height={20} width={20} />}
+          href="/search"
+        />
+        <NavbarButton
+          text="Settings"
+          icon={<CogIcon height={20} width={20} />}
+          href="/settings"
+        />
+      </div>
+    </>
+  );
+}