Changes

Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>

src/components/mika/Logo.tsx

@@ -0,0 +1,19 @@
+import { Link } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+
+export function Logo({ className, size = "md" }: { className?: string; size?: "sm" | "md" | "lg" }) {
+  const sizes = {
+    sm: "text-xl",
+    md: "text-2xl",
+    lg: "text-3xl",
+  };
+  return (
+    <Link
+      to="/"
+      aria-label="Mika — página inicial"
+      className={cn("font-bold tracking-tight text-foreground", sizes[size], className)}
+    >
+      Mika<span className="text-accent">.</span>
+    </Link>
+  );
+}

src/components/mika/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/components/theme-provider";
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={theme === "dark" ? "Mudar para tema claro" : "Mudar para tema escuro"}
+      onClick={toggleTheme}
+      className="rounded-lg"
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+}