79 lines
3.3 KiB
JavaScript
79 lines
3.3 KiB
JavaScript
|
"use client";
|
||
|
|
|
||
|
|
import { useParams, notFound } from "next/navigation";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { Card } from "@/shared/components";
|
||
|
|
import ProviderIcon from "@/shared/components/ProviderIcon";
|
||
|
|
import { MEDIA_PROVIDER_KINDS, AI_PROVIDERS, getProvidersByKind } from "@/shared/constants/providers";
|
||
|
|
import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
|
||
|
|
|
||
|
|
export default function MediaProviderKindPage() {
|
||
|
|
const { kind } = useParams();
|
||
|
|
const { copied, copy } = useCopyToClipboard();
|
||
|
|
|
||
|
|
const kindConfig = MEDIA_PROVIDER_KINDS.find((k) => k.id === kind);
|
||
|
|
if (!kindConfig) return notFound();
|
||
|
|
|
||
|
|
const providers = getProvidersByKind(kind);
|
||
|
|
const endpointText = `${kindConfig.endpoint.method} ${kindConfig.endpoint.path}`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col gap-6">
|
||
|
|
{/* Endpoint block */}
|
||
|
|
<Card padding="sm">
|
||
|
|
<p className="text-xs text-text-muted uppercase tracking-wider mb-2 font-semibold">Endpoint</p>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<span className="text-xs font-bold text-primary bg-primary/10 px-2 py-0.5 rounded">
|
||
|
|
{kindConfig.endpoint.method}
|
||
|
|
</span>
|
||
|
|
<code className="text-sm font-mono text-text-main flex-1">{kindConfig.endpoint.path}</code>
|
||
|
|
<button
|
||
|
|
onClick={() => copy(endpointText)}
|
||
|
|
className="text-text-muted hover:text-text-main transition-colors"
|
||
|
|
title="Copy endpoint"
|
||
|
|
>
|
||
|
|
<span className="material-symbols-outlined text-[18px]">
|
||
|
|
{copied ? "check" : "content_copy"}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Provider list */}
|
||
|
|
{providers.length === 0 ? (
|
||
|
|
<div className="text-center py-12 border border-dashed border-border rounded-xl text-text-muted text-sm">
|
||
|
|
No providers support <strong>{kindConfig.label}</strong> yet.
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||
|
|
{providers.map((provider) => (
|
||
|
|
<Link key={provider.id} href={`/dashboard/media-providers/${kind}/${provider.id}`}>
|
||
|
|
<Card padding="xs" className="h-full hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div
|
||
|
|
className="size-8 rounded-lg flex items-center justify-center shrink-0"
|
||
|
|
style={{ backgroundColor: `${provider.color?.length > 7 ? provider.color : (provider.color ?? "#888") + "15"}` }}
|
||
|
|
>
|
||
|
|
<ProviderIcon
|
||
|
|
src={`/providers/${provider.id}.png`}
|
||
|
|
alt={provider.name}
|
||
|
|
size={30}
|
||
|
|
className="object-contain rounded-lg max-w-[30px] max-h-[30px]"
|
||
|
|
fallbackText={provider.textIcon || provider.id.slice(0, 2).toUpperCase()}
|
||
|
|
fallbackColor={provider.color}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="font-semibold text-sm">{provider.name}</p>
|
||
|
|
<p className="text-xs text-text-muted">{(provider.serviceKinds ?? ["llm"]).join(", ")}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|