chore: Update ThemePage component to display theme readme

src/components/theme-page.tsx

@@ -1,11 +1,20 @@
-import { ZenTheme } from "@/lib/themes";
+import { getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+import Markdown from "react-markdown";
+import '../app/privacy-policy/markdown.css';
 
 export default function ThemePage({ theme }: { theme: ZenTheme }) {
+  const [readme, setReadme] = useState<string | null>(null);
+  useEffect(() => {
+    setReadme(getThemeMarkdown(theme));
+  }, []);
+
   return (
     <div className="mt-56 flex mx-auto items-start">
-      <div className="flex flex-col w-md border-r pr-5 mr-5">
+      <div className="flex flex-col w-md border-r pr-5 mr-5 w-full md:max-w-sm relative">
-        <h1 className="text-2xl font-bold">{theme.name}</h1>
+        <img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" />
+        <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
         {theme.homepage && (
           <a
@@ -20,8 +29,21 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         <hr className="mt-4" />
         <Button
           className="mt-4 hidden"
+          id="install-theme"
         >Install Theme</Button>
-        <p className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
+        <p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
+      </div>
+      <div className="flex flex-col p-5 max-w-xl w-full">
+        <div id="policy">
+          <Markdown>{`${readme}`}</Markdown>
+        </div>
+        <hr className="my-5" />
+        <p className="text-muted-foreground text-sm">
+          Theme by{" "}
+          <a href={`https://github.com/${theme.author}`} className="text-blue-500 text-md mt-4" target="_blank" rel="noopener noreferrer">
+            {theme.author}
+          </a>
+        </p>
       </div>
     </div>
   );

src/lib/themes.ts

@@ -7,13 +7,19 @@ export interface ZenTheme {
   downloadUrl: string
   id: string
   homepage?: string
+  readme: string
+  preferences: {
+    [key: string]: string
+  },
+  author: string
 }
 
 const THEME_API = "https://zen-browser.github.io/theme-store/themes.json";
+const CACHE_OPTIONS = {};
 
 export function getAllThemes(): ZenTheme[] {
   // Fetch from the API
-  const response = fetch(THEME_API, {});
+  const response = fetch(THEME_API, CACHE_OPTIONS);
   const themes = response.json();
   // transform in to a ZenTheme[] as it is currently an object
   let themesArray: ZenTheme[] = [];
@@ -30,3 +36,7 @@ export function getThemesFromSearch(themes: ZenTheme[], query: string): ZenTheme
 export function getThemeFromId(id: string): ZenTheme | undefined {
   return getAllThemes().find((theme) => theme.id === id);
 }
+
+export function getThemeMarkdown(theme: ZenTheme): string {
+  return fetch(theme.readme, CACHE_OPTIONS).text();
+}