feat(animation-sources): add content-driven guide system
This commit is contained in:
Poyraz
@@ -0,0 +1,404 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "poyraz-ui/molecules";
|
||||
import { ArticleToc } from "@/components/article-toc";
|
||||
import type { AnimationSource } from "@/data/animation-sources";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { slugifyMarkdownHeading } from "@/lib/markdown-headings";
|
||||
|
||||
type AnimationSourceDetailContentProps = {
|
||||
source: AnimationSource;
|
||||
};
|
||||
|
||||
function extractText(children: React.ReactNode): string {
|
||||
if (typeof children === "string" || typeof children === "number") {
|
||||
return String(children);
|
||||
}
|
||||
if (Array.isArray(children)) return children.map(extractText).join("");
|
||||
if (children && typeof children === "object" && "props" in children) {
|
||||
return extractText(
|
||||
(children as React.ReactElement<{ children?: React.ReactNode }>).props
|
||||
.children,
|
||||
);
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
async function copyToClipboard(value: string) {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(value);
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = value;
|
||||
textarea.setAttribute("readonly", "");
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.opacity = "0";
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand("copy");
|
||||
textarea.remove();
|
||||
}
|
||||
|
||||
function CopyableCodeBlock({
|
||||
code,
|
||||
language,
|
||||
}: {
|
||||
code: string;
|
||||
language: string;
|
||||
}) {
|
||||
const t = useTranslations("AnimationSources");
|
||||
const [copied, setCopied] = useState(false);
|
||||
const resetTimerRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (resetTimerRef.current !== null) {
|
||||
window.clearTimeout(resetTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await copyToClipboard(code);
|
||||
setCopied(true);
|
||||
if (resetTimerRef.current !== null) {
|
||||
window.clearTimeout(resetTimerRef.current);
|
||||
}
|
||||
resetTimerRef.current = window.setTimeout(() => setCopied(false), 1800);
|
||||
} catch {
|
||||
setCopied(false);
|
||||
}
|
||||
};
|
||||
|
||||
const displayLanguage = language || "text";
|
||||
const highlighterLanguage = language === "prompt" ? "text" : displayLanguage;
|
||||
|
||||
return (
|
||||
<Card className="my-4 overflow-hidden rounded-sm border-border">
|
||||
<div className="flex h-9 items-center justify-between border-b border-border bg-muted/40 px-3">
|
||||
<span className="text-[11px] font-medium uppercase text-muted-foreground">
|
||||
{displayLanguage}
|
||||
</span>
|
||||
<TooltipProvider delayDuration={150}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
|
||||
aria-label={copied ? t("copied") : t("copy")}
|
||||
>
|
||||
<Icon
|
||||
icon={copied ? "mdi:check" : "mdi:content-copy"}
|
||||
width={15}
|
||||
height={15}
|
||||
/>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
language={highlighterLanguage}
|
||||
style={oneDark}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
borderRadius: 0,
|
||||
fontSize: "13px",
|
||||
lineHeight: "1.65",
|
||||
}}
|
||||
wrapLongLines={false}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
|
||||
if (!src || !src.startsWith("/")) return null;
|
||||
|
||||
return (
|
||||
<Card className="my-4 overflow-hidden rounded-sm border-border">
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt ?? ""}
|
||||
width={1200}
|
||||
height={1200}
|
||||
unoptimized={src.toLowerCase().endsWith(".gif")}
|
||||
sizes="(max-width: 768px) 100vw, 720px"
|
||||
className="h-auto w-full object-contain"
|
||||
/>
|
||||
{alt ? (
|
||||
<Typography
|
||||
variant="small"
|
||||
className="block border-t border-border px-3 py-2 text-center text-muted-foreground"
|
||||
>
|
||||
{alt}
|
||||
</Typography>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function AnimationSourceDetailContent({
|
||||
source,
|
||||
}: AnimationSourceDetailContentProps) {
|
||||
const t = useTranslations("AnimationSources");
|
||||
const progressBarRef = useRef<HTMLDivElement>(null);
|
||||
const [tocOpen, setTocOpen] = useState(false);
|
||||
const closeToc = useCallback(() => setTocOpen(false), []);
|
||||
|
||||
useEffect(() => {
|
||||
let rafId = 0;
|
||||
|
||||
const update = () => {
|
||||
rafId = 0;
|
||||
const bar = progressBarRef.current;
|
||||
if (!bar) return;
|
||||
|
||||
const scrollableHeight =
|
||||
document.documentElement.scrollHeight -
|
||||
document.documentElement.clientHeight;
|
||||
const progress =
|
||||
scrollableHeight <= 0 ? 100 : (window.scrollY / scrollableHeight) * 100;
|
||||
bar.style.width = `${Math.min(100, Math.max(0, progress))}%`;
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
if (rafId !== 0) return;
|
||||
rafId = window.requestAnimationFrame(update);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
update();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
if (rafId !== 0) window.cancelAnimationFrame(rafId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed top-0 left-0 z-50 h-1 w-full bg-border/70">
|
||||
<div ref={progressBarRef} className="h-full w-0 bg-red-600" />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<div className="min-w-0 flex-1">
|
||||
<article className="space-y-6 rounded-sm border border-border p-5 md:p-8">
|
||||
<Link
|
||||
href="/animation-sources"
|
||||
className="inline-flex items-center gap-1.5 rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
<Icon icon="mdi:arrow-left" width={15} height={15} />
|
||||
{t("back")}
|
||||
</Link>
|
||||
|
||||
<header className="space-y-3 border-b border-border pb-5">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge className="rounded-sm">{source.platform}</Badge>
|
||||
{source.tools.map((tool) => (
|
||||
<Badge key={tool} variant="outline" className="rounded-sm">
|
||||
{tool}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<Typography variant="h2">{source.title}</Typography>
|
||||
<Typography variant="p" className="text-sm text-muted-foreground">
|
||||
{source.excerpt}
|
||||
</Typography>
|
||||
<Typography variant="small" className="block text-muted-foreground">
|
||||
{source.author} · {source.date}
|
||||
</Typography>
|
||||
</header>
|
||||
|
||||
<section className="min-w-0 space-y-5">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ children }) => (
|
||||
<Typography
|
||||
id={slugifyMarkdownHeading(extractText(children))}
|
||||
variant="h2"
|
||||
className="mt-10 mb-3 border-b border-border pb-3"
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<Typography
|
||||
id={slugifyMarkdownHeading(extractText(children))}
|
||||
variant="h3"
|
||||
className="mt-8 mb-2 scroll-mt-24 border-b border-border pb-2"
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<Typography
|
||||
id={slugifyMarkdownHeading(extractText(children))}
|
||||
variant="large"
|
||||
className="mt-6 mb-1 scroll-mt-24 text-foreground"
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
),
|
||||
p: ({ node, children }) => {
|
||||
const containsImage = node?.children.some(
|
||||
(child) =>
|
||||
child.type === "element" && child.tagName === "img",
|
||||
);
|
||||
|
||||
if (containsImage) {
|
||||
return <div className="my-4">{children}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Typography
|
||||
variant="p"
|
||||
className="text-sm leading-7 text-foreground/85"
|
||||
>
|
||||
{children}
|
||||
</Typography>
|
||||
);
|
||||
},
|
||||
ul: ({ children }) => (
|
||||
<ul className="my-3 list-disc space-y-1.5 pl-5 text-sm leading-7 text-foreground/85">
|
||||
{children}
|
||||
</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="my-3 list-decimal space-y-1.5 pl-5 text-sm leading-7 text-foreground/85">
|
||||
{children}
|
||||
</ol>
|
||||
),
|
||||
a: ({ href, children }) => (
|
||||
<a
|
||||
href={href}
|
||||
target={href?.startsWith("http") ? "_blank" : undefined}
|
||||
rel={href?.startsWith("http") ? "noopener noreferrer" : undefined}
|
||||
className="text-red-600 underline decoration-red-600/30 underline-offset-2 transition-colors hover:decoration-red-600"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<Card className="my-4 rounded-sm border-border border-l-red-600 bg-muted/30 px-4 py-3">
|
||||
<div className="text-sm text-muted-foreground">{children}</div>
|
||||
</Card>
|
||||
),
|
||||
hr: () => <div className="my-6 border-t border-border" />,
|
||||
table: ({ children }) => (
|
||||
<Card className="my-4 overflow-x-auto rounded-sm border-border">
|
||||
<table className="min-w-full border-collapse text-sm">
|
||||
{children}
|
||||
</table>
|
||||
</Card>
|
||||
),
|
||||
th: ({ children }) => (
|
||||
<th className="border-b border-border bg-muted/50 px-4 py-2.5 text-left text-xs font-semibold text-muted-foreground">
|
||||
{children}
|
||||
</th>
|
||||
),
|
||||
td: ({ children }) => (
|
||||
<td className="border-b border-border px-4 py-2.5 align-top text-sm">
|
||||
{children}
|
||||
</td>
|
||||
),
|
||||
img: ({ src, alt }) => (
|
||||
<MarkdownImage
|
||||
src={typeof src === "string" ? src : undefined}
|
||||
alt={typeof alt === "string" ? alt : undefined}
|
||||
/>
|
||||
),
|
||||
pre: ({ children }) => <>{children}</>,
|
||||
code: ({ className, children }) => {
|
||||
const match = /language-([\w-]+)/.exec(className ?? "");
|
||||
if (!match) {
|
||||
return (
|
||||
<code className="rounded-sm border border-border/60 bg-muted/60 px-1.5 py-0.5 text-[13px] text-red-600">
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CopyableCodeBlock
|
||||
language={match[1]}
|
||||
code={String(children).replace(/\n$/, "")}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{source.markdown}
|
||||
</ReactMarkdown>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<aside className="hidden w-52 shrink-0 lg:block">
|
||||
<div className="sticky top-24">
|
||||
<ArticleToc markdown={source.markdown} title={t("toc")} />
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTocOpen(true)}
|
||||
className="fixed right-4 bottom-6 z-40 flex h-11 w-11 cursor-pointer items-center justify-center rounded-full border border-border bg-background shadow-lg transition-transform hover:scale-105 active:scale-95 lg:hidden"
|
||||
aria-label={t("toc")}
|
||||
>
|
||||
<Icon icon="mdi:table-of-contents" width={22} height={22} className="text-red-600" />
|
||||
</button>
|
||||
|
||||
{tocOpen ? (
|
||||
<div className="fixed inset-0 z-50 lg:hidden" onClick={closeToc}>
|
||||
<div className="absolute inset-0 bg-black/40" />
|
||||
<div
|
||||
className="absolute right-0 bottom-0 left-0 max-h-[60vh] overflow-y-auto rounded-t-lg border-t border-border bg-background p-5 shadow-2xl"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<Typography variant="large">{t("toc")}</Typography>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closeToc}
|
||||
className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
aria-label={t("closeToc")}
|
||||
>
|
||||
<Icon icon="mdi:close" width={18} height={18} />
|
||||
</button>
|
||||
</div>
|
||||
<ArticleToc
|
||||
markdown={source.markdown}
|
||||
title={t("toc")}
|
||||
onNavigate={closeToc}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import Image from "next/image";
|
||||
import { Badge, Card, Typography } from "poyraz-ui/atoms";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import type { AnimationSource } from "@/data/animation-sources";
|
||||
|
||||
type AnimationSourcesContentProps = {
|
||||
sources: AnimationSource[];
|
||||
labels: {
|
||||
title: string;
|
||||
description: string;
|
||||
empty: string;
|
||||
itemCount: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function AnimationSourcesContent({
|
||||
sources,
|
||||
labels,
|
||||
}: AnimationSourcesContentProps) {
|
||||
return (
|
||||
<section className="space-y-5">
|
||||
<header className="border-b border-border pb-4">
|
||||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||||
<div className="max-w-2xl">
|
||||
<Typography variant="h2">{labels.title}</Typography>
|
||||
<Typography variant="p" className="mt-1 text-sm text-muted-foreground">
|
||||
{labels.description}
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography variant="small" className="text-muted-foreground">
|
||||
{labels.itemCount}
|
||||
</Typography>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{sources.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{sources.map((source) => (
|
||||
<Link
|
||||
key={`${source.lang}-${source.slug}`}
|
||||
href={`/animation-sources/${source.slug}`}
|
||||
data-animation-source-card
|
||||
className="group min-w-0"
|
||||
>
|
||||
<Card className="h-full overflow-hidden rounded-sm border-border p-0 transition-colors group-hover:border-red-600/60">
|
||||
<div className="relative aspect-square overflow-hidden bg-white">
|
||||
<Image
|
||||
src={source.coverImage}
|
||||
alt=""
|
||||
fill
|
||||
unoptimized={source.coverImage.toLowerCase().endsWith(".gif")}
|
||||
sizes="(max-width: 640px) 50vw, 280px"
|
||||
className="object-cover transition-transform duration-300 group-hover:scale-[1.02] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 border-t border-border p-3">
|
||||
<Badge variant="outline" className="rounded-sm">
|
||||
{source.platform}
|
||||
</Badge>
|
||||
<Typography
|
||||
variant="large"
|
||||
data-animation-source-title
|
||||
className="line-clamp-2 min-h-10 text-sm leading-5 sm:text-base"
|
||||
>
|
||||
{source.title}
|
||||
</Typography>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Card className="rounded-sm border-border p-6 text-center">
|
||||
<Typography variant="p" className="text-muted-foreground">
|
||||
{labels.empty}
|
||||
</Typography>
|
||||
</Card>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Typography } from "poyraz-ui/atoms";
|
||||
import { parseMarkdownHeadings } from "@/lib/markdown-headings";
|
||||
|
||||
type ArticleTocProps = {
|
||||
markdown: string;
|
||||
title: string;
|
||||
onNavigate?: () => void;
|
||||
};
|
||||
|
||||
export function ArticleToc({ markdown, title, onNavigate }: ArticleTocProps) {
|
||||
const headings = useMemo(() => parseMarkdownHeadings(markdown), [markdown]);
|
||||
const [activeId, setActiveId] = useState("");
|
||||
const rafRef = useRef(0);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(id: string) => {
|
||||
const target = document.getElementById(id);
|
||||
if (!target) return;
|
||||
|
||||
target.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
setActiveId(id);
|
||||
onNavigate?.();
|
||||
},
|
||||
[onNavigate],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (headings.length === 0) return;
|
||||
|
||||
const headingElements = headings
|
||||
.map((heading) => ({
|
||||
id: heading.id,
|
||||
element: document.getElementById(heading.id),
|
||||
}))
|
||||
.filter((item): item is { id: string; element: HTMLElement } =>
|
||||
Boolean(item.element),
|
||||
);
|
||||
|
||||
if (headingElements.length === 0) return;
|
||||
|
||||
const updateActive = () => {
|
||||
let current = headingElements[0].id;
|
||||
|
||||
for (const item of headingElements) {
|
||||
if (item.element.getBoundingClientRect().top <= 120) {
|
||||
current = item.id;
|
||||
continue;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
setActiveId(current);
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
() => {
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
rafRef.current = requestAnimationFrame(updateActive);
|
||||
},
|
||||
{
|
||||
rootMargin: "-120px 0px -65% 0px",
|
||||
threshold: [0, 1],
|
||||
},
|
||||
);
|
||||
|
||||
for (const item of headingElements) {
|
||||
observer.observe(item.element);
|
||||
}
|
||||
|
||||
const timer = window.setTimeout(updateActive, 200);
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
cancelAnimationFrame(rafRef.current);
|
||||
window.clearTimeout(timer);
|
||||
};
|
||||
}, [headings]);
|
||||
|
||||
if (headings.length < 2) return null;
|
||||
|
||||
return (
|
||||
<nav aria-label={title} className="space-y-1">
|
||||
<Typography variant="small" className="mb-2 font-semibold text-foreground">
|
||||
{title}
|
||||
</Typography>
|
||||
{headings.map((heading, index) => (
|
||||
<button
|
||||
key={`${heading.id}-${index}`}
|
||||
type="button"
|
||||
onClick={() => handleClick(heading.id)}
|
||||
className={[
|
||||
"block w-full cursor-pointer truncate border-l-2 text-left text-xs leading-relaxed transition-colors",
|
||||
heading.level === 3 ? "pl-5" : "pl-3",
|
||||
activeId === heading.id
|
||||
? "border-red-600 text-red-600"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground",
|
||||
].join(" ")}
|
||||
>
|
||||
{heading.text}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -60,6 +60,15 @@ function getNavLinkClass(isActive: boolean) {
|
||||
].join(" ");
|
||||
}
|
||||
|
||||
function getDesktopDropdownTriggerClass(isActive: boolean) {
|
||||
return [
|
||||
"relative inline-flex h-7 shrink-0 cursor-pointer items-center justify-center gap-1 whitespace-nowrap rounded-sm px-2.5 text-xs font-medium outline-none",
|
||||
"transition-[color,background-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]",
|
||||
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground",
|
||||
].join(" ");
|
||||
}
|
||||
|
||||
type ThemeToggleProps = {
|
||||
theme: ThemeMode;
|
||||
onThemeChange: (theme: ThemeMode) => void;
|
||||
@@ -237,13 +246,13 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={`${getNavLinkClass(
|
||||
className={getDesktopDropdownTriggerClass(
|
||||
group.items.some(
|
||||
(groupItem) =>
|
||||
!groupItem.external &&
|
||||
isActiveLink(groupItem.href.split("?")[0]),
|
||||
),
|
||||
)} h-9 cursor-pointer items-center gap-1 px-2.5`}
|
||||
)}
|
||||
>
|
||||
<span>{t(group.id)}</span>
|
||||
<Icon icon="mdi:chevron-down" width={14} height={14} />
|
||||
|
||||
Reference in New Issue
Block a user