chore: extract out content styles into a component

PHS-TSA · Mar 2, 2024 · ada9e5b · ada9e5b
1 parent 1fc3f5d
commit ada9e5b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -0,0 +1,9 @@
+import type { JSX, RenderableProps } from "preact";
+
+export function Content({ children }: RenderableProps<unknown>): JSX.Element {
+  return (
+    <article class="prose prose-lg max-w-none bg-slate-200 px-40 py-10 dark:prose-invert prose-headings:flex prose-headings:flex-row prose-headings:items-center dark:bg-slate-800">
+      {children}
+    </article>
+  );
+}
diff --git a/src/routes/solutions/[category]/[[slug]].tsx b/src/routes/solutions/[category]/[[slug]].tsx
@@ -2,6 +2,7 @@ import { Head } from "$fresh/runtime.ts";
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import { join } from "$std/path/mod.ts";
 import type { JSX } from "preact";
+import { Content } from "../../../components/Content.tsx";
 import { Cover } from "../../../components/Cover.tsx";
 import { Meta } from "../../../components/Meta.tsx";
 import type { FreshContextHelper } from "../../../utils/handlers.ts";
@@ -78,9 +79,9 @@ export default function Solution({
         >
           <p>{description}</p>
         </Cover>
-        <article class="prose prose-lg max-w-none bg-slate-200 px-40 py-10 dark:prose-invert prose-headings:flex prose-headings:flex-row prose-headings:items-center dark:bg-slate-800 [&_mjx-container>svg]:inline">
+        <Content>
           <data.page.default />
-        </article>
+        </Content>
       </main>
     </>
   );

diff --git a/src/routes/solutions/[category]/index.tsx b/src/routes/solutions/[category]/index.tsx
@@ -2,6 +2,7 @@ import { Head } from "$fresh/runtime.ts";
 import type { Handlers, PageProps } from "$fresh/server.ts";
 import type { JSX } from "preact";
 import { z } from "zod";
+import { Content } from "../../../components/Content.tsx";
 import { Cover } from "../../../components/Cover.tsx";
 import { Meta } from "../../../components/Meta.tsx";
 import { solutions } from "../../../utils/categories.gen.ts";
@@ -118,7 +119,7 @@ export default function Category({
         >
           <p>{description}</p>
         </Cover>
-        <article class="prose prose-lg max-w-none bg-slate-200 px-40 py-10 dark:prose-invert prose-headings:flex prose-headings:flex-row prose-headings:items-center dark:bg-slate-800">
+        <Content>
           {pages.map(
             ({ linkText, short, title, linkTo }: CategoryData): JSX.Element => (
               <>
@@ -131,7 +132,7 @@ export default function Category({
               </>
             ),
           )}
-        </article>
+        </Content>
       </main>
     </>
   );