show img 404 on not found post

src/app/[lang]/posts/[slug]/page.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 import { useTranslation } from "@/app/i18n";
 import Container from "@/components/Container";
 import PostContent from "@/components/PostContent";
@@ -11,6 +13,8 @@ type Props = {
 export default async function PostPage({ params: { slug, lang } }: Props) {
   const post: Post | null = await getPost(slug, lang);
 
+  const { t } = await useTranslation(lang);
+
   return (
     <Container>
       {post ? (
@@ -32,7 +36,17 @@ export default async function PostPage({ params: { slug, lang } }: Props) {
           </article>
         </div>
       ) : (
-        <div></div>
+        <div className="text-center my-16">
+          <h2 className="text-2xl font-bold">{t("post_not_found")}</h2>
+
+          <div className="relative w-full min-h-[300px]">
+            <Image
+              src="https://firebasestorage.googleapis.com/v0/b/blog-e296e.appspot.com/o/assets%2F404.svg?alt=media&token=2b60f8b0-16b3-4692-8ef3-86e697823942"
+              alt="404 ilustration"
+              fill
+            />
+          </div>
+        </div>
       )}
     </Container>
   );

src/app/i18n/locales/en/translation.json

@@ -12,6 +12,7 @@
   },
 
   "not_found": "Not found",
+  "post_not_found": "Post not found",
 
   "footer": { "text": "Developed with 💚" }
 }

src/app/i18n/locales/es/translation.json

@@ -12,6 +12,7 @@
   },
 
   "not_found": "Página no encontrada",
+  "post_not_found": "Artículo no encontrado",
 
   "footer": { "text": "Desarrollado con 💚" }
 }