Header and Nav shit

package.json

@@ -15,6 +15,7 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.1.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@tailwindcss/typography": "^0.5.12",
@@ -28,6 +29,7 @@
     "next-themes": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
     "zustand": "^4.5.2"

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   '@radix-ui/react-dialog':
     specifier: ^1.0.5
     version: 1.0.5(@types/react-dom@18.2.23)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-icons':
+    specifier: ^1.3.0
+    version: 1.3.0(react@18.2.0)
   '@radix-ui/react-separator':
     specifier: ^1.0.3
     version: 1.0.3(@types/react-dom@18.2.23)(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0)
@@ -56,6 +59,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-icons:
+    specifier: ^5.0.1
+    version: 5.0.1(react@18.2.0)
   tailwind-merge:
     specifier: ^2.2.2
     version: 2.2.2
@@ -526,6 +532,14 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-icons@1.3.0(react@18.2.0):
+    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-id@1.0.1(@types/react@18.2.73)(react@18.2.0):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -3598,6 +3612,14 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-icons@5.0.1(react@18.2.0):
+    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true

src/components/layout/header.tsx

@@ -1,26 +1,51 @@
-import Logo from "@/components/logo";
 import { Separator } from "@/components/ui/separator";
 import Nav from "./nav";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
-
+import NavLinks from "../navlinks";
-import fonts from "@/components/fonts";
+import { Button } from "../ui/button";
 
 const Header = () => (
   <header className="w-full flex flex-col justify-center items-center">
     <div className="py-2 px-4 md:px-8 flex flex-row justify-between w-full max-w-screen-2xl">
+      <div className="flex flex-row items-center">
         <Link
           href="/"
           className="flex flex-row items-center gap-x-2 hover:opacity-80 transition-opacity"
         >
-        <Logo className="h-6 w-6" />
+          {/* <Logo className="h-6 w-6" /> */}
           <span
-          className={cn("text-2xl hidden md:inline-block", fonts.mono.className)}
+            className={cn(
+              "text-2xl",
+              // fonts.mono.className,
+            )}
           >
-          wych.dev
+            Wych
           </span>
         </Link>
+      </div>
+      <div className="flex flex-row items-center space-x-2">
         <Nav />
+        <ul className="flex flex-row space-x-2 w-fit h-full items-center">
+          {NavLinks.map((link) => (
+            <li>
+              <Link
+                href={link.href}
+                target={link.href.match("http") ? "_blank" : "_self"}
+                className="flex flex-row items-center"
+              >
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="transition-opacity hover:bg-transparent hover:opacity-75"
+                >
+                  {link.icon}
+                </Button>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
     <Separator />
   </header>

src/components/navlinks.tsx

@@ -0,0 +1,30 @@
+import { GitHubLogoIcon as GitHub, LinkedInLogoIcon } from "@radix-ui/react-icons";
+import { FaXTwitter } from "react-icons/fa6";
+
+type NavLink = {
+  label: string;
+  icon: React.ReactNode;
+  href: string;
+};
+
+const IconClassname = "w-5 h-5";
+
+const NavLinks: NavLink[] = [
+  {
+    label: "GitHub",
+    href: "https://github.com/almqv",
+    icon: <GitHub className={IconClassname} />,
+  },
+  {
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/in/almqv/",
+    icon: <LinkedInLogoIcon className={IconClassname} />,
+  },
+  {
+    label: "X",
+    href: "https://x.com/fcvprzhfgsybj",
+    icon: <FaXTwitter className={IconClassname} />,
+  },
+];
+
+export default NavLinks;