test logo

i'm clearly not a designer

src/app/layout.tsx

@@ -40,6 +40,12 @@ export const metadata: Metadata = {
 		locale: "fr_FR",
 		siteName: "Vahor",
 	},
+	icons: [
+		{ rel: "icon", url: "/favicon.ico" },
+		{ rel: "apple-touch-icon", url: "/apple-icon.png" },
+		{ rel: "icon", sizes: "192x192", url: "/android-chrome-192x192.png" },
+		{ rel: "icon", sizes: "512x512", url: "/android-chrome-512x512.png" },
+	],
 };
 
 export const viewport: Viewport = {

src/app/tag/[tag]/page.tsx

@@ -25,12 +25,12 @@ export default function TagPage({ params }: PageProps) {
 		.toSorted((a, b) => b.datePublished.localeCompare(a.datePublished));
 
 	return (
-		<div className="grid sm:grid-cols-4 gap-4 container">
-			<nav className="flex gap-2 flex-col col-span-4 sm:col-span-1 max-h-64 sm:max-h-none overflow-y-auto">
+		<div className="grid md:grid-cols-4 gap-4 container">
+			<nav className="flex gap-2 flex-col col-span-4 md:col-span-1 max-h-64 md:max-h-none overflow-y-auto">
 				{allTags.map((tag) => {
 					const active = tag === params.tag;
 					return (
-						<Link key={tag} href={`/tag/${tag}`} className="w-full sm:w-max ">
+						<Link key={tag} href={`/tag/${tag}`} className="w-full md:w-max ">
 							<Button
 								disabled={active}
 								className="capitalize w-full justify-start"
@@ -43,7 +43,7 @@ export default function TagPage({ params }: PageProps) {
 				})}
 			</nav>
 
-			<main className="col-span-4 sm:col-span-3 px-3">
+			<main className="col-span-4 md:col-span-3">
 				<h1 className="text-3xl font-semibold text-black dark:text-white capitalize">
 					{params.tag}
 				</h1>

src/components/header/header.tsx

@@ -1,12 +1,13 @@
 import { HEADER_LINKS } from "@/lib/constants";
 import Link from "next/link";
+import { Logo } from "./logo";
 import { SearchMenu } from "./search";
 import { ThemeSwitcher } from "./theme-switcher";
 
 export function Header() {
 	return (
-		<header className="py-4 sm:py-8 px-8 max-w-screen-xl mx-auto">
-			<div id="maybe-a-logo-one-day" />
+		<header className="py-4 sm:py-8 px-8 max-w-screen-xl mx-auto flex items-center justify-between">
+			<Logo />
 			<div className="flex justify-end gap-3 items-center">
 				<nav className="flex gap-6">
 					{HEADER_LINKS.map(({ label, href }) => (

src/components/header/logo.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import darkLogo from "../../../public/logo-dark.svg";
+import whiteLogo from "../../../public/logo-white.svg";
+
+export function Logo() {
+	const { resolvedTheme: theme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	return (
+		<Link href="/" className="flex items-center gap-2 cursor-pointer shrink-0">
+			<Image
+				src={mounted && theme === "dark" ? darkLogo : whiteLogo}
+				alt="Logo"
+				width={28}
+				className="transform hover:rotate-12 transition-transform -ml-2 w-[28px] h-[28px]"
+			/>
+			<span className="hidden sm:inline text-dark dark:text-white font-semibold text-lg">
+				Vahor
+			</span>
+		</Link>
+	);
+}

tailwind.config.ts

@@ -11,9 +11,6 @@ const config = {
 				DEFAULT: "1rem",
 				md: "4rem",
 			},
-			screens: {
-				"2xl": "1400px",
-			},
 		},
 		fontFamily: {
 			mono: ["var(--font-mono)"],