feat(ui): Support footer (#3727)

Co-authored-by: Alex Carpenter <[email protected]>
clerk · Jul 16, 2024 · 02c7389 · 02c7389
1 parent c92104e
commit 02c7389
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/.changeset/mean-humans-smoke.md b/.changeset/mean-humans-smoke.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -510,7 +510,20 @@ export function SignInComponentLoaded() {
                     </SignIn.Action>
                   </Card.Body>
                 </Card.Content>
-                <Card.Footer branded={branded} />
+                <Card.Footer branded={branded}>
+                  <Card.FooterAction>
+                    <Card.FooterActionText>
+                      {t('signIn.alternativeMethods.actionText')}{' '}
+                      <Card.FooterActionLink
+                        // To be implemented in SDKI-115
+                        href='#'
+                      >
+                        {' '}
+                        {t('signIn.alternativeMethods.actionLink')}
+                      </Card.FooterActionLink>
+                    </Card.FooterActionText>
+                  </Card.FooterAction>
+                </Card.Footer>
               </Card.Root>
             </SignIn.Step>
 
@@ -576,7 +589,20 @@ export function SignInComponentLoaded() {
                     </div>
                   </Card.Body>
                 </Card.Content>
-                <Card.Footer branded={branded} />
+                <Card.Footer branded={branded}>
+                  <Card.FooterAction>
+                    <Card.FooterActionText>
+                      {t('signIn.alternativeMethods.actionText')}{' '}
+                      <Card.FooterActionLink
+                        // To be implemented in SDKI-115
+                        href='#'
+                      >
+                        {' '}
+                        {t('signIn.alternativeMethods.actionLink')}
+                      </Card.FooterActionLink>
+                    </Card.FooterActionText>
+                  </Card.FooterAction>
+                </Card.Footer>
               </Card.Root>
             </SignIn.Step>