refactor: ♻️ reorganize app structure for locale routing and auth com…

…ponents - Move not-found page to [locale] directory- Update layout structure for internationalization- Modify auth-form and login-modal components- Remove root-level layout and not-found files"
moinulmoin · Nov 23, 2024 · 8b8c0fd · 8b8c0fd
1 parent 7b58f16
commit 8b8c0fd
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 66 deletions.
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,10 +1,15 @@
 import { type Metadata } from "next";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import Script from "next/script";
 import Footer from "~/components/layout/footer";
 import Header from "~/components/layout/header";
 import ThemeProvider from "~/components/shared/theme-provider";
 import { Toaster } from "~/components/ui/toaster";
 import { siteConfig, siteUrl } from "~/config/site";
+import { cn } from "~/lib/utils";
 import { I18nProviderClient } from "~/locales/client";
+import "../globals.css";
 
 type Props = {
   params: Promise<{ locale: string }>;
@@ -96,28 +101,53 @@ export const viewport = {
   ],
 };
 
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const fontHeading = localFont({
+  src: "../../assets/fonts/CalSans-SemiBold.woff2",
+  variable: "--font-heading",
+});
+
 export default async function SubLayout({
   children,
   loginDialog,
-  params: params,
+  params,
 }: {
   children: React.ReactNode;
   loginDialog: React.ReactNode;
   params: Promise<{ locale: string }>;
 }) {
-  const p = await params;
-  const locale = p.locale;
+  const { locale } = await params;
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <Header />
-      <main>
-        {children}
-        {loginDialog}
-      </main>
-      <I18nProviderClient locale={locale}>
-        <Footer />
-      </I18nProviderClient>
-      <Toaster />
-    </ThemeProvider>
+    <html lang={locale} suppressHydrationWarning>
+      <body
+        className={cn(
+          "font-sans antialiased",
+          fontSans.variable,
+          fontHeading.variable
+        )}
+      >
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <Header />
+          <main>
+            {children}
+            {loginDialog}
+          </main>
+          <I18nProviderClient locale={locale}>
+            <Footer />
+          </I18nProviderClient>
+          <Toaster />
+        </ThemeProvider>
+      </body>
+      {process.env.NODE_ENV === "production" && (
+        <Script
+          src="https://umami.moinulmoin.com/script.js"
+          data-website-id="bc66d96a-fc75-4ecd-b0ef-fdd25de8113c"
+        />
+      )}
+    </html>
   );
 }
diff --git a/src/app/not-found.tsx → src/app/[locale]/not-found.tsx b/src/app/not-found.tsx → src/app/[locale]/not-found.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
diff --git a/src/components/layout/auth-form.tsx b/src/components/layout/auth-form.tsx
@@ -124,7 +124,7 @@ export default function AuthForm() {
   }
 
   return (
-    <div className={cn("mt-4 flex flex-col gap-4")}>
+    <div className={cn("mt-4 flex max-w-full flex-col gap-4")}>
       {currentStep === 1 && (
         <>
           <form onSubmit={handleSubmit(onEmailSubmit)}>
@@ -178,11 +178,11 @@ export default function AuthForm() {
       )}
       {currentStep === 2 && (
         <>
-          <p className="mb-4">
-            <span className="whitespace-nowrap">
-              We&apos;ve sent a 6-digit code to {getValues("email")}
+          <p className="mb-4 text-center">
+            <span className="break-all">
+              We&apos;ve sent a 6-digit code to {getValues("email")}.
             </span>{" "}
-            Please enter it below to verify your account.
+            Please enter it below for verification.
           </p>
           <form
             onSubmit={handleSubmit(onOTPSubmit)}
@@ -192,16 +192,17 @@ export default function AuthForm() {
               <Label className="sr-only" htmlFor="otp">
                 Enter OTP
               </Label>
-              <div className="flex justify-center">
+              <div className="">
                 <InputOTP
                   id="otp"
                   autoFocus
                   disabled={isLoading}
                   value={otp}
                   onChange={setOTP}
                   maxLength={6}
+                  className="flex justify-between"
                 >
-                  <InputOTPGroup>
+                  <InputOTPGroup className="flex w-full items-center justify-between [&>div]:rounded-md [&>div]:border">
                     <InputOTPSlot index={0} />
                     <InputOTPSlot index={1} />
                     <InputOTPSlot index={2} />