fix: underline clerk connect page link (#34574)

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateClerkAuthDialog.tsx

@@ -22,6 +22,7 @@ import {
   Separator,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { InlineLink } from 'components/ui/InlineLink'
 
 interface CreateClerkAuthIntegrationProps {
   visible: boolean
@@ -107,9 +108,13 @@ export const CreateClerkAuthIntegrationDialog = ({
             <form id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
               <p className="text-sm text-foreground-light">
                 Register your Clerk domain. Visit{' '}
-                <a href="https://dashboard.clerk.com/setup/supabase" target="_blank" rel="noopener">
+                <InlineLink
+                  href="https://dashboard.clerk.com/setup/supabase"
+                  target="_blank"
+                  rel="noopener"
+                >
                   Clerk's Connect with Supabase page
-                </a>{' '}
+                </InlineLink>{' '}
                 to configure your Clerk instance.
               </p>
               <FormField_Shadcn_

apps/studio/components/ui/InlineLink.tsx

@@ -5,12 +5,15 @@ import { cn } from 'ui'
 interface InlineLinkProps {
   href: string
   className?: string
+  target?: string
+  rel?: string
 }
 
 export const InlineLink = ({
   href,
   className: _className,
   children,
+  ...props
 }: PropsWithChildren<InlineLinkProps>) => {
   const className = cn(
     'underline transition underline-offset-2 decoration-foreground-lighter hover:decoration-foreground text-foreground',
@@ -18,13 +21,13 @@ export const InlineLink = ({
   )
   if (href.startsWith('http')) {
     return (
-      <a className={className} href={href} target="_blank" rel="noreferrer noopener">
+      <a className={className} href={href} target="_blank" rel="noreferrer noopener" {...props}>
         {children}
       </a>
     )
   }
   return (
-    <Link className={className} href={href}>
+    <Link className={className} href={href} {...props}>
       {children}
     </Link>
   )