feat: add LinksPage and LinksContent components for link management

2026-03-16 09:49:15 +03:00
parent c78d656240
commit bb2ddfdb45
4 changed files with 264 additions and 38 deletions
@@ -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>
+  );
+}