45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import * as Tooltip from '@radix-ui/react-tooltip';
|
|
import { useEffect, useState } from 'react';
|
|
import { useChatDeployment } from '~/lib/hooks/useChatDeployment';
|
|
import { DeploymentPlatformEnum } from '~/types/deployment';
|
|
|
|
export function VercelDeploymentLink() {
|
|
const [deploymentUrl, setDeploymentUrl] = useState<string | undefined>(undefined);
|
|
const { getDeploymentByPlatform } = useChatDeployment();
|
|
|
|
useEffect(() => {
|
|
setDeploymentUrl(getDeploymentByPlatform(DeploymentPlatformEnum.VERCEL)?.url || '');
|
|
}, [getDeploymentByPlatform]);
|
|
|
|
return (
|
|
deploymentUrl && (
|
|
<Tooltip.Provider>
|
|
<Tooltip.Root>
|
|
<Tooltip.Trigger asChild>
|
|
<a
|
|
href={deploymentUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex justify-end items-center justify-center size-8 rounded hover:bg-upage-elements-item-backgroundActive text-upage-elements-textSecondary hover:text-[#000000] z-50"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<div className={`i-ph:link size-4 hover:text-blue-400`} />
|
|
</a>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content
|
|
className="px-3 py-2 rounded bg-upage-elements-background-depth-3 text-upage-elements-textPrimary text-xs z-50"
|
|
sideOffset={5}
|
|
>
|
|
{deploymentUrl}
|
|
<Tooltip.Arrow className="fill-upage-elements-background-depth-3" />
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
</Tooltip.Provider>
|
|
)
|
|
);
|
|
}
|