From 7a64fb8176e468719cc5c09df21bd1a1a2aaca02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 3 Apr 2024 19:48:28 -0500
Subject: [PATCH] feat: preview image

---
 .../tankopedia/[id]/components/Title.tsx      |  2 --
 src/app/tools/tankopedia/[id]/layout.tsx      | 30 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/app/tools/tankopedia/[id]/layout.tsx

diff --git a/src/app/tools/tankopedia/[id]/components/Title.tsx b/src/app/tools/tankopedia/[id]/components/Title.tsx
index 6e22a1b3f..41e47a1b4 100644
--- a/src/app/tools/tankopedia/[id]/components/Title.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Title.tsx
@@ -13,8 +13,6 @@ export function Title() {
 
   return (
     <>
-      <title>{protagonist.tank.name}</title>
-
       <Flex gap="6" justify="center" align="center" style={{ padding: 16 }}>
         <Flex gap="2" align="center">
           <Heading
diff --git a/src/app/tools/tankopedia/[id]/layout.tsx b/src/app/tools/tankopedia/[id]/layout.tsx
new file mode 100644
index 000000000..9c7d7c4d1
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/layout.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { tankDefinitions } from '../../../../core/blitzkrieg/tankDefinitions';
+import { tankIcon } from '../../../../core/blitzkrieg/tankIcon';
+
+interface TankopediaLayoutProps {
+  children: ReactNode;
+  params: { id: string };
+}
+
+export default async function TankopediaLayout({
+  children,
+  params,
+}: TankopediaLayoutProps) {
+  const id = Number(params.id);
+  const awaitedTankDefinitions = await tankDefinitions;
+  const tank = awaitedTankDefinitions[id];
+
+  return (
+    <>
+      <title>{tank.name}</title>
+      <meta
+        name="description"
+        content={`Statistics, armor profiles, equipment, and more about ${tank.name}`}
+      />
+      <meta property="og:image" content={tankIcon(id)} />
+
+      {children}
+    </>
+  );
+}