Improved CardButton component; Fixrd translation

apps/web/app/home/(user)/_components/home-accounts-list.tsx

@@ -2,7 +2,11 @@ import { use } from 'react';
 
 import Link from 'next/link';
 
-import { CardButton, CardButtonHeader } from '@kit/ui/card-button';
+import {
+  CardButton,
+  CardButtonHeader,
+  CardButtonTitle,
+} from '@kit/ui/card-button';
 import { Heading } from '@kit/ui/heading';
 
 import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
@@ -21,7 +25,9 @@ export function HomeAccountsList() {
         {accounts.map((account) => (
           <CardButton key={account.value} asChild>
             <Link href={`/home/${account.value}`}>
-              <CardButtonHeader>{account.label}</CardButtonHeader>
+              <CardButtonHeader>
+                <CardButtonTitle>{account.label}</CardButtonTitle>
+              </CardButtonHeader>
             </Link>
           </CardButton>
         ))}

apps/web/public/locales/en/auth.json

@@ -36,7 +36,7 @@
   "sendEmailLink": "Send Email Link",
   "sendingEmailLink": "Sending Email Link...",
   "sendLinkSuccessDescription": "Check your email, we just sent you a link. Follow the link to sign in.",
-  "sendLinkSuccess": "We send you a link.",
+  "sendLinkSuccess": "We sent you a link by email",
   "sendLinkSuccessToast": "Link successfully sent",
   "getNewLink": "Get a new link",
   "verificationCode": "Verification Code",

packages/ui/src/makerkit/card-button.tsx

@@ -12,14 +12,14 @@ export const CardButton = React.forwardRef<
     className?: string;
     children: React.ReactNode;
   }
->(({ className, asChild, ...props }, ref) => {
+>(function CardButton({ className, asChild, ...props }, ref) {
   const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       ref={ref}
       className={cn(
-        'group relative flex h-36 rounded-lg bg-secondary/80 p-4 transition-all hover:bg-secondary/90 hover:shadow-sm active:bg-secondary active:shadow-lg',
+        'group relative flex h-36 flex-col rounded-lg bg-secondary/80 transition-all hover:bg-secondary/90 hover:shadow-sm active:bg-secondary active:shadow-lg',
         className,
       )}
       {...props}
@@ -29,18 +29,91 @@ export const CardButton = React.forwardRef<
   );
 });
 
-export function CardButtonHeader(props: React.PropsWithChildren) {
+export const CardButtonTitle = React.forwardRef<
+  HTMLSpanElement,
+  {
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+  }
+>(function CardButtonTitle({ className, asChild, ...props }, ref) {
+  const Comp = asChild ? Slot : 'span';
+
   return (
-    <>
-      <span className="text-sm font-medium text-muted-foreground transition-colors group-hover:text-secondary-foreground">
-        {props.children}
-      </span>
+    <Comp
+      ref={ref}
+      className={cn(
+        className,
+        'align-super text-sm font-medium text-muted-foreground transition-colors group-hover:text-secondary-foreground',
+      )}
+      {...props}
+    >
+      <Slottable>{props.children}</Slottable>
+    </Comp>
+  );
+});
+
+export const CardButtonHeader = React.forwardRef<
+  HTMLDivElement,
+  {
+    className?: string;
+    children: React.ReactNode;
+  }
+>(function CardButtonHeader({ className, ...props }, ref) {
+  return (
+    <div className={cn(className, 'p-4')} {...props} ref={ref}>
+      {props.children}
 
       <ChevronRight
         className={
           'absolute right-2 top-4 h-4 text-muted-foreground transition-colors group-hover:text-secondary-foreground'
         }
       />
-    </>
+    </div>
   );
-}
+});
+
+export const CardButtonContent = React.forwardRef<
+  HTMLDivElement,
+  {
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+  }
+>(function CardButtonContent({ className, asChild, ...props }, ref) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      className={cn(className, 'flex flex-1 flex-col px-4')}
+      {...props}
+      ref={ref}
+    >
+      <Slottable>{props.children}</Slottable>
+    </Comp>
+  );
+});
+
+export const CardButtonFooter = React.forwardRef<
+  HTMLDivElement,
+  {
+    className?: string;
+    asChild?: boolean;
+    children: React.ReactNode;
+  }
+>(function CardButtonFooter({ className, asChild, ...props }, ref) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      className={cn(
+        className,
+        'mt-auto flex h-0 w-full flex-col justify-center border-t px-4',
+      )}
+      {...props}
+      ref={ref}
+    >
+      <Slottable>{props.children}</Slottable>
+    </Comp>
+  );
+});