feat: add LinksPage and LinksContent components for link management

app/links/page.tsx

@@ -0,0 +1,5 @@
+import { LinksContent } from "@/components/links-content";
+
+export default function LinksPage() {
+  return <LinksContent />;
+}

components/links-content.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Typography,
+} from "poyraz-ui/atoms";
+import { Tabs, TabsList, TabsTrigger } from "poyraz-ui/molecules";
+import {
+  LINK_DIRECTORY,
+  LINK_DIRECTORY_CATEGORIES,
+  type LinkDirectoryCategory,
+} from "@/lib/links";
+
+type CategoryFilter = "all" | LinkDirectoryCategory;
+
+const FILTER_ITEMS: ReadonlyArray<{ id: CategoryFilter; label: string }> = [
+  { id: "all", label: "Tümü" },
+  ...LINK_DIRECTORY_CATEGORIES,
+];
+
+function normalize(value: string) {
+  return value
+    .toLocaleLowerCase("tr-TR")
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+}
+
+function getCategoryLabel(category: LinkDirectoryCategory) {
+  return LINK_DIRECTORY_CATEGORIES.find((item) => item.id === category)?.label ?? "Kategori";
+}
+
+export function LinksContent() {
+  const [activeCategory, setActiveCategory] = useState<CategoryFilter>("all");
+  const [query, setQuery] = useState("");
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  const filteredLinks = useMemo(() => {
+    const normalizedQuery = normalize(query.trim());
+    const queryTokens = normalizedQuery.split(/\s+/).filter(Boolean);
+
+    return LINK_DIRECTORY.filter((item) => {
+      const categoryMatch = activeCategory === "all" || item.category === activeCategory;
+      if (!categoryMatch) return false;
+      if (queryTokens.length === 0) return true;
+
+      const haystack = normalize([
+        item.label,
+        item.href,
+        ...item.keywords,
+        getCategoryLabel(item.category),
+      ].join(" "));
+
+      return queryTokens.every((token) => haystack.includes(token));
+    });
+  }, [activeCategory, query]);
+
+  const handleCopy = async (id: string, href: string) => {
+    try {
+      await navigator.clipboard.writeText(href);
+      setCopiedId(id);
+      setTimeout(() => {
+        setCopiedId((current) => (current === id ? null : current));
+      }, 1400);
+    } catch {
+      setCopiedId(null);
+    }
+  };
+
+  return (
+    <section className="flex h-full flex-col gap-3 overflow-y-auto">
+      <Card className="rounded-sm border-border p-4">
+        <CardHeader className="space-y-1 p-0">
+          <CardTitle className="text-xl">Link Merkezi</CardTitle>
+          <CardDescription>
+            Tüm sosyal medya, sayfa ve kaynak linklerini tek yerden ara, filtrele ve yönet.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="mt-4 space-y-3 p-0">
+          <div className="grid gap-2 sm:grid-cols-[1fr_auto]">
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Linklerde ara... (örn: github, medium, /blog)"
+              aria-label="Linklerde arama"
+            />
+            <Badge variant="outline" className="inline-flex h-10 items-center px-3">
+              {filteredLinks.length} / {LINK_DIRECTORY.length} sonuç
+            </Badge>
+          </div>
+
+          <Tabs
+            value={activeCategory}
+            onValueChange={(value) => setActiveCategory(value as CategoryFilter)}
+          >
+            <TabsList className="grid w-full grid-cols-2 sm:grid-cols-4">
+              {FILTER_ITEMS.map((item) => (
+                <TabsTrigger key={item.id} value={item.id}>
+                  {item.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {filteredLinks.length === 0 ? (
+        <Card className="rounded-sm border-border p-5">
+          <Typography variant="small" className="text-muted-foreground">
+            Arama kriterine uygun link bulunamadı.
+          </Typography>
+        </Card>
+      ) : (
+        <div className="grid gap-2 md:grid-cols-2">
+          {filteredLinks.map((item) => (
+            <Card
+              key={`${item.category}-${item.id}`}
+              className="rounded-sm border-border p-3 transition-colors hover:border-zinc-700"
+            >
+              <CardHeader className="flex-row items-start justify-between gap-3 space-y-0 p-0">
+                <div className="flex min-w-0 items-start gap-2">
+                  <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-sm border border-border text-muted-foreground">
+                    <Icon icon={item.icon} width={18} height={18} />
+                  </span>
+                  <div className="min-w-0">
+                    <CardTitle className="truncate text-base">{item.label}</CardTitle>
+                    <CardDescription className="truncate text-xs">{item.href}</CardDescription>
+                  </div>
+                </div>
+                <Badge variant="outline">{getCategoryLabel(item.category)}</Badge>
+              </CardHeader>
+
+              <CardContent className="mt-3 flex items-center gap-2 p-0">
+                <Button asChild size="sm">
+                  <Link
+                    href={item.href}
+                    target={item.external ? "_blank" : undefined}
+                    rel={item.external ? "noreferrer" : undefined}
+                  >
+                    Aç
+                  </Link>
+                </Button>
+
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleCopy(item.id, item.href)}
+                >
+                  {copiedId === item.id ? "Kopyalandı" : "Kopyala"}
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}

components/site-navbar.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { Icon } from "@iconify/react";
 import Link from "next/link";
@@ -20,38 +20,7 @@ import {
 } from "poyraz-ui/molecules";
 import { SearchCommand } from "@/components/search-command";
 import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
-import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
+import { NAV_LINKS, SOCIAL_LINKS, TOP_ICON_LINKS } from "@/lib/links";
-
-const TOP_ICON_LINKS = [
-  {
-    id: "ui-kit",
-    label: "UI Kit",
-    href: "https://ui.poyrazavsever.com",
-    icon: "mdi:palette-swatch-outline",
-    external: true,
-  },
-  {
-    id: "52-weeks-js",
-    label: "52 Weeks of JS",
-    href: "https://js.poyrazavsever.com",
-    icon: "mdi:code-json",
-    external: true,
-  },
-  {
-    id: "rss",
-    label: "RSS",
-    href: "/rss.xml",
-    icon: "mdi:rss",
-    external: false,
-  },
-  {
-    id: "cv",
-    label: "Özgeçmiş",
-    href: "/resume.pdf",
-    icon: "mdi:file-account-outline",
-    external: false,
-  },
-] as const;
 
 function getNavLinkClass(isActive: boolean) {
   return [
@@ -121,7 +90,7 @@ export function SiteNavbar() {
             type="button"
             onClick={() => setSearchOpen(true)}
             className="inline-flex h-8 w-44 cursor-pointer items-center justify-between rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground sm:w-52"
-            aria-label="Komut paletini aç"
+            aria-label="Komut paletini aç"
           >
             <span className="inline-flex items-center gap-2">
               <Icon icon="mdi:magnify" width={16} height={16} />
@@ -136,7 +105,7 @@ export function SiteNavbar() {
               <span>Sosyal</span>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-52 rounded-sm">
-              <DropdownMenuLabel>Sosyal Bağlantılar</DropdownMenuLabel>
+              <DropdownMenuLabel>Sosyal Bağlantılar</DropdownMenuLabel>
               <DropdownMenuSeparator />
               {SOCIAL_LINKS.map((item) => (
                 <DropdownMenuItem key={item.id} asChild>
@@ -159,17 +128,17 @@ export function SiteNavbar() {
           <Sheet>
             <SheetTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
               <Icon icon="mdi:menu" width={18} height={18} />
-              <span>Menü</span>
+              <span>Menü</span>
             </SheetTrigger>
             <SheetContent side="right" className="w-72 p-4">
-              <SheetTitle className="sr-only">Mobil Menü</SheetTitle>
+              <SheetTitle className="sr-only">Mobil Menü</SheetTitle>
               <div className="flex flex-col gap-4">
                 <SheetClose asChild>
                   <button
                     type="button"
                     onClick={() => setSearchOpen(true)}
                     className="inline-flex h-9 w-full cursor-pointer items-center justify-between rounded-sm border border-border px-3 text-sm text-muted-foreground transition-colors hover:text-foreground"
-                    aria-label="Komut paletini aç"
+                    aria-label="Komut paletini aç"
                   >
                     <span className="inline-flex items-center gap-2">
                       <Icon icon="mdi:magnify" width={16} height={16} />
@@ -224,3 +193,4 @@ export function SiteNavbar() {
     </div>
   );
 }
+

lib/links.ts

@@ -68,3 +68,85 @@ export const SOCIAL_LINKS = [
     icon: "mdi:coffee",
   },
 ] as const;
+
+export const TOP_ICON_LINKS = [
+  {
+    id: "ui-kit",
+    label: "UI Kit",
+    href: "https://ui.poyrazavsever.com",
+    icon: "mdi:palette-swatch-outline",
+    external: true,
+  },
+  {
+    id: "52-weeks-js",
+    label: "52 Weeks of JS",
+    href: "https://js.poyrazavsever.com",
+    icon: "mdi:code-json",
+    external: true,
+  },
+  {
+    id: "rss",
+    label: "RSS",
+    href: "/rss.xml",
+    icon: "mdi:rss",
+    external: false,
+  },
+  {
+    id: "cv",
+    label: "Özgeçmiş",
+    href: "/resume.pdf",
+    icon: "mdi:file-account-outline",
+    external: false,
+  },
+] as const;
+
+export type LinkDirectoryCategory = "navigation" | "social" | "resources";
+
+export type LinkDirectoryItem = {
+  id: string;
+  label: string;
+  href: string;
+  icon: string;
+  external: boolean;
+  category: LinkDirectoryCategory;
+  keywords: string[];
+};
+
+export const LINK_DIRECTORY_CATEGORIES: ReadonlyArray<{
+  id: LinkDirectoryCategory;
+  label: string;
+}> = [
+  { id: "navigation", label: "Sayfalar" },
+  { id: "social", label: "Sosyal" },
+  { id: "resources", label: "Kaynaklar" },
+];
+
+export const LINK_DIRECTORY: LinkDirectoryItem[] = [
+  ...NAV_LINKS.map((item) => ({
+    id: item.id,
+    label: item.label,
+    href: item.href,
+    icon: "mdi:compass-outline",
+    external: false,
+    category: "navigation" as const,
+    keywords: [item.label, item.href, "sayfa", "navigasyon", "internal"],
+  })),
+  ...SOCIAL_LINKS.map((item) => ({
+    id: item.id,
+    label: item.label,
+    href: item.href,
+    icon: item.icon,
+    external: true,
+    category: "social" as const,
+    keywords: [item.label, item.href, "sosyal", "profile", "platform"],
+  })),
+  ...TOP_ICON_LINKS.map((item) => ({
+    id: item.id,
+    label: item.label,
+    href: item.href,
+    icon: item.icon,
+    external: item.external,
+    category: "resources" as const,
+    keywords: [item.label, item.href, "kaynak", "resource", "quick"],
+  })),
+];