@promptbook/cli 0.103.0-8 → 0.103.0

package/apps/agents-server/src/app/agents/[agentName]/images/screenshot-phone.png/route.tsx

@@ -0,0 +1,92 @@
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { serializeError } from '@promptbook-local/utils';
+import { ImageResponse } from 'next/og';
+import { assertsError } from '../../../../../../../../src/errors/assertsError';
+import { Color } from '../../../../../../../../src/utils/color/Color';
+import { textColor } from '../../../../../../../../src/utils/color/operators/furthest';
+import { grayscale } from '../../../../../../../../src/utils/color/operators/grayscale';
+import { keepUnused } from '../../../../../../../../src/utils/organization/keepUnused';
+import { getAgentName, getAgentProfile } from '../../_utils';
+
+const size = {
+    width: 1080,
+    height: 1920,
+};
+
+export async function GET(request: Request, { params }: { params: Promise<{ agentName: string }> }) {
+    keepUnused(request /* <- Note: We dont need `request` parameter */);
+
+    try {
+        const agentName = await getAgentName(params);
+        const agentProfile = await getAgentProfile(agentName);
+        const agentColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+        const backgroundColor = agentColor.then(grayscale(0.5));
+
+        return new ImageResponse(
+            (
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: backgroundColor.toHex(),
+                        color: agentColor.then(textColor).toHex(),
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <div
+                        style={{
+                            width: '40%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        {/* Note: `next/image` is not working propperly with `next/og` */}
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                            style={{
+                                width: '80%',
+                                backgroundColor: agentColor.toHex(),
+                                borderRadius: '50%',
+                            }}
+                            src={agentProfile.meta.image!}
+                            alt="Agent Icon"
+                        />
+                    </div>
+                    <div style={{ width: '60%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <h1 style={{ fontSize: '110px' }}>{agentProfile.meta.fullname || agentName}</h1>
+                    </div>
+                </div>
+            ),
+            {
+                ...size,
+                emoji: 'openmoji',
+            },
+        );
+    } catch (error) {
+        assertsError(error);
+
+        console.error(error);
+
+        return new Response(
+            JSON.stringify(
+                serializeError(error),
+                // <- TODO: [🐱‍🚀] Rename `serializeError` to `errorToJson`
+                null,
+                4,
+                // <- TODO: [🐱‍🚀] Allow to configure pretty print for agent server
+            ),
+            {
+                status: 400, // <- TODO: [🐱‍🚀] Make `errorToHttpStatusCode`
+                headers: { 'Content-Type': 'application/json' },
+            },
+        );
+    }
+}
+
+/**
+ * TODO: [🦚] DRY
+ * TODO: [🦚] This should be the true screenshot NOT just image + Agent name
+ */

package/apps/agents-server/src/app/agents/[agentName]/integration/SdkCodeTabs.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../../../../_common/components/Tabs/Tabs';
+
+type SdkCodeTabsProps = {
+    curlCode: string;
+    pythonCode: string;
+    jsCode: string;
+};
+
+export function SdkCodeTabs({ curlCode, pythonCode, jsCode }: SdkCodeTabsProps) {
+    return (
+        <Tabs defaultValue="curl" className="w-full">
+            <TabsList>
+                <TabsTrigger value="curl">cURL</TabsTrigger>
+                <TabsTrigger value="python">Python SDK</TabsTrigger>
+                <TabsTrigger value="javascript">JavaScript/TypeScript SDK</TabsTrigger>
+            </TabsList>
+            <TabsContent value="curl">
+                <CodePreview code={curlCode} language="bash" />
+            </TabsContent>
+            <TabsContent value="python">
+                <CodePreview code={pythonCode} language="python" />
+            </TabsContent>
+            <TabsContent value="javascript">
+                <CodePreview code={jsCode} language="typescript" />
+            </TabsContent>
+        </Tabs>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/integration/page.tsx

@@ -0,0 +1,302 @@
+'use server';
+
+import { $getTableName } from '@/src/database/$getTableName';
+import { $provideSupabase } from '@/src/database/$provideSupabase';
+import { $provideServer } from '@/src/tools/$provideServer';
+import { isUserAdmin } from '@/src/utils/isUserAdmin';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { ArrowLeftIcon, BoxIcon, CodeIcon, GlobeIcon, ServerIcon, TerminalIcon } from 'lucide-react';
+import { headers } from 'next/headers';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import spaceTrim from 'spacetrim';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { CodePreview } from '../../../../../../_common/components/CodePreview/CodePreview';
+import { getAgentLinks } from '../agentLinks';
+import { CopyField } from '../CopyField';
+import { getAgentName, getAgentProfile } from '../_utils';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+import { SdkCodeTabs } from './SdkCodeTabs';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentIntegrationPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+    const agentName = await getAgentName(params);
+    const isAdmin = await isUserAdmin();
+
+    let agentProfile;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                error.message.includes('JSON object requested, multiple (or no) results returned'))
+        ) {
+            notFound();
+        }
+        throw error;
+    }
+
+    const { publicUrl } = await $provideServer();
+    const baseUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+    const agentApiBase = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+    const rootUrl = publicUrl.href.replace(/\/$/, '');
+
+    // Get API Key if admin
+    let apiKey = 'ptbk_...';
+    if (isAdmin) {
+        const supabase = $provideSupabase();
+        const table = await $getTableName('ApiTokens');
+        const { data } = await supabase
+            .from(table)
+            .select('token')
+            .eq('isRevoked', false)
+            .order('createdAt', { ascending: false })
+            .limit(1);
+
+        if (data && data.length > 0) {
+            apiKey = data[0].token;
+        }
+    }
+
+    // Extract brand color from meta
+    const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const backgroundColor = (await brandColor.then(withAlpha(0.05))).toHex();
+    const borderColor = (await brandColor.then(withAlpha(0.1))).toHex();
+    const primaryColor = (await brandColor).toHex();
+
+    // Website Integration Code
+    const { fullname, color, image, ...restMeta } = agentProfile.meta;
+    const websiteIntegrationCode = spaceTrim(
+        (block) => `
+            import { PromptbookAgent } from '@promptbook/components';
+
+            export function YourComponent() {
+                return(
+                    <PromptbookAgent
+                        agentUrl="${baseUrl}"
+                        meta={${block(JSON.stringify({ fullname, color, image, ...restMeta }, null, 4))}}
+                    />
+                );
+            }
+        `,
+    );
+
+    // OpenAI Compatible Curl
+    const curlCode = spaceTrim(`
+        curl ${agentApiBase}/api/openai/v1/chat/completions \\
+          -H "Content-Type: application/json" \\
+          -H "Authorization: Bearer ${apiKey}" \\
+          -d '{
+            "model": "agent:${agentName}",
+            "messages": [
+              {"role": "user", "content": "Hello!"}
+            ]
+          }'
+    `);
+
+    // OpenAI Compatible Python
+    const pythonCode = spaceTrim(`
+        from openai import OpenAI
+
+        client = OpenAI(
+            base_url="${agentApiBase}/api/openai/v1",
+            api_key="${apiKey}",
+        )
+
+        response = client.chat.completions.create(
+            model="agent:${agentName}",
+            messages=[
+                {"role": "user", "content": "Hello!"}
+            ]
+        )
+
+        print(response.choices[0].message.content)
+    `);
+
+    // OpenAI Compatible JS
+    const jsCode = spaceTrim(`
+        import OpenAI from 'openai';
+
+        const client = new OpenAI({
+            baseURL: '${agentApiBase}/api/openai/v1',
+            apiKey: '${apiKey}',
+        });
+
+        async function main() {
+            const response = await client.chat.completions.create({
+                model: 'agent:${agentName}',
+                messages: [{ role: 'user', content: 'Hello!' }],
+            });
+
+            console.log(response.choices[0].message.content);
+        }
+
+        main();
+    `);
+
+    // MCP Config
+    const mcpConfigCode = spaceTrim(`
+        {
+          "mcpServers": {
+            "${agentName}": {
+              "command": "npx",
+              "args": [
+                "-y",
+                "@promptbook/cli",
+                "mcp",
+                "${baseUrl}"
+              ]
+            }
+          }
+        }
+    `);
+
+    const agentLinks = getAgentLinks(agentName);
+    const chatLink = agentLinks.find((l) => l.title === 'Chat with Agent')!;
+    const websiteIntegrationLink = agentLinks.find((l) => l.title === 'Website Integration')!;
+
+    return (
+        <div
+            className="min-h-screen p-6 md:p-12 flex flex-col items-center"
+            style={{
+                backgroundColor,
+            }}
+        >
+            <div className="w-full max-w-5xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b flex items-center gap-4" style={{ borderColor }}>
+                    {agentProfile.meta.image && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={agentProfile.meta.image as string}
+                            alt={agentProfile.meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2"
+                            style={{ borderColor: primaryColor }}
+                        />
+                    )}
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-gray-900">{agentProfile.meta.fullname || agentName}</h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <CodeIcon className="w-4 h-4" />
+                            Integration Options
+                        </p>
+                    </div>
+                    <Link
+                        href={chatLink.href}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="p-6 space-y-6">
+                    {/* Website Integration */}
+                    <div className="p-6 rounded-xl border-2 border-green-200 bg-green-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-green-100 text-green-600 shadow-sm">
+                                <GlobeIcon className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">Website Integration</h2>
+                                <p className="text-gray-600">
+                                    Embed the agent chat widget directly into your React application.
+                                </p>
+                                <p className="text-sm text-gray-500 mt-1">
+                                    <Link href={websiteIntegrationLink.href} className="text-blue-600 hover:underline">
+                                        View detailed guide &rarr;
+                                    </Link>
+                                </p>
+                            </div>
+                        </div>
+                        <CodePreview code={websiteIntegrationCode} language="typescript" />
+                    </div>
+
+                    {/* OpenAI API Compatible Endpoint */}
+                    <div className="p-6 rounded-xl border-2 border-blue-200 bg-blue-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-blue-100 text-blue-600 shadow-sm">
+                                <TerminalIcon className="w-6 h-6" />
+                            </div>
+                            <div className="flex-1">
+                                <h2 className="text-xl font-bold text-gray-900">OpenAI Compatible API</h2>
+                                <p className="text-gray-600">
+                                    Use the agent as a drop-in replacement for OpenAI API in your existing applications.
+                                </p>
+                                <div className="grid md:grid-cols-3 gap-4 mt-4 mb-2">
+                                    <CopyField label="Endpoint URL" value={`${agentApiBase}/api/openai/v1`} />
+                                    <CopyField label="Model Name" value={`agent:${agentName}`} />
+                                    {isAdmin ? (
+                                        <CopyField label="API Key" value={apiKey} />
+                                    ) : (
+                                        <div className="flex flex-col gap-1">
+                                            <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                                API Key
+                                            </span>
+                                            <div className="text-sm text-gray-500 italic bg-gray-50 p-2 rounded border border-gray-200">
+                                                Contact admin for API Key
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                                {isAdmin && apiKey === 'ptbk_...' && (
+                                    <p className="text-sm text-amber-600 mt-2">
+                                        No API token found.{' '}
+                                        <Link href="/admin/api-tokens" className="underline font-medium">
+                                            Create one in settings
+                                        </Link>
+                                        .
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+
+                        <SdkCodeTabs curlCode={curlCode} pythonCode={pythonCode} jsCode={jsCode} />
+                    </div>
+
+                    {/* OpenRouter Integration */}
+                    <div className="p-6 rounded-xl border-2 border-purple-200 bg-purple-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-purple-100 text-purple-600 shadow-sm">
+                                <ServerIcon className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">OpenRouter Integration</h2>
+                                <p className="text-gray-600">Connect via OpenRouter compatible endpoint.</p>
+                                <div className="grid md:grid-cols-2 gap-4 mt-4">
+                                    <CopyField label="Endpoint URL" value={`${agentApiBase}/api/openrouter`} />
+                                    <CopyField label="Model Name" value={`agent:${agentName}`} />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* MCP Integration */}
+                    <div className="p-6 rounded-xl border-2 border-orange-200 bg-orange-50/30 shadow-sm">
+                        <div className="flex items-start gap-4 mb-4">
+                            <div className="p-3 rounded-xl bg-orange-100 text-orange-600 shadow-sm">
+                                <BoxIcon className="w-6 h-6" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl font-bold text-gray-900">MCP Integration</h2>
+                                <p className="text-gray-600">
+                                    Use Model Context Protocol to connect this agent with compatible tools and IDEs
+                                    (like Claude Desktop, Cursor, etc.).
+                                </p>
+                            </div>
+                        </div>
+                        <CodePreview
+                            code={mcpConfigCode.replace(rootUrl + '/api', agentApiBase + '/api')}
+                            language="json"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/apps/agents-server/src/app/agents/[agentName]/layout.tsx

@@ -0,0 +1,41 @@
+'use server';
+
+import type { Metadata } from 'next';
+import { getAgentName, getAgentProfile } from './_utils';
+
+export async function generateMetadata({ params }: { params: Promise<{ agentName: string }> }): Promise<Metadata> {
+    const agentName = await getAgentName(params);
+
+    try {
+        const agentProfile = await getAgentProfile(agentName);
+
+        const title = agentProfile.meta.fullname || agentProfile.agentName;
+        const description = agentProfile.meta.description || agentProfile.personaDescription || undefined;
+
+        // Use the agent's icon-256.png as the favicon for all agent pages and subpages
+        const iconUrl = `/agents/${encodeURIComponent(agentName)}/images/icon-256.png`;
+
+        return {
+            title,
+            description,
+            icons: {
+                icon: iconUrl,
+                shortcut: iconUrl,
+                apple: iconUrl,
+            },
+        };
+    } catch (error) {
+        console.warn(`Failed to generate metadata for agent ${agentName}`, error);
+        return {
+            title: agentName,
+        };
+    }
+}
+
+export default async function AgentLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <>{children}</>;
+}

package/apps/agents-server/src/app/agents/[agentName]/links/page.tsx

@@ -0,0 +1,182 @@
+'use server';
+
+import { $provideServer } from '@/src/tools/$provideServer';
+import { PROMPTBOOK_COLOR } from '@promptbook-local/core';
+import { ArrowLeftIcon, CodeIcon, HomeIcon, LinkIcon, ShareIcon } from 'lucide-react';
+import { headers } from 'next/headers';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { Color } from '../../../../../../../src/utils/color/Color';
+import { withAlpha } from '../../../../../../../src/utils/color/operators/withAlpha';
+import { $sideEffect } from '../../../../../../../src/utils/organization/$sideEffect';
+import { getAgentExternalLinks, getAgentLinks } from '../agentLinks';
+import { CopyField } from '../CopyField';
+import { getAgentName, getAgentProfile } from '../_utils';
+import { generateAgentMetadata } from '../generateAgentMetadata';
+
+export const generateMetadata = generateAgentMetadata;
+
+export default async function AgentLinksPage({ params }: { params: Promise<{ agentName: string }> }) {
+    $sideEffect(headers());
+    const agentName = await getAgentName(params);
+
+    let agentProfile;
+    try {
+        agentProfile = await getAgentProfile(agentName);
+    } catch (error) {
+        if (
+            error instanceof Error &&
+            (error.message.includes('Cannot coerce the result to a single JSON object') ||
+                error.message.includes('JSON object requested, multiple (or no) results returned'))
+        ) {
+            notFound();
+        }
+        throw error;
+    }
+
+    const { publicUrl } = await $provideServer();
+    const baseUrl = `${publicUrl.href}agents/${encodeURIComponent(agentName)}`;
+
+    // Extract brand color from meta
+    const brandColor = Color.from(agentProfile.meta.color || PROMPTBOOK_COLOR);
+    const backgroundColor = (await brandColor.then(withAlpha(0.05))).toHex();
+    const borderColor = (await brandColor.then(withAlpha(0.1))).toHex();
+    const primaryColor = (await brandColor).toHex();
+
+    return (
+        <div
+            className="min-h-screen p-6 md:p-12 flex flex-col items-center"
+            style={{
+                backgroundColor,
+            }}
+        >
+            <div className="w-full max-w-3xl bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                {/* Header */}
+                <div className="p-6 border-b flex items-center gap-4" style={{ borderColor }}>
+                    {agentProfile.meta.image && (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                            src={agentProfile.meta.image as string}
+                            alt={agentProfile.meta.fullname || agentName}
+                            className="w-16 h-16 rounded-full object-cover border-2"
+                            style={{ borderColor: primaryColor }}
+                        />
+                    )}
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold text-gray-900">{agentProfile.meta.fullname || agentName}</h1>
+                        <p className="text-gray-500 flex items-center gap-2">
+                            <LinkIcon className="w-4 h-4" />
+                            Signpost & Links
+                        </p>
+                    </div>
+                    <Link
+                        href={`/agents/${encodeURIComponent(agentName)}`}
+                        className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
+                        title="Back to Agent"
+                    >
+                        <ArrowLeftIcon className="w-6 h-6" />
+                    </Link>
+                </div>
+
+                <div className="divide-y divide-gray-100">
+                    {/* API Endpoints */}
+                    <div className="p-6">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <CodeIcon className="w-5 h-5 text-gray-500" />
+                            API Endpoints
+                        </h2>
+                        <div className="grid gap-4">
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">
+                                    OpenAI Compatible Chat Completion
+                                </h3>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Standard OpenAI API endpoint for chat completions.
+                                </p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/openai/v1/chat/completions`} />
+                            </div>
+
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">OpenRouter Compatible</h3>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Endpoint compatible with OpenRouter API format.
+                                </p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/openrouter/chat/completions`} />
+                            </div>
+
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">Model Context Protocol (MCP)</h3>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Endpoint for Model Context Protocol integration.
+                                </p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/mcp`} />
+                            </div>
+
+                            <div>
+                                <h3 className="text-sm font-medium text-gray-700 mb-1">Model Requirements</h3>
+                                <p className="text-xs text-gray-500 mb-2">
+                                    Get requirements and capabilities of the model.
+                                </p>
+                                <CopyField label="Endpoint URL" value={`${baseUrl}/api/modelRequirements`} />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Agent Resources */}
+                    <div className="p-6">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <HomeIcon className="w-5 h-5 text-gray-500" />
+                            Agent Resources
+                        </h2>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            {getAgentLinks(agentName)
+                                .filter((link) =>
+                                    ['Chat with Agent', 'History & Feedback', 'Integration'].includes(link.title),
+                                )
+                                .map((link) => (
+                                    <Link
+                                        key={link.href}
+                                        href={link.href}
+                                        className="block p-4 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-md transition-all group bg-white"
+                                    >
+                                        <div className="flex items-center gap-3 mb-2">
+                                            <div className="p-2 rounded-lg bg-gray-50 text-gray-600 group-hover:bg-gray-100 transition-colors">
+                                                <link.icon className="w-5 h-5" />
+                                            </div>
+                                            <span className="font-medium text-gray-900">{link.title}</span>
+                                        </div>
+                                        <p className="text-sm text-gray-500">{link.description}</p>
+                                    </Link>
+                                ))}
+                        </div>
+                    </div>
+
+                    {/* Ecosystem */}
+                    <div className="p-6 bg-gray-50">
+                        <h2 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                            <ShareIcon className="w-5 h-5 text-gray-500" />
+                            Promptbook Ecosystem
+                        </h2>
+                        <div className="grid md:grid-cols-2 gap-4">
+                            {getAgentExternalLinks().map((link) => (
+                                <a
+                                    key={link.href}
+                                    href={link.href}
+                                    target={link.target}
+                                    rel={link.rel}
+                                    className="flex items-center gap-3 p-3 rounded-lg bg-white border border-gray-200 hover:border-gray-300 transition-colors"
+                                >
+                                    <link.icon className="w-5 h-5 text-gray-400" />
+                                    <div>
+                                        <div className="font-medium text-gray-900">{link.title}</div>
+                                        <div className="text-xs text-gray-500">{link.description}</div>
+                                    </div>
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}