Skip to content

Commit 8b8c0fd

Browse files
moinulmoinmoinulmoin
committed
refactor: ♻️ reorganize app structure for locale routing and auth components
- 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"
1 parent 7b58f16 commit 8b8c0fd

File tree

4 files changed

+52
-66
lines changed

4 files changed

+52
-66
lines changed

‎src/app/[locale]/layout.tsx

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import { type Metadata } from "next";
2+
import { Inter } from "next/font/google";
3+
import localFont from "next/font/local";
4+
import Script from "next/script";
25
import Footer from "~/components/layout/footer";
36
import Header from "~/components/layout/header";
47
import ThemeProvider from "~/components/shared/theme-provider";
58
import { Toaster } from "~/components/ui/toaster";
69
import { siteConfig, siteUrl } from "~/config/site";
10+
import { cn } from "~/lib/utils";
711
import { I18nProviderClient } from "~/locales/client";
12+
import "../globals.css";
813

914
type Props = {
1015
params: Promise<{ locale: string }>;
@@ -96,28 +101,53 @@ export const viewport = {
96101
],
97102
};
98103

104+
const fontSans = Inter({
105+
subsets: ["latin"],
106+
variable: "--font-sans",
107+
});
108+
109+
const fontHeading = localFont({
110+
src: "../../assets/fonts/CalSans-SemiBold.woff2",
111+
variable: "--font-heading",
112+
});
113+
99114
export default async function SubLayout({
100115
children,
101116
loginDialog,
102-
params: params,
117+
params,
103118
}: {
104119
children: React.ReactNode;
105120
loginDialog: React.ReactNode;
106121
params: Promise<{ locale: string }>;
107122
}) {
108-
const p = await params;
109-
const locale = p.locale;
123+
const { locale } = await params;
110124
return (
111-
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
112-
<Header />
113-
<main>
114-
{children}
115-
{loginDialog}
116-
</main>
117-
<I18nProviderClient locale={locale}>
118-
<Footer />
119-
</I18nProviderClient>
120-
<Toaster />
121-
</ThemeProvider>
125+
<html lang={locale} suppressHydrationWarning>
126+
<body
127+
className={cn(
128+
"font-sans antialiased",
129+
fontSans.variable,
130+
fontHeading.variable
131+
)}
132+
>
133+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
134+
<Header />
135+
<main>
136+
{children}
137+
{loginDialog}
138+
</main>
139+
<I18nProviderClient locale={locale}>
140+
<Footer />
141+
</I18nProviderClient>
142+
<Toaster />
143+
</ThemeProvider>
144+
</body>
145+
{process.env.NODE_ENV === "production" && (
146+
<Script
147+
src="https://umami.moinulmoin.com/script.js"
148+
data-website-id="bc66d96a-fc75-4ecd-b0ef-fdd25de8113c"
149+
/>
150+
)}
151+
</html>
122152
);
123153
}

‎src/app/not-found.tsx renamed to ‎src/app/[locale]/not-found.tsx

File renamed without changes.

‎src/app/layout.tsx

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/components/layout/auth-form.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default function AuthForm() {
124124
}
125125

126126
return (
127-
<div className={cn("mt-4 flex flex-col gap-4")}>
127+
<div className={cn("mt-4 flex max-w-full flex-col gap-4")}>
128128
{currentStep === 1 && (
129129
<>
130130
<form onSubmit={handleSubmit(onEmailSubmit)}>
@@ -178,11 +178,11 @@ export default function AuthForm() {
178178
)}
179179
{currentStep === 2 && (
180180
<>
181-
<p className="mb-4">
182-
<span className="whitespace-nowrap">
183-
We&apos;ve sent a 6-digit code to {getValues("email")}
181+
<p className="mb-4 text-center">
182+
<span className="break-all">
183+
We&apos;ve sent a 6-digit code to {getValues("email")}.
184184
</span>{" "}
185-
Please enter it below to verify your account.
185+
Please enter it below for verification.
186186
</p>
187187
<form
188188
onSubmit={handleSubmit(onOTPSubmit)}
@@ -192,16 +192,17 @@ export default function AuthForm() {
192192
<Label className="sr-only" htmlFor="otp">
193193
Enter OTP
194194
</Label>
195-
<div className="flex justify-center">
195+
<div className="">
196196
<InputOTP
197197
id="otp"
198198
autoFocus
199199
disabled={isLoading}
200200
value={otp}
201201
onChange={setOTP}
202202
maxLength={6}
203+
className="flex justify-between"
203204
>
204-
<InputOTPGroup>
205+
<InputOTPGroup className="flex w-full items-center justify-between [&>div]:rounded-md [&>div]:border">
205206
<InputOTPSlot index={0} />
206207
<InputOTPSlot index={1} />
207208
<InputOTPSlot index={2} />

0 commit comments

Comments
 (0)