Refactor root admin dashboard UI

components/root/portfolio-subnav.tsx

@@ -1,5 +1,7 @@
 import Link from "next/link";
 
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 type PortfolioSubnavProps = {
@@ -9,38 +11,40 @@ type PortfolioSubnavProps = {
 const items = [
   {
     key: "overview",
-    label: "Overview",
+    label: "Uebersicht",
     href: "/root/portfolio",
   },
   {
     key: "categories",
-    label: "Categories",
+    label: "Kategorien",
     href: "/root/portfolio/categories",
   },
   {
     key: "projects",
-    label: "Projects",
+    label: "Projekte",
     href: "/root/portfolio/projects",
   },
 ] as const;
 
 export function PortfolioSubnav({ active }: PortfolioSubnavProps) {
   return (
-    <div className="flex flex-wrap gap-2">
-      {items.map((item) => (
-        <Link
-          key={item.key}
-          href={item.href}
-          className={cn(
-            "rounded-pill border px-4 py-2 text-sm transition-colors",
-            active === item.key
-              ? "border-border-strong bg-foreground text-background"
-              : "border-border bg-background text-foreground/75 hover:border-border-strong hover:text-foreground",
-          )}
-        >
-          {item.label}
-        </Link>
-      ))}
-    </div>
+    <AppCard level={2}>
+      <CardContent className="flex flex-wrap gap-2 p-4">
+        {items.map((item) => (
+          <Link
+            key={item.key}
+            href={item.href}
+            className={cn(
+              "rounded-pill border px-4 py-2 text-sm transition-colors",
+              active === item.key
+                ? "border-border-strong bg-foreground text-background"
+                : "border-border bg-background text-foreground/75 hover:border-border-strong hover:text-foreground",
+            )}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </CardContent>
+    </AppCard>
   );
 }