49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { buildSnippet, type SnippetInput } from '@/lib/install-snippets';
|
|
import { CodeBlock } from './code-block';
|
|
import { cn } from '@/lib/cn';
|
|
import type { InstallTarget } from '@bmm/types';
|
|
|
|
const TABS: { id: InstallTarget; label: string }[] = [
|
|
{ id: 'claude-desktop', label: 'Claude Desktop' },
|
|
{ id: 'cursor', label: 'Cursor' },
|
|
{ id: 'chatgpt', label: 'ChatGPT' },
|
|
];
|
|
|
|
export function InstallSnippets({ input }: { input: SnippetInput }) {
|
|
const [tab, setTab] = useState<InstallTarget>('claude-desktop');
|
|
const snippet = buildSnippet(tab, input);
|
|
return (
|
|
<div>
|
|
<div className="flex gap-1 border-b border-[--color-border]">
|
|
{TABS.map((t) => (
|
|
<button
|
|
key={t.id}
|
|
type="button"
|
|
onClick={() => setTab(t.id)}
|
|
className={cn(
|
|
'relative px-3 py-2 text-[12.5px] transition-colors duration-200 ease-out',
|
|
tab === t.id
|
|
? 'text-[--color-fg]'
|
|
: 'text-[--color-fg-muted] hover:text-[--color-fg]',
|
|
)}
|
|
>
|
|
{t.label}
|
|
{tab === t.id && (
|
|
<span className="absolute inset-x-0 -bottom-px h-px bg-[--color-fg]" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="pt-4">
|
|
<CodeBlock label={snippet.label} code={snippet.code} />
|
|
{snippet.note && (
|
|
<p className="mt-2 text-[12px] leading-relaxed text-[--color-fg-muted]">{snippet.note}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|