feat: add LinksPage and LinksContent components for link management
This commit is contained in:
Poyraz Avsever
@@ -0,0 +1,5 @@
|
||||
import { LinksContent } from "@/components/links-content";
|
||||
|
||||
export default function LinksPage() {
|
||||
return <LinksContent />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
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;
|
||||
import { NAV_LINKS, SOCIAL_LINKS, TOP_ICON_LINKS } from "@/lib/links";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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"],
|
||||
})),
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user