refactor(ui): Add clerk components to landing page (#3721)

Co-authored-by: Nikos Douvlis <[email protected]>
Co-authored-by: Joe Bell <[email protected]>

.changeset/shiny-crabs-cover.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/components/sign-in/sign-in.tsx

@@ -226,6 +226,7 @@ export function SignInComponentLoaded() {
                             <LinkButton
                               size='sm'
                               disabled={isGlobalLoading}
+                              type='button'
                             >
                               {t('formFieldAction__forgotPassword')}
                             </LinkButton>

packages/ui/theme-builder/app/page.tsx

@@ -1,3 +1,31 @@
+import { SignedIn, SignedOut, SignInButton, SignOutButton, SignUpButton } from '@clerk/nextjs';
+
+function Button({ children }: { children: React.ReactNode }) {
+  return (
+    <button className='relative isolate rounded border bg-white bg-gradient-to-b from-white to-neutral-50 px-2.5 py-1 text-sm font-medium'>
+      {children}
+    </button>
+  );
+}
+
 export default function Home() {
-  return null;
+  return (
+    <div className='relative'>
+      <SignedIn>
+        <SignOutButton>
+          <Button>Sign out</Button>
+        </SignOutButton>
+      </SignedIn>
+      <SignedOut>
+        <div className='flex flex-col gap-4'>
+          <SignInButton>
+            <Button>Sign in</Button>
+          </SignInButton>
+          <SignUpButton>
+            <Button>Sign up</Button>
+          </SignUpButton>
+        </div>
+      </SignedOut>
+    </div>
+  );
 }

packages/ui/theme-builder/app/theme-builder.tsx

@@ -82,7 +82,7 @@ export function ThemeBuilder({ children }: { children: React.ReactNode }) {
               <select
                 name='component'
                 id='component'
-                defaultValue={pathname}
+                value={pathname}
                 onChange={e => router.push(e.target.value)}
                 className='relative appearance-none rounded border bg-neutral-100 py-1 pl-1.5 pr-5 text-xs after:absolute after:right-1.5 after:top-1 after:size-2 after:bg-red-200'
               >

packages/ui/theme-builder/next.config.mjs

@@ -1,14 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  async redirects() {
-    return [
-      {
-        source: '/',
-        destination: '/sign-in',
-        permanent: false,
-      },
-    ];
-  },
-};
+const nextConfig = {};
 
 export default nextConfig;