@windrun-huaiin/third-ui 11.0.10 → 11.1.0

package/dist/fuma/base/custom-home-layout.js

@@ -20,7 +20,7 @@ function CustomHomeLayout({ locale, options, children, showBanner = false, banne
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [banner !== null && banner !== void 0 ? banner : (jsxRuntime.jsx(fumaBannerSuit.FumaBannerSuit, { locale: locale, showBanner: showBanner, floating: floatingNav })), jsxRuntime.jsxs(home.HomeLayout, Object.assign({}, homeLayoutProps, { nav: Object.assign(Object.assign({}, navOptions), { component: header }), className: 'bg-neutral-100 dark:bg-neutral-900', style: layoutStyle, children: [children, showFooter ? footer$1 !== null && footer$1 !== void 0 ? footer$1 : jsxRuntime.jsx(footer.Footer, { locale: locale }) : null, showGoToTop ? goToTop$1 !== null && goToTop$1 !== void 0 ? goToTop$1 : jsxRuntime.jsx(goToTop.GoToTop, {}) : null] }))] }));
 }
 function HomeTitle({ children, className, }) {
-    return (jsxRuntime.jsx("span", { className: `font-medium in-[.uwu]:hidden in-[header]:text-[clamp(8px,3vw,15px)]! ${className !== null && className !== void 0 ? className : ''}`, children: children }));
+    return (jsxRuntime.jsx("span", { className: `font-medium in-[.uwu]:hidden in-[header]:text-[clamp(12px,3vw,15px)]! ${className !== null && className !== void 0 ? className : ''}`, children: children }));
 }
 
 exports.CustomHomeLayout = CustomHomeLayout;

package/dist/fuma/base/custom-home-layout.mjs

@@ -18,7 +18,7 @@ function CustomHomeLayout({ locale, options, children, showBanner = false, banne
     return (jsxs(Fragment, { children: [banner !== null && banner !== void 0 ? banner : (jsx(FumaBannerSuit, { locale: locale, showBanner: showBanner, floating: floatingNav })), jsxs(HomeLayout, Object.assign({}, homeLayoutProps, { nav: Object.assign(Object.assign({}, navOptions), { component: header }), className: 'bg-neutral-100 dark:bg-neutral-900', style: layoutStyle, children: [children, showFooter ? footer !== null && footer !== void 0 ? footer : jsx(Footer, { locale: locale }) : null, showGoToTop ? goToTop !== null && goToTop !== void 0 ? goToTop : jsx(GoToTop, {}) : null] }))] }));
 }
 function HomeTitle({ children, className, }) {
-    return (jsx("span", { className: `font-medium in-[.uwu]:hidden in-[header]:text-[clamp(8px,3vw,15px)]! ${className !== null && className !== void 0 ? className : ''}`, children: children }));
+    return (jsx("span", { className: `font-medium in-[.uwu]:hidden in-[header]:text-[clamp(12px,3vw,15px)]! ${className !== null && className !== void 0 ? className : ''}`, children: children }));
 }
 
 export { CustomHomeLayout, HomeTitle };

package/dist/lib/server.d.ts

@@ -1,3 +1,4 @@
 export * from './clerk-intl';
 export * from './fuma-schema-check-util';
 export * from './seo-util';
+export * from './t-intl';

package/dist/lib/server.js

@@ -3,6 +3,7 @@
 var clerkIntl = require('./clerk-intl.js');
 var fumaSchemaCheckUtil = require('./fuma-schema-check-util.js');
 var seoUtil = require('./seo-util.js');
+var tIntl = require('./t-intl.js');
 
 
 
@@ -15,3 +16,4 @@ exports.createRobotsHandler = seoUtil.createRobotsHandler;
 exports.createSitemapHandler = seoUtil.createSitemapHandler;
 exports.generateRobots = seoUtil.generateRobots;
 exports.generateSitemap = seoUtil.generateSitemap;
+exports.safeT = tIntl.safeT;

package/dist/lib/server.mjs

@@ -1,3 +1,4 @@
 export { clerkIntl } from './clerk-intl.mjs';
 export { createCommonDocsSchema, createCommonMetaSchema, createDateSchema, remarkInstallOptions } from './fuma-schema-check-util.mjs';
 export { createRobotsHandler, createSitemapHandler, generateRobots, generateSitemap } from './seo-util.mjs';
+export { safeT } from './t-intl.mjs';

package/dist/lib/t-intl.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Safely retrieves a translation using the provided translator function.
+ * If the key does not exist (checked via `t.has(key)`), it returns the fallback value.
+ *
+ * @param t - The translator function from `next-intl` (e.g. obtained via `getTranslations` or `useTranslations`).
+ * @param key - The translation key to look up.
+ * @param fallback - The value to return if the key is missing. Defaults to an empty string.
+ * @param values - Optional values for interpolation in the translation string.
+ */
+export declare function safeT(t: any, key: string, fallback?: string, values?: any): string;

package/dist/lib/t-intl.js

@@ -0,0 +1,21 @@
+'use strict';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ * Safely retrieves a translation using the provided translator function.
+ * If the key does not exist (checked via `t.has(key)`), it returns the fallback value.
+ *
+ * @param t - The translator function from `next-intl` (e.g. obtained via `getTranslations` or `useTranslations`).
+ * @param key - The translation key to look up.
+ * @param fallback - The value to return if the key is missing. Defaults to an empty string.
+ * @param values - Optional values for interpolation in the translation string.
+ */
+function safeT(t, key, fallback = '', values) {
+    // Ensure t has the .has method before calling it, just in case
+    if (t && typeof t.has === 'function' && t.has(key)) {
+        return t(key, values);
+    }
+    return fallback;
+}
+
+exports.safeT = safeT;

package/dist/lib/t-intl.mjs

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ * Safely retrieves a translation using the provided translator function.
+ * If the key does not exist (checked via `t.has(key)`), it returns the fallback value.
+ *
+ * @param t - The translator function from `next-intl` (e.g. obtained via `getTranslations` or `useTranslations`).
+ * @param key - The translation key to look up.
+ * @param fallback - The value to return if the key is missing. Defaults to an empty string.
+ * @param values - Optional values for interpolation in the translation string.
+ */
+function safeT(t, key, fallback = '', values) {
+    // Ensure t has the .has method before calling it, just in case
+    if (t && typeof t.has === 'function' && t.has(key)) {
+        return t(key, values);
+    }
+    return fallback;
+}
+
+export { safeT };

package/dist/main/footer-email.d.ts

@@ -0,0 +1,8 @@
+interface FooterEmailProps {
+    email: string;
+    clickToCopyText?: string;
+    copiedText?: string;
+    children: React.ReactNode;
+}
+export declare function FooterEmail({ email, clickToCopyText, copiedText, children }: FooterEmailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/main/footer-email.js

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function FooterEmail({ email, clickToCopyText, copiedText, children }) {
+    const [copied, setCopied] = React.useState(false);
+    const displayTitle = clickToCopyText || 'Click to copy';
+    const displayCopied = copiedText || 'Copied!';
+    const handleCopy = (e) => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+        // Prevent default to allow long press on mobile
+        e.preventDefault();
+        if (!navigator.clipboard)
+            return;
+        try {
+            yield navigator.clipboard.writeText(email);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (_a) {
+            // silent fail
+        }
+    });
+    return (jsxRuntime.jsxs("div", { className: "relative group", children: [jsxRuntime.jsx("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full pb-1 hidden group-hover:block z-10", children: jsxRuntime.jsx("div", { className: "bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap shadow-lg cursor-pointer select-text", onMouseDown: handleCopy, title: displayTitle, children: copied ? displayCopied : email }) }), jsxRuntime.jsx("a", { href: `mailto:${email}`, className: "flex items-center space-x-1 underline cursor-pointer px-2", children: children })] }));
+}
+
+exports.FooterEmail = FooterEmail;

package/dist/main/footer-email.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+function FooterEmail({ email, clickToCopyText, copiedText, children }) {
+    const [copied, setCopied] = useState(false);
+    const displayTitle = clickToCopyText || 'Click to copy';
+    const displayCopied = copiedText || 'Copied!';
+    const handleCopy = (e) => __awaiter(this, void 0, void 0, function* () {
+        // Prevent default to allow long press on mobile
+        e.preventDefault();
+        if (!navigator.clipboard)
+            return;
+        try {
+            yield navigator.clipboard.writeText(email);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (_a) {
+            // silent fail
+        }
+    });
+    return (jsxs("div", { className: "relative group", children: [jsx("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full pb-1 hidden group-hover:block z-10", children: jsx("div", { className: "bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap shadow-lg cursor-pointer select-text", onMouseDown: handleCopy, title: displayTitle, children: copied ? displayCopied : email }) }), jsx("a", { href: `mailto:${email}`, className: "flex items-center space-x-1 underline cursor-pointer px-2", children: children })] }));
+}
+
+export { FooterEmail };

package/dist/main/footer.js

@@ -5,19 +5,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var server = require('next-intl/server');
 var server$1 = require('@windrun-huaiin/base-ui/components/server');
 var Link = require('next/link');
+var footerEmail = require('./footer-email.js');
+var tIntl = require('../lib/t-intl.js');
 
 function Footer(_a) {
     return tslib_es6.__awaiter(this, arguments, void 0, function* ({ locale }) {
         const tFooter = yield server.getTranslations({ locale, namespace: 'footer' });
+        const company = tIntl.safeT(tFooter, 'company', '');
         const data = {
-            terms: tFooter('terms', { defaultValue: 'Terms of Service' }),
-            privacy: tFooter('privacy', { defaultValue: 'Privacy Policy' }),
-            contactUs: tFooter('contactUs', { defaultValue: 'Contact Us' }),
-            email: tFooter('email'),
-            company: tFooter('company'),
-            copyright: tFooter('copyright', { year: new Date().getFullYear(), name: tFooter('company') })
+            terms: tIntl.safeT(tFooter, 'terms', 'Terms of Service'),
+            privacy: tIntl.safeT(tFooter, 'privacy', 'Privacy Policy'),
+            contactUs: tIntl.safeT(tFooter, 'contactUs', 'Contact Us'),
+            email: tIntl.safeT(tFooter, 'email', ''),
+            copyright: tFooter('copyright', { year: new Date().getFullYear(), name: company }),
+            clickToCopyText: tIntl.safeT(tFooter, 'clickToCopy', 'Click to copy'),
+            copiedText: tIntl.safeT(tFooter, 'copied', 'Copied!'),
         };
-        return (jsxRuntime.jsx("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t", children: jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:gap-x-6", children: [jsxRuntime.jsxs(Link, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(server$1.globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.terms })] }), jsxRuntime.jsxs(Link, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(server$1.globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.privacy })] }), jsxRuntime.jsxs("div", { className: "relative group", children: [jsxRuntime.jsx("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg", children: data.email }), jsxRuntime.jsxs("a", { href: `mailto:${data.email}`, className: "flex items-center space-x-1 underline cursor-pointer px-2", children: [jsxRuntime.jsx(server$1.globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.contactUs })] })] })] }), jsxRuntime.jsx("div", { className: "text-xs text-center", children: jsxRuntime.jsx("span", { children: data.copyright }) })] }) }) }));
+        return (jsxRuntime.jsx("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t", children: jsxRuntime.jsx("footer", { children: jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxRuntime.jsxs(Link, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(server$1.globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.terms })] }), jsxRuntime.jsxs(Link, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [jsxRuntime.jsx(server$1.globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.privacy })] }), jsxRuntime.jsxs(footerEmail.FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsxRuntime.jsx(server$1.globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }), jsxRuntime.jsx("span", { children: data.contactUs })] })] }), jsxRuntime.jsx("div", { className: "text-xs sm:text-sm text-center", children: jsxRuntime.jsx("span", { children: data.copyright }) })] }) }) }));
     });
 }
 

package/dist/main/footer.mjs

@@ -3,19 +3,23 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { getTranslations } from 'next-intl/server';
 import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
 import Link from 'next/link';
+import { FooterEmail } from './footer-email.mjs';
+import { safeT } from '../lib/t-intl.mjs';
 
 function Footer(_a) {
     return __awaiter(this, arguments, void 0, function* ({ locale }) {
         const tFooter = yield getTranslations({ locale, namespace: 'footer' });
+        const company = safeT(tFooter, 'company', '');
         const data = {
-            terms: tFooter('terms', { defaultValue: 'Terms of Service' }),
-            privacy: tFooter('privacy', { defaultValue: 'Privacy Policy' }),
-            contactUs: tFooter('contactUs', { defaultValue: 'Contact Us' }),
-            email: tFooter('email'),
-            company: tFooter('company'),
-            copyright: tFooter('copyright', { year: new Date().getFullYear(), name: tFooter('company') })
+            terms: safeT(tFooter, 'terms', 'Terms of Service'),
+            privacy: safeT(tFooter, 'privacy', 'Privacy Policy'),
+            contactUs: safeT(tFooter, 'contactUs', 'Contact Us'),
+            email: safeT(tFooter, 'email', ''),
+            copyright: tFooter('copyright', { year: new Date().getFullYear(), name: company }),
+            clickToCopyText: safeT(tFooter, 'clickToCopy', 'Click to copy'),
+            copiedText: safeT(tFooter, 'copied', 'Copied!'),
         };
-        return (jsx("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t", children: jsx("footer", { children: jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:gap-x-6", children: [jsxs(Link, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [jsx(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.terms })] }), jsxs(Link, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [jsx(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.privacy })] }), jsxs("div", { className: "relative group", children: [jsx("div", { className: "absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg", children: data.email }), jsxs("a", { href: `mailto:${data.email}`, className: "flex items-center space-x-1 underline cursor-pointer px-2", children: [jsx(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.contactUs })] })] })] }), jsx("div", { className: "text-xs text-center", children: jsx("span", { children: data.copyright }) })] }) }) }));
+        return (jsx("div", { className: "mb-10 w-full mx-auto border-t-purple-700/80 border-t", children: jsx("footer", { children: jsxs("div", { className: "w-full flex flex-col items-center justify-center px-4 py-8 space-y-3", children: [jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6", children: [jsxs(Link, { href: `/${locale}/legal/terms`, className: "flex items-center space-x-1 hover:underline", children: [jsx(globalLucideIcons.ReceiptText, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.terms })] }), jsxs(Link, { href: `/${locale}/legal/privacy`, className: "flex items-center space-x-1 hover:underline", children: [jsx(globalLucideIcons.ShieldUser, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.privacy })] }), jsxs(FooterEmail, { email: data.email, clickToCopyText: data.clickToCopyText, copiedText: data.copiedText, children: [jsx(globalLucideIcons.Mail, { className: "h-3.5 w-3.5" }), jsx("span", { children: data.contactUs })] })] }), jsx("div", { className: "text-xs sm:text-sm text-center", children: jsx("span", { children: data.copyright }) })] }) }) }));
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "11.0.10",
+  "version": "11.1.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/fuma/base/custom-home-layout.tsx

@@ -177,7 +177,7 @@ export function HomeTitle({
 }) {
   return (
     <span
-      className={`font-medium in-[.uwu]:hidden in-[header]:text-[clamp(8px,3vw,15px)]! ${className ?? ''}`}
+      className={`font-medium in-[.uwu]:hidden in-[header]:text-[clamp(12px,3vw,15px)]! ${className ?? ''}`}
     >
       {children}
     </span>

package/src/lib/server.ts

@@ -2,4 +2,5 @@
 
 export * from './clerk-intl';
 export * from './fuma-schema-check-util';
-export * from './seo-util';
+export * from './seo-util';
+export * from './t-intl';

package/src/lib/t-intl.ts

@@ -0,0 +1,22 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+/**
+ * Safely retrieves a translation using the provided translator function.
+ * If the key does not exist (checked via `t.has(key)`), it returns the fallback value.
+ *
+ * @param t - The translator function from `next-intl` (e.g. obtained via `getTranslations` or `useTranslations`).
+ * @param key - The translation key to look up.
+ * @param fallback - The value to return if the key is missing. Defaults to an empty string.
+ * @param values - Optional values for interpolation in the translation string.
+ */
+export function safeT(
+  t: any,
+  key: string,
+  fallback: string = '',
+  values?: any
+): string {
+  // Ensure t has the .has method before calling it, just in case
+  if (t && typeof t.has === 'function' && t.has(key)) {
+    return t(key, values);
+  }
+  return fallback;
+}

package/src/main/footer-email.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState } from 'react';
+
+interface FooterEmailProps {
+  email: string;
+  clickToCopyText?: string;
+  copiedText?: string;
+  children: React.ReactNode;
+}
+
+export function FooterEmail({ email, clickToCopyText, copiedText, children }: FooterEmailProps) {
+  const [copied, setCopied] = useState(false);
+
+  const displayTitle = clickToCopyText || 'Click to copy';
+  const displayCopied = copiedText || 'Copied!';
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    // Prevent default to allow long press on mobile
+    e.preventDefault();
+    
+    if (!navigator.clipboard) return;
+
+    try {
+      await navigator.clipboard.writeText(email);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // silent fail
+    }
+  };
+
+  return (
+    <div className="relative group">
+      <div className="absolute left-2/3 -translate-x-1/4 bottom-full pb-1 hidden group-hover:block z-10">
+        <div 
+          className="bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap shadow-lg cursor-pointer select-text"
+          onMouseDown={handleCopy}
+          title={displayTitle}
+        >
+          {copied ? displayCopied : email}
+        </div>
+      </div>
+      <a
+        href={`mailto:${email}`}
+        className="flex items-center space-x-1 underline cursor-pointer px-2"
+      >
+        {children}
+      </a>
+    </div>
+  );
+}

package/src/main/footer.tsx

@@ -1,6 +1,8 @@
 import { getTranslations } from 'next-intl/server';
 import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
 import Link from "next/link";
+import { FooterEmail } from './footer-email';
+import { safeT } from '../lib/t-intl';
 
 interface FooterData {
   terms: string;
@@ -9,25 +11,31 @@ interface FooterData {
   email: string;
   copyright: string;
   company: string;
+  clickToCopyText: string;
+  copiedText: string;
 }
 
 export async function Footer({ locale }: { locale: string }) {
   const tFooter = await getTranslations({ locale, namespace: 'footer' });
   
+  const company = safeT(tFooter, 'company', '');
+
   const data: FooterData = {
-    terms: tFooter('terms', { defaultValue: 'Terms of Service' }),
-    privacy: tFooter('privacy', { defaultValue: 'Privacy Policy' }),
-    contactUs: tFooter('contactUs', { defaultValue: 'Contact Us' }),
-    email: tFooter('email'),
-    company: tFooter('company'),
-    copyright: tFooter('copyright', { year: new Date().getFullYear(), name: tFooter('company') })
+    terms: safeT(tFooter, 'terms', 'Terms of Service'),
+    privacy: safeT(tFooter, 'privacy', 'Privacy Policy'),
+    contactUs: safeT(tFooter, 'contactUs', 'Contact Us'),
+    email: safeT(tFooter, 'email', ''),
+    company: company,
+    copyright: tFooter('copyright', { year: new Date().getFullYear(), name: company }),
+    clickToCopyText: safeT(tFooter, 'clickToCopy', 'Click to copy'),
+    copiedText: safeT(tFooter, 'copied', 'Copied!'),
   };
 
   return (
     <div className="mb-10 w-full mx-auto border-t-purple-700/80 border-t">
       <footer>
         <div className="w-full flex flex-col items-center justify-center px-4 py-8 space-y-3">
-          <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:gap-x-6">
+          <div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-xs sm:text-sm sm:gap-x-6">
             <Link href={`/${locale}/legal/terms`} className="flex items-center space-x-1 hover:underline">
               <icons.ReceiptText className="h-3.5 w-3.5"/>
               <span>{data.terms}</span>
@@ -36,20 +44,12 @@ export async function Footer({ locale }: { locale: string }) {
               <icons.ShieldUser className="h-3.5 w-3.5"/>
               <span>{data.privacy}</span>
             </Link>
-            <div className="relative group">
-              <div className="absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg">
-                {data.email}
-              </div>
-              <a
-                href={`mailto:${data.email}`}
-                className="flex items-center space-x-1 underline cursor-pointer px-2"
-              >
-                <icons.Mail className="h-3.5 w-3.5"/>
-                <span>{data.contactUs}</span>
-              </a>
-            </div>
+            <FooterEmail email={data.email} clickToCopyText={data.clickToCopyText} copiedText={data.copiedText}>
+              <icons.Mail className="h-3.5 w-3.5"/>
+              <span>{data.contactUs}</span>
+            </FooterEmail>
           </div>
-          <div className="text-xs text-center">
+          <div className="text-xs sm:text-sm text-center">
             <span>{data.copyright}</span>
           </div>
         </div>