mirror of
https://github.com/fosrl/docs-v2.git
synced 2026-09-30 17:59:10 +02:00
130 lines
5.0 KiB
TypeScript
130 lines
5.0 KiB
TypeScript
'use client';
|
|
|
|
import { buttonVariants } from 'fumadocs-ui/components/ui/button';
|
|
import { Popover, PopoverContent, PopoverTrigger } from 'fumadocs-ui/components/ui/popover';
|
|
import { ChevronDown, ExternalLink, Text } from 'lucide-react';
|
|
import { useMemo, type ComponentProps, type ReactNode } from 'react';
|
|
import { cn } from '@/lib/cn';
|
|
import { GitHubIcon } from './icons';
|
|
|
|
type ViewOptionsPopoverProps = ComponentProps<typeof PopoverTrigger> & {
|
|
markdownUrl?: string;
|
|
githubUrl?: string;
|
|
/** Canonical page URL the AI prompts ask to read. */
|
|
pageUrl: string;
|
|
};
|
|
|
|
type Option = {
|
|
title: string;
|
|
href: string;
|
|
icon: ReactNode;
|
|
};
|
|
|
|
export function ViewOptionsPopover({
|
|
markdownUrl,
|
|
githubUrl,
|
|
pageUrl,
|
|
children,
|
|
className,
|
|
...props
|
|
}: ViewOptionsPopoverProps) {
|
|
const items = useMemo(() => {
|
|
const prompt = `Read ${pageUrl}, I want to ask questions about it.`;
|
|
const options: Option[] = [];
|
|
|
|
if (githubUrl) {
|
|
options.push({
|
|
title: 'Open in GitHub',
|
|
href: githubUrl,
|
|
icon: <GitHubIcon />,
|
|
});
|
|
}
|
|
|
|
if (markdownUrl) {
|
|
options.push({
|
|
title: 'View as Markdown',
|
|
href: markdownUrl,
|
|
icon: <Text />,
|
|
});
|
|
}
|
|
|
|
options.push(
|
|
{
|
|
title: 'Open in ChatGPT',
|
|
href: `https://chatgpt.com/?${new URLSearchParams({ prompt, hints: 'search' })}`,
|
|
icon: <OpenAIIcon />,
|
|
},
|
|
{
|
|
title: 'Open in Claude',
|
|
href: `https://claude.ai/new?${new URLSearchParams({ q: prompt })}`,
|
|
icon: <ClaudeIcon />,
|
|
},
|
|
{
|
|
title: 'Open in Gemini',
|
|
// gemini.google.com ignores prompt query params; AI Mode is Gemini and reads `q`
|
|
href: `https://www.google.com/search?${new URLSearchParams({ udm: '50', q: prompt })}`,
|
|
icon: <GeminiIcon />,
|
|
},
|
|
);
|
|
|
|
return options;
|
|
}, [githubUrl, markdownUrl, pageUrl]);
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger
|
|
{...props}
|
|
className={(state) =>
|
|
cn(
|
|
buttonVariants({ variant: 'secondary', size: 'sm' }),
|
|
'gap-2 data-[popup-open]:bg-fd-accent data-[popup-open]:text-fd-accent-foreground',
|
|
typeof className === 'function' ? className(state) : className,
|
|
)
|
|
}
|
|
>
|
|
{children ?? 'Open'}
|
|
<ChevronDown className="size-3.5 text-fd-muted-foreground" />
|
|
</PopoverTrigger>
|
|
<PopoverContent className="flex flex-col">
|
|
{items.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
rel="noreferrer noopener"
|
|
target="_blank"
|
|
className="text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4"
|
|
>
|
|
{item.icon}
|
|
{item.title}
|
|
<ExternalLink className="text-fd-muted-foreground size-3.5 ms-auto" />
|
|
</a>
|
|
))}
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
function OpenAIIcon() {
|
|
return (
|
|
<svg role="img" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
|
<path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.062l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function ClaudeIcon() {
|
|
return (
|
|
<svg fill="currentColor" role="img" viewBox="0 0 24 24" aria-hidden>
|
|
<path d="M17.304 3.541h-3.672l6.696 16.918H24zm-10.608 0L0 20.459h3.744l1.369-3.553h7.005l1.37 3.553h3.744L10.536 3.541zm-.372 10.223 2.292-5.946 2.291 5.946z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function GeminiIcon() {
|
|
return (
|
|
<svg fill="currentColor" role="img" viewBox="0 0 24 24" aria-hidden>
|
|
<path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81" />
|
|
</svg>
|
|
);
|
|
}
|