feat: add translations to blog page

iRevolutionDev · Sep 6, 2024 · bf0c474 · bf0c474
1 parent c5379ae
commit bf0c474
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 43 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -82,6 +82,12 @@
 				"viewOnGitHub": "View on GitHub"
 			}
 		},
+		"blog": {
+			"title": "Blog",
+			"noPosts": "No posts found.",
+			"readMore": "Read more",
+			"timeToRead": "Reading time"
+		},
 		"dashboard": {
 			"signIn": {
 				"title": "Sign In",

diff --git a/locales/pt-br.json b/locales/pt-br.json
@@ -82,6 +82,12 @@
 				"viewOnGitHub": "Ver no GitHub"
 			}
 		},
+		"blog": {
+			"title": "Blog",
+			"noPosts": "Nenhum post encontrado.",
+			"readMore": "Leia mais",
+			"timeToRead": "Tempo de leitura"
+		},
 		"dashboard": {
 			"signIn": {
 				"title": "Entrar",

diff --git a/src/app/[locale]/(home)/blog/[id]/page.tsx b/src/app/[locale]/(home)/blog/[id]/page.tsx
@@ -2,11 +2,14 @@ import type { PostModel } from "@/@types/models/post-model";
 import { Markdown } from "@/components/markdown/markdown";
 import { env } from "@/env";
 import { Chip } from "@mui/material";
+import { getTranslations } from "next-intl/server";
 import Image from "next/image";
 
 export default async function BlogPage({
 	params: { id },
 }: { params: { id: string } }) {
+	const t = await getTranslations("pages.blog");
+
 	const response = await fetch(
 		`${env.NEXT_PUBLIC_API_URL}/v1/posts/get/${id}`,
 		{
@@ -41,7 +44,7 @@ export default async function BlogPage({
 				<div className="w-full flex items-center justify-between">
 					<p className="text-ellipsis line-clamp-2 font-bold">
 						<Chip
-							label={`Read time: ${Math.ceil(
+							label={`${t("timeToRead")}: ${Math.ceil(
 								post.content.split(" ").length / 200,
 							)} min`}
 							color="primary"

diff --git a/src/app/[locale]/(home)/blog/page.tsx b/src/app/[locale]/(home)/blog/page.tsx
@@ -1,11 +1,20 @@
 import type { Posts } from "@/@types/models/post-model";
-import { Link } from "@/components/link";
 import { env } from "@/env";
-import { Button, Card, CardActions, Typography } from "@mui/material";
+import {
+	Button,
+	ButtonBase,
+	Card,
+	CardActions,
+	Typography,
+} from "@mui/material";
+import { getTranslations } from "next-intl/server";
 import Image from "next/image";
+import Link from "next/link";
 import { BsArrowRight } from "react-icons/bs";
 
 export default async function BlogMainPage() {
+	const t = await getTranslations("pages.blog");
+
 	const response = await fetch(`${env.NEXT_PUBLIC_API_URL}/v1/posts/list`, {
 		next: {
 			revalidate: 1,
@@ -16,49 +25,65 @@ export default async function BlogMainPage() {
 
 	return (
 		<main className="flex flex-col items-center justify-center w-full h-full">
-			<h1 className="text-4xl font-bold">Blog</h1>
+			<h1 className="text-4xl font-bold">{t("title")}</h1>
+
+			{posts.length === 0 && (
+				<Typography variant="body1" component="p" className="mt-4">
+					{t("noPosts")}
+				</Typography>
+			)}
 
 			<div className="grid grid-cols-1 gap-4 p-4 mt-4 md:grid-cols-2 lg:grid-cols-3 w-full">
 				{posts.map((post) => (
-					<Card key={post.id} className="flex flex-col h-full">
-						<Image
-							src="https://random-image-pepebigotes.vercel.app/api/random-image"
-							alt="Random image"
-							key={post.id}
-							className="h-48 w-full object-cover"
-							width={500}
-							height={300}
-						/>
-						<div className="p-4 space-y-2">
-							<Typography
-								variant="h6"
-								component="h2"
-								className="text-ellipsis line-clamp-2 font-bold"
-							>
-								{post.title}
-							</Typography>
-							<Typography
-								variant="body2"
-								component="p"
-								className="text-ellipsis line-clamp-3 opacity-70"
-							>
-								{post.content}
-							</Typography>
-						</div>
-						<CardActions className="flex justify-end p-4 mt-auto">
-							<Button
-								component={Link}
-								href={`/blog/${post.id}`}
-								sx={{
-									borderRadius: "2rem",
-								}}
-								size="small"
-								variant="outlined"
-							>
-								Read more <BsArrowRight className="ml-2" />
-							</Button>
-						</CardActions>
-					</Card>
+					<ButtonBase
+						component={Link}
+						key={post.id}
+						href={`/blog/${post.id}`}
+						className="h-full"
+						sx={{
+							borderRadius: "1rem",
+						}}
+					>
+						<Card key={post.id} className="w-full h-full flex flex-col">
+							<Image
+								src="https://random-image-pepebigotes.vercel.app/api/random-image"
+								alt="Random image"
+								key={post.id}
+								className="h-48 w-full object-cover"
+								width={500}
+								height={300}
+							/>
+							<div className="p-4 space-y-2">
+								<Typography
+									variant="h6"
+									component="h2"
+									className="text-ellipsis line-clamp-2 font-bold"
+								>
+									{post.title}
+								</Typography>
+								<Typography
+									variant="body2"
+									component="p"
+									className="text-ellipsis line-clamp-3 opacity-70"
+								>
+									{post.content}
+								</Typography>
+							</div>
+							<CardActions className="flex justify-end p-4 mt-auto">
+								<Button
+									component={Link}
+									href={`/blog/${post.id}`}
+									sx={{
+										borderRadius: "2rem",
+									}}
+									size="small"
+									variant="outlined"
+								>
+									{t("readMore")} <BsArrowRight className="ml-2" />
+								</Button>
+							</CardActions>
+						</Card>
+					</ButtonBase>
 				))}
 			</div>
 		</main>