fix: better layouts

packages/website/src/layouts/ToolLayout.astro

@@ -1,55 +1,51 @@
 ---
 import { imgur, ImgurSize } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { TOOLS } from '../constants/tools';
-import RootLayout from './RootLayout.astro';
+import { type Tool } from '../constants/tools';
+import BaseLayout from './BaseLayout.astro';
 
-const { pathname } = Astro.url;
-const pathSplit = pathname.split('/');
-const toolId = pathSplit.at(2);
-const isToolRoot = pathname === `/tools/${toolId}`;
-const tool = TOOLS.find((tool) => tool.id === toolId);
+interface Props {
+  tool: Tool;
+}
+
+const { tool } = Astro.props;
 ---
 
-<RootLayout>
+<BaseLayout>
+  <title>{tool.title}</title>
+  <meta property="og:image" content={imgur(tool.image)} />
+
   {
-    tool && isToolRoot && (
+    tool.pageDescription !== undefined && (
       <>
-        <title>{tool.title}</title>
-        <meta property="og:image" content={imgur(tool.image)} />
-
-        {tool.pageDescription !== undefined && (
-          <>
-            <meta name="description" content={tool.pageDescription} />
-            <meta property="og:description" content={tool.pageDescription} />
-          </>
-        )}
-
-        <Box
-          style={{
-            backgroundImage: `url(${imgur(tool!.image, {
-              format: 'jpeg',
-              size: ImgurSize.SmallThumbnail,
-            })})`,
-            backgroundSize: 'cover',
-          }}
-        >
-          <Flex
-            direction="column"
-            align="center"
-            py="6"
-            style={{
-              backdropFilter: 'blur(4rem)',
-              WebkitBackdropFilter: 'blur(4rem)',
-            }}
-          >
-            <Heading size="7">{tool?.title}</Heading>
-            <Text>{tool?.description}</Text>
-          </Flex>
-        </Box>
+        <meta name="description" content={tool.pageDescription} />
+        <meta property="og:description" content={tool.pageDescription} />
       </>
     )
   }
 
+  <Box
+    style={{
+      backgroundImage: `url(${imgur(tool!.image, {
+        format: 'jpeg',
+        size: ImgurSize.SmallThumbnail,
+      })})`,
+      backgroundSize: 'cover',
+    }}
+  >
+    <Flex
+      direction="column"
+      align="center"
+      py="6"
+      style={{
+        backdropFilter: 'blur(4rem)',
+        WebkitBackdropFilter: 'blur(4rem)',
+      }}
+    >
+      <Heading size="7">{tool?.title}</Heading>
+      <Text>{tool?.description}</Text>
+    </Flex>
+  </Box>
+
   <slot />
-</RootLayout>
+</BaseLayout>