Skip to content

Commit fa1f2f6

Browse files
The-Best-CodesThe-Best-Codes
committed
Beta: testing translations
1 parent 64f308b commit fa1f2f6

File tree

10 files changed

+141
-36
lines changed

10 files changed

+141
-36
lines changed

‎app/i18n.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// app/i18n.js
2+
'use client';
3+
4+
import { appWithTranslation, useTranslation } from 'next-i18next';
5+
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
6+
7+
export { appWithTranslation, useTranslation, serverSideTranslations };

‎app/layout.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { Metadata } from "next";
22
import { Inter } from "next/font/google";
3+
import { appWithTranslation } from "./i18n";
4+
import type { AppProps } from "next/app";
35
import "./globals.css";
46

57
const inter = Inter({ subsets: ["latin"] });
@@ -9,11 +11,7 @@ export const metadata: Metadata = {
911
description: "Create, share, and store your codes",
1012
};
1113

12-
export default function RootLayout({
13-
children,
14-
}: Readonly<{
15-
children: React.ReactNode;
16-
}>) {
14+
const RootLayout = ({ children }: any) => {
1715
return (
1816
<html lang="en">
1917
<head>
@@ -22,4 +20,6 @@ export default function RootLayout({
2220
<body className={inter.className}>{children}</body>
2321
</html>
2422
);
25-
}
23+
};
24+
25+
export default appWithTranslation(RootLayout);

‎app/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
"use client";
22
import React, { useState, useEffect } from "react";
3-
import Sidebar from "../components/Sidebar";
4-
import CodeEditor from "../components/Editor";
3+
import Sidebar from "@/components/Sidebar";
4+
import CodeEditor from "@/components/Editor";
55
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
66
import { Menu } from "lucide-react";
77
import { Button } from "@/components/ui/button";
88
import axios from "axios";
9+
import { useTranslation } from "@/app/i18n";
910

1011
const HomePage = () => {
12+
const { t } = useTranslation("common");
1113
const [selectedProject, setSelectedProject] = useState(null);
1214
const [refreshProjects, setRefreshProjects] = useState(false);
1315

‎components/Editor.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
SelectValue,
1414
} from "@/components/ui/select";
1515
import { Check, Info, Loader2 } from "lucide-react";
16+
import { useTranslation } from "@/app/i18n";
1617

1718
const DEFAULT_LANGUAGE = "html";
1819

@@ -44,6 +45,7 @@ const CodeEditor = ({
4445
setSelectedProject,
4546
refreshProjects,
4647
}: any) => {
48+
const { t } = useTranslation("common");
4749
const [code, setCode] = useState("");
4850
const [defaultLanguage, setDefaultLanguage] = useState(
4951
getStoredDefaultLanguage()
@@ -149,7 +151,7 @@ const CodeEditor = ({
149151
<div className="flex items-center flex-row gap-4 w-1/2">
150152
<Input
151153
type="text"
152-
placeholder="Project Name"
154+
placeholder={t("project-name")}
153155
value={name}
154156
minLength={2}
155157
onChange={(e) => setName(e.target.value)}
@@ -167,7 +169,7 @@ const CodeEditor = ({
167169
<SelectContent className="dark:bg-gray-800 dark:border-gray-700">
168170
<SelectGroup>
169171
<SelectLabel className="dark:text-white dark:bg-gray-800">
170-
Language
172+
{t("language")}
171173
</SelectLabel>
172174
{languageOptions.map((lang) => (
173175
<SelectItem
@@ -184,18 +186,18 @@ const CodeEditor = ({
184186
</div>
185187
<div className="flex items-center justify-end flex-row gap-4 w-1/2">
186188
<Button onClick={handleSave} disabled={isSaving || isLoading}>
187-
{saveSuccess === "Saving..." && "Saving..."}
189+
{saveSuccess === "Saving..." && `${t("saving-ellipsis")}`}
188190
{saveSuccess === "Saved" && (
189191
<>
190-
<Check className="inline-block mr-2" /> Saved
192+
<Check className="inline-block mr-2" /> {t("saved")}
191193
</>
192194
)}
193195
{saveSuccess === "Error" && (
194196
<>
195-
<Info className="inline-block mr-2" /> Error
197+
<Info className="inline-block mr-2" /> {t("error")}
196198
</>
197199
)}
198-
{!saveSuccess && "Save"}
200+
{!saveSuccess && t("save")}
199201
</Button>
200202
{
201203
<Button
@@ -204,9 +206,9 @@ const CodeEditor = ({
204206
>
205207
{language === "html"
206208
? showPreview
207-
? "Hide Preview"
208-
: "Show Preview"
209-
: "Show Preview"}
209+
? `${t("hide-preview")}`
210+
: `${t("show-preview")}`
211+
: `${t("show-preview")}`}
210212
</Button>
211213
}
212214
{/* <Select

‎components/Sidebar.tsx‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
} from "@/components/ui/context-menu";
4141
import { Input } from "@/components/ui/input";
4242
import { Skeleton } from "@/components/ui/skeleton";
43+
import { useTranslation } from "@/app/i18n";
4344

4445
interface Project {
4546
id: number;
@@ -53,6 +54,7 @@ const Sidebar = ({
5354
setSelectedProject,
5455
refreshProjects,
5556
}: any) => {
57+
const { t } = useTranslation("common");
5658
const [projects, setProjects] = useState<Project[]>([]);
5759
const [isLoading, setIsLoading] = useState(true);
5860
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -122,7 +124,7 @@ const Sidebar = ({
122124
variant={"secondary"}
123125
onClick={() => setSelectedProject(null)}
124126
>
125-
<Plus className="mr-2" /> New Project
127+
<Plus className="mr-2" /> {t("new-project")}
126128
</Button>
127129
<div className="mt-4 flex flex-row justify-between space-x-2">
128130
<Select
@@ -131,43 +133,51 @@ const Sidebar = ({
131133
defaultValue="date_modified"
132134
>
133135
<SelectTrigger className="text-black dark:text-white dark:border-gray-700 dark:bg-gray-800">
134-
<SelectValue placeholder="Sort By" />
136+
<SelectValue placeholder={t("sort-by")} />
135137
</SelectTrigger>
136138
<SelectContent className="dark:bg-gray-800 dark:border-gray-700">
137139
<SelectItem
138140
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
139141
value="name"
140142
>
141-
Name
143+
{t("name")}
142144
</SelectItem>
143145
<SelectItem
144146
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
145147
value="date_created"
146148
>
147-
Date Created
149+
{t("date-created")}
148150
</SelectItem>
149151
<SelectItem
150152
className="dark:text-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
151153
value="date_modified"
152154
>
153-
Date Modified
155+
{t("date-modified")}
154156
</SelectItem>
155157
</SelectContent>
156158
</Select>
157159

158-
<Button className="text-black dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700" variant={"secondary"} onClick={() => setSortAsc(!sortAsc)}>
160+
<Button
161+
className="text-black dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700"
162+
variant={"secondary"}
163+
onClick={() => setSortAsc(!sortAsc)}
164+
>
159165
{sortAsc ? <SortAsc /> : <SortDesc />}
160166
</Button>
161167
</div>
162168
<div className="mt-4 flex flex-row justify-between space-x-2">
163169
<Input
164170
type="text"
165-
placeholder="Search projects..."
171+
placeholder={t("search-projects")}
166172
value={searchTerm}
167173
onChange={(e) => setSearchTerm(e.target.value)}
168174
className="text-black dark:text-white dark:bg-gray-800 dark:border-gray-700"
169175
/>
170-
<Button className="text-black dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700" variant={"secondary"} onClick={handleSearch}>
176+
<Button
177+
className="text-black dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700"
178+
variant={"secondary"}
179+
onClick={handleSearch}
180+
>
171181
<Search className="w-4 h-4" />
172182
</Button>
173183
</div>
@@ -205,16 +215,16 @@ const Sidebar = ({
205215
</ContextMenuTrigger>
206216
<ContextMenuContent>
207217
<ContextMenuItem onClick={() => setSelectedProject(project)}>
208-
Edit
218+
{t("edit")}
209219
</ContextMenuItem>
210220
<ContextMenuItem onClick={() => handleDelete(project.id)}>
211-
Delete
221+
{t("delete")}
212222
</ContextMenuItem>
213223
<ContextMenuItem onClick={() => handleFocus(project.id)}>
214-
Focus Project
224+
{t("focus-project")}
215225
</ContextMenuItem>
216226
<ContextMenuItem onClick={() => handleShare(project)}>
217-
Share
227+
{t("share")}
218228
</ContextMenuItem>
219229
</ContextMenuContent>
220230
</ContextMenu>
@@ -232,19 +242,19 @@ const Sidebar = ({
232242
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
233243
<DialogContent>
234244
<DialogHeader>
235-
<DialogTitle>Delete Project</DialogTitle>
245+
<DialogTitle>{t("delete-project")}</DialogTitle>
236246
</DialogHeader>
237247
<DialogDescription>
238-
Are you sure you want to delete this project?
248+
{t("delete-project-description")}
239249
</DialogDescription>
240250
<DialogFooter>
241251
<Button
242252
variant="secondary"
243253
onClick={() => setIsDeleteDialogOpen(false)}
244254
>
245-
Cancel
255+
{t("cancel")}
246256
</Button>
247-
<Button onClick={confirmDelete}>Delete</Button>
257+
<Button onClick={confirmDelete}>{t("delete")}</Button>
248258
</DialogFooter>
249259
</DialogContent>
250260
</Dialog>
@@ -253,7 +263,7 @@ const Sidebar = ({
253263
<Dialog open={isShareDialogOpen} onOpenChange={setIsShareDialogOpen}>
254264
<DialogContent>
255265
<DialogHeader>
256-
<DialogTitle>Share Project</DialogTitle>
266+
<DialogTitle>{t("share-project")}</DialogTitle>
257267
</DialogHeader>
258268
<DialogDescription>
259269
<div className="flex flex-row items-center gap-2">
@@ -296,7 +306,7 @@ const Sidebar = ({
296306
variant="secondary"
297307
onClick={() => setIsShareDialogOpen(false)}
298308
>
299-
Close
309+
{t("close")}
300310
</Button>
301311
</DialogFooter>
302312
</DialogContent>

‎next-i18next.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// next-i18next.config.mjs
2+
export const i18n = {
3+
defaultLocale: 'en',
4+
locales: ['en', 'es', 'fr'],
5+
};

‎next.config.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
/** @type {import('next').NextConfig} */
2-
const nextConfig = {};
2+
import { i18n } from './next-i18next.config.mjs';
3+
4+
const nextConfig = {
5+
i18n,
6+
};
37

48
export default nextConfig;

‎public/locales/en/common.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"new-project": "New Project",
3+
"sort-by": "Sort By",
4+
"name": "Name",
5+
"date-created": "Date Created",
6+
"date-modified": "Date Modified",
7+
"search-projects": "Search Projects",
8+
"edit": "Edit",
9+
"delete": "Delete",
10+
"focus-project": "Focus Project",
11+
"share": "Share",
12+
"delete-project": "Delete Project",
13+
"delete-project-description": "Are you sure you want to delete this project?",
14+
"cancel": "Cancel",
15+
"share-project": "Share Project",
16+
"close": "Close",
17+
"project-name": "Project Name",
18+
"language": "Language",
19+
"saving-ellipsis": "Saving...",
20+
"saved": "Saved",
21+
"error": "Error",
22+
"save": "Save",
23+
"hide-preview": "Hide Preview",
24+
"show-preview": "Show Preview"
25+
}

‎public/locales/es/common.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"new-project": "Nuevo Proyecto",
3+
"sort-by": "Ordenar Por",
4+
"name": "Nombre",
5+
"date-created": "Fecha Creada",
6+
"date-modified": "Fecha Modificada",
7+
"search-projects": "Buscar Proyectos",
8+
"edit": "Editar",
9+
"delete": "Eliminar",
10+
"focus-project": "Enfocar Proyecto",
11+
"share": "Compartir",
12+
"delete-project": "Eliminar Proyecto",
13+
"delete-project-description": "¿Estás seguro de que quieres eliminar este proyecto?",
14+
"cancel": "Cancelar",
15+
"share-project": "Compartir Proyecto",
16+
"close": "Cerrar",
17+
"project-name": "Nombre del Proyecto",
18+
"language": "Idioma",
19+
"saving-ellipsis": "Guardando...",
20+
"saved": "Guardado",
21+
"error": "Error",
22+
"save": "Guardar",
23+
"hide-preview": "Ocultar Vista Previa",
24+
"show-preview": "Mostrar Vista Previa"
25+
}

‎public/locales/fr/common.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"new-project": "Nouveau Projet",
3+
"sort-by": "Trier Par",
4+
"name": "Nom",
5+
"date-created": "Date Créée",
6+
"date-modified": "Date Modifiée",
7+
"search-projects": "Rechercher des Projets",
8+
"edit": "Modifier",
9+
"delete": "Supprimer",
10+
"focus-project": "Concentrer le Projet",
11+
"share": "Partager",
12+
"delete-project": "Supprimer le Projet",
13+
"delete-project-description": "Êtes-vous sûr de vouloir supprimer ce projet?",
14+
"cancel": "Annuler",
15+
"share-project": "Partager le Projet",
16+
"close": "Fermer",
17+
"project-name": "Nom du Projet",
18+
"language": "Langue",
19+
"saving-ellipsis": "Enregistrement...",
20+
"saved": "Enregistré",
21+
"error": "Erreur",
22+
"save": "Sauvegarder",
23+
"hide-preview": "Cacher la Prévisualisation",
24+
"show-preview": "Afficher la Prévisualisation"
25+
}

0 commit comments

Comments
 (0)