Function SvgProOnlyPopover

app/src/components/SvgProOnlyPopover.tsx:12–37

({ children }: { children: ReactNode })

 * sponsor page.
 */
export function SvgProOnlyPopover({ children }: { children: ReactNode }) {
  const hasProAccess = useHasProAccess();
  if (hasProAccess) return <>{children}</>;
  return (
    <HoverCard.Root>
      <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
      <HoverCard.Content className="no-bg">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 overflow-hidden">
          <p className="text-gray-800 dark:text-gray-100 text-sm">
            <Trans>
              This feature is only available to pro users.{" "}
              <a
                href="/pricing"
                data-to-pricing="SVG Pro Only Popover"
                className="text-blue-500 hover:underline"
              >
                Become a pro user
              </a>{" "}
              to unlock it.
            </Trans>
          </p>
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  );
}