'use client'
import { useCopyToClipboard } from '@gentleduck/hooks/use-copy-to-clipboard'
import { Button } from '@gentleduck/registry-ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@gentleduck/registry-ui/dropdown-menu'
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@gentleduck/registry-ui/popover'
import { Separator } from '@gentleduck/registry-ui/separator'
import { Check, ChevronDown, Copy } from 'lucide-react'
import { usePathname } from 'next/navigation'
import { useSiteConfig } from '../../context'
const MENU_ITEM_CLASS = 'flex w-full items-center gap-2 cursor-pointer'
const MENU_ITEM_ICON_CLASS = 'size-4 shrink-0'
function getPromptUrl(baseURL: string, url: string, siteName: string) {
return `${baseURL}?q=${encodeURIComponent(
`I'm looking at this ${siteName} documentation: ${url}.\nHelp me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.\n `,
)}`
}
function resolvePageUrl(url: string) {
if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
return url.replace(/\/$/, '')
}
if (typeof window !== 'undefined') {
const fallback = `${window.location.origin}${window.location.pathname}`.replace(/\/$/, '')
if (!url) return fallback
try {
return new URL(url, window.location.origin).toString().replace(/\/$/, '')
} catch {
return fallback
}
}
return url?.replace(/\/$/, '') || ''
}
type MdIcon = (props: { className?: string }) => React.ReactNode
const MarkdownIcon: MdIcon = (props) => (
)
const V0Icon: MdIcon = (props) => (
)
const ChatGPTIcon: MdIcon = (props) => (
)
const ClaudeIcon: MdIcon = (props) => (
)
const SciraIcon: MdIcon = (props) => (
)
type Provider = {
key: string
label: string
icon: MdIcon
buildHref: (pathname: string, resolvedUrl: string, siteName: string) => string
}
const PROVIDERS: Provider[] = [
{
key: 'markdown',
label: 'View as Markdown',
icon: MarkdownIcon,
buildHref: (pathname) => `${pathname}.md`,
},
{
key: 'v0',
label: 'Open in v0',
icon: V0Icon,
buildHref: (_p, url, siteName) => getPromptUrl('https://v0.dev', url, siteName),
},
{
key: 'chatgpt',
label: 'Open in ChatGPT',
icon: ChatGPTIcon,
buildHref: (_p, url, siteName) => getPromptUrl('https://chatgpt.com', url, siteName),
},
{
key: 'claude',
label: 'Open in Claude',
icon: ClaudeIcon,
buildHref: (_p, url, siteName) => getPromptUrl('https://claude.ai/new', url, siteName),
},
{
key: 'scira',
label: 'Open in Scira',
icon: SciraIcon,
buildHref: (_p, url, siteName) => getPromptUrl('https://scira.ai/', url, siteName),
},
]
function ProviderLink({
provider,
pathname,
resolvedUrl,
siteName,
}: {
provider: Provider
pathname: string
resolvedUrl: string
siteName: string
}) {
const Icon = provider.icon
return (
{provider.label}
)
}
export function DocsCopyPage({ page, url }: { page: string; url: string }) {
const siteConfig = useSiteConfig()
const siteName = siteConfig.name ?? 'documentation'
const { copyToClipboard, isCopied } = useCopyToClipboard()
const pathname = usePathname() ?? ''
const resolvedUrl = resolvePageUrl(url)
const trigger = (
)
return (
{trigger}
{PROVIDERS.map((provider) => (
))}
{trigger}
{PROVIDERS.map((provider) => (
))}
)
}