add i18n

Author: idoubi

app/(default)/layout.tsx

@@ -1,6 +1,6 @@
 import Social from "../social";
 
-export default function () {
+export default function ({ dict }: { dict: any }) {
   return (
     <section>
       <div className="w-screen flex-col bg-black px-6 py-20 text-white lg:flex lg:px-10 xl:px-24">
@@ -10,7 +10,7 @@ export default function () {
               Sora.FM
             </a>
             <p className="font-inter mt-4 max-w-[350px] text-base font-light text-gray-500">
-              Sora AI Video Showcases
+              {dict.brand.title}
             </p>
             <div className="mb-8 mt-6 flex flex-row">
               <Social />

app/(default)/page.tsx

@@ -1,21 +1,22 @@
+import Langswitch from "../langswitch";
 import { Nav } from "@/types/nav";
 import Social from "../social";
 
-export default function () {
+export default function ({ lang, dict }: { lang: string; dict: any }) {
   const navigations: Nav[] = [];
 
   return (
     <header>
       <div className="h-auto w-screen">
         <nav className="font-inter mx-auto h-auto w-full max-w-7xl lg:relative lg:top-0">
           <div className="flex flex-row items-center px-6 py-8 lg:flex-row lg:items-center lg:justify-between lg:px-10 lg:py-8 xl:px-10">
-            <a href="/" className="text-xl font-medium flex items-center">
-              {/* <img
-                src="/logo.png"
-                className="w-10 h-10 rounded-full mr-3"
-                alt="logo"
-              /> */}
-              <span className="font-bold text-primary text-2xl">Sora.FM</span>
+            <a
+              href={`/${lang}/`}
+              className="text-xl font-medium flex items-center"
+            >
+              <span className="font-bold text-primary text-2xl">
+                {dict.brand.name}
+              </span>
             </a>
 
             <div className="hidden md:flex ml-16">
@@ -33,9 +34,12 @@ export default function () {
             <div className="flex-1"></div>
 
             <div className="flex flex-row items-center lg:flex lg:flex-row lg:space-x-3 lg:space-y-0">
-              <div className=" md:block mr-4 text-white">
+              <div className="md:block mr-4 text-white">
                 <Social />
               </div>
+              <div>
+                <Langswitch />
+              </div>
             </div>
             <a href="#" className="absolute right-5 lg:hidden"></a>
           </div>

app/(default)/_components/footer/index.tsx app/[lang]/(default)/_components/footer/index.tsx

@@ -1,22 +1,21 @@
 import Input from "../input";
 import Producthunt from "../producthunt";
 
-export default function () {
+export default function ({ dict }: { dict: any }) {
   return (
     <div className="mx-auto mt-4 max-w-full sm:mt-4 sm:px-0 lg:px-0">
       <div className="relative isolate overflow-hidden bg-gray-900 px-6 py-12 shadow-2xl sm:rounded-3xl sm:px-24 xl:pt-32">
         <h1 className="mx-auto max-w-4xl text-center text-3xl font-bold tracking-tight text-primary sm:text-6xl">
-          Sora AI Video Showcases
+          {dict.brand.title}
         </h1>
         <h2 className="mx-auto mt-6 max-w-xl text-center text-xl leading-8 text-gray-300">
-          Discover awesome AI Videos made with Sora.
+          {dict.brand.sub_title}
         </h2>
 
-        <Input />
+        <Input dict={dict} />
 
         <div className="mx-auto max-w-6xl text-slate-400 text-sm mt-4 text-center">
-          Sora text-to-video API is not available, we'll get you notified when
-          it's live.
+          {dict.subscribe.tip}
         </div>
 
         <svg

app/(default)/_components/header/index.tsx app/[lang]/(default)/_components/header/index.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { KeyboardEvent, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
 
 import { toast } from "sonner";
-import { useRouter } from "next/navigation";
 
-export default function () {
+export default function ({ dict }: { dict: any }) {
+  const params = useParams();
+
   const router = useRouter();
   const [email, setEmail] = useState("");
 
@@ -56,7 +58,7 @@ export default function () {
         type="email"
         required
         className="min-w-0 flex-auto rounded-md border-0 bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6"
-        placeholder="Enter your email"
+        placeholder={dict.subscribe.placeholder}
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         onKeyDown={handleInputKeydown}
@@ -66,7 +68,7 @@ export default function () {
         className="flex-none rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
         onClick={handleSubmit}
       >
-        Subscribe
+        {dict.subscribe.button}
       </button>
     </div>
   );

app/(default)/_components/hero/index.tsx app/[lang]/(default)/_components/hero/index.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useParams, usePathname, useRouter } from "next/navigation";
+
+import { localeNames } from "@/services/i18n";
+
+export default function () {
+  const params = useParams();
+  const lang = params.lang as string;
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleSwitchLanguage = (value: string) => {
+    if (value !== "lang") {
+      const newPathName = pathname.replace(lang, value);
+      router.push(newPathName);
+    }
+  };
+
+  return (
+    <Select value={lang} onValueChange={handleSwitchLanguage}>
+      <SelectTrigger className="w-fit">
+        <SelectValue placeholder="Language" />
+      </SelectTrigger>
+      <SelectContent>
+        {Object.keys(localeNames).map((key: string) => {
+          const name = localeNames[key];
+          return (
+            <SelectItem className="cursor-pointer" key={key} value={key}>
+              {name}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

app/(default)/_components/input/index.tsx app/[lang]/(default)/_components/input/index.tsx

@@ -1,16 +1,14 @@
-"use client";
-
 import { Video } from "@/types/video";
 
-export default ({ videos }: { videos: Video[] }) => {
+export default ({ lang, videos }: { lang: string; videos: Video[] }) => {
   return (
     <section className="relative">
       <div className="mx-auto max-w-7xl px-5 py-4 md:px-10 md:py-4 lg:py-4">
         <div className="mb-8 gap-5 py-4 [column-count:1] md:mb-12 md:[column-count:2] lg:mb-16 lg:[column-count:3]">
           {videos.map((video: Video, idx: number) => {
             return (
               <div key={idx}>
-                <a href={`/video/${video.uuid}`} target="_self">
+                <a href={`/${lang}/video/${video.uuid}`} target="_self">
                   <div className="mb-6 gap-6 overflow-hidden rounded-2xl border border-solid border-black shadow-lg bg-gray-900 text-white p-4">
                     <video
                       className="video w-full cursor-pointer rounded-md"

app/[lang]/(default)/_components/langswitch/index.tsx

@@ -0,0 +1,22 @@
+import Footer from "./_components/footer";
+import Header from "./_components/header";
+import { ReactNode } from "react";
+import { getDictionary } from "@/services/i18n";
+
+export default async function ({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { lang: string };
+}) {
+  const dict = await getDictionary(params.lang);
+
+  return (
+    <div className="bg-gray-900">
+      <Header lang={params.lang} dict={dict} />
+      <main>{children}</main>
+      <Footer dict={dict} />
+    </div>
+  );
+}

app/(default)/_components/producthunt/index.tsx app/[lang]/(default)/_components/producthunt/index.tsx

@@ -0,0 +1,29 @@
+import Hero from "./_components/hero";
+import { Metadata } from "next";
+import Videos from "./_components/videos";
+import { getDictionary } from "@/services/i18n";
+import { getVideos } from "@/models/video";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { lang: string };
+}): Promise<Metadata> {
+  return {
+    alternates: {
+      canonical: `${process.env.WEB_BASE_URI}/${params.lang}`,
+    },
+  };
+}
+
+export default async function ({ params }: { params: { lang: string } }) {
+  const videos = await getVideos(1, 50);
+  const dict = await getDictionary(params.lang);
+
+  return (
+    <div>
+      <Hero dict={dict} />
+      <Videos lang={params.lang} videos={videos} />
+    </div>
+  );
+}

app/(default)/_components/social/index.tsx app/[lang]/(default)/_components/social/index.tsx

@@ -2,12 +2,15 @@ import { findVideoByUuid, getRandVideos } from "@/models/video";
 
 import { Metadata } from "next";
 import Videos from "../../_components/videos";
+import { getDictionary } from "@/services/i18n";
 
 export async function generateMetadata({
   params,
 }: {
-  params: { uuid: string };
+  params: { lang: string; uuid: string };
 }): Promise<Metadata> {
+  const dict = await getDictionary(params.lang);
+
   let description = "";
 
   if (params.uuid) {
@@ -18,25 +21,30 @@ export async function generateMetadata({
   }
 
   return {
-    description: `${description} Sora AI Video Showcases | Sora.FM`,
+    description: `${description} ${dict.brand.title} | Sora.FM`,
     alternates: {
-      canonical: `${process.env.WEB_BASE_URI}/video/${params.uuid}`,
+      canonical: `${process.env.WEB_BASE_URI}/${params.lang}/video/${params.uuid}`,
     },
   };
 }
 
-export default async function ({ params }: { params: { uuid: string } }) {
+export default async function ({
+  params,
+}: {
+  params: { lang: string; uuid: string };
+}) {
+  const dict = await getDictionary(params.lang);
   const video = await findVideoByUuid(params.uuid);
   const videos = await getRandVideos(1, 50);
 
   return (
     <div className="mx-auto mt-4 max-w-full sm:mt-4 sm:px-0 lg:px-0">
       <div className="relative isolate overflow-hidden bg-gray-900 px-2 py-12 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
         <h1 className="mx-auto max-w-4xl text-center text-3xl font-bold tracking-tight text-primary sm:text-6xl">
-          Sora AI Video Showcase
+          {dict.showcase.title}
         </h1>
         <p className="mx-auto mt-2 px-4 max-w-xl text-center text-xl leading-8 text-gray-300">
-          This video is made with Sora, by OpenAI's red team.
+          {dict.showcase.sub_title}
         </p>
 
         {video && (
@@ -108,10 +116,10 @@ export default async function ({ params }: { params: { uuid: string } }) {
 
       <div className="relative isolate overflow-hidden bg-gray-900 px-2 py-4 shadow-2xl sm:rounded-3xl sm:px-12 xl:py-12">
         <h2 className="mx-auto mt-2 max-w-xl text-center text-xl leading-8 text-gray-300">
-          More AI Video Showcases
+          {dict.showcase.more_tip}
         </h2>
 
-        <Videos videos={videos} />
+        <Videos lang={params.lang} videos={videos} />
       </div>
     </div>
   );

app/(default)/_components/videos/index.tsx app/[lang]/(default)/_components/videos/index.tsx

@@ -0,0 +1,48 @@
+import "./globals.css";
+
+import { Analytics } from "@vercel/analytics/react";
+import { Inter } from "next/font/google";
+import type { Metadata } from "next";
+import { Toaster } from "sonner";
+import { getDictionary } from "@/services/i18n";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { lang: string };
+}): Promise<Metadata> {
+  const dict = await getDictionary(params.lang);
+
+  return {
+    title: {
+      template: `%s, ${dict.brand.title} | Sora.FM`,
+      default: `${dict.brand.title} | Sora.FM`,
+    },
+    description: `${dict.brand.title}, ${dict.brand.sub_title}`,
+    keywords:
+      "sora,sora fm,sora ai,openai sora,video ai,ai video,sora video,ai video generator,text to video,sora ai video,sora ai video generator,sora webui,sora showcase,sora ai showcases",
+  };
+}
+
+export default function RootLayout({
+  children,
+  params: { lang },
+}: Readonly<{
+  children: React.ReactNode;
+  params: { lang: string };
+}>) {
+  return (
+    <html lang={lang}>
+      <head>
+        <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body className={inter.className}>
+        <Toaster position="top-center" richColors />
+        {children}
+        <Analytics />
+      </body>
+    </html>
+  );
+}