From b16302ba24db020d57d3b0898f86d66c0a7ca604 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Thu, 15 Aug 2024 22:18:27 +0200
Subject: [PATCH] chore: Update ThemeCard component to open theme page on click

---
 src/app/themes/[theme]/page.tsx | 24 +++++++++++++++++
 src/components/theme-card.tsx   | 48 +++++++++++----------------------
 src/components/theme-page.tsx   | 27 +++++++++++++++++++
 3 files changed, 66 insertions(+), 33 deletions(-)
 create mode 100644 src/app/themes/[theme]/page.tsx
 create mode 100644 src/components/theme-page.tsx

diff --git a/src/app/themes/[theme]/page.tsx b/src/app/themes/[theme]/page.tsx
new file mode 100644
index 0000000..2487886
--- /dev/null
+++ b/src/app/themes/[theme]/page.tsx
@@ -0,0 +1,24 @@
+"use client";
+import Footer from "@/components/footer";
+import { Navigation } from "@/components/navigation";
+import ThemePage from "@/components/theme-page";
+import { getThemeFromId } from "@/lib/themes";
+import { useParams } from "next/navigation";
+
+export default function ThemeInfoPage() {
+  const params = useParams<{ theme: string }>();
+  const { theme: themeID } = params;
+
+  const theme = getThemeFromId(themeID);
+  if (!theme) {
+    return <div>Theme not found</div>;
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <ThemePage theme={theme} />
+      <Footer />  
+      <Navigation /> {/* At the bottom of the page */}
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 085507b..42aef0f 100644
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -1,6 +1,6 @@
 import { ZenTheme } from "@/lib/themes";
 import styled from "styled-components";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 import { Button } from "./ui/button";
 
 const ThemeCardWrapepr = styled.div`
@@ -12,37 +12,19 @@ export default function ThemeCard({
   theme: ZenTheme;
 }) {
   return (
-    <Dialog>
-      <DialogTrigger>
-        <ThemeCardWrapepr className="flex flex-col justify-start p-6 rounded-lg shadow-md bg-muted/50 border border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none">
-          <img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-md" />
-          <div className="flex">
-            <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
-            {theme.homepage && (
-              <a href={theme.homepage} className="text-blue-500 text-md ml-4" target="_blank" rel="noopener noreferrer">
-                Visit Homepage
-              </a>
-            )}
-          </div>
-          <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
-        </ThemeCardWrapepr>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-md mb-10" />
-          <DialogTitle>{theme.name}</DialogTitle>
-          <DialogDescription>{theme.description}</DialogDescription>
-          <hr className="!my-4" />
-          <div className="w-full relative flex justify-end">
-            <Button className="hidden install-theme" zen-theme-id={theme.id}>
-              Install Theme
-            </Button>
-            <p className="text-muted-foreground text-sm install-theme-error">
-              You need to have Zen Browser installed to use this theme. <a href="/download" className="text-blue-500">Download</a>
-            </p>
-          </div>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
+    <ThemeCardWrapepr onClick={() => {
+      window.open(`/themes/${theme.id}`, "_self");
+    }} className="flex flex-col justify-start p-6 rounded-lg shadow-md bg-muted/50 border border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none hover:border-blue-500 hover:shadow-lg">
+      <img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-md" />
+      <div className="flex">
+        <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
+        {theme.homepage && (
+          <a href={theme.homepage} className="text-blue-500 text-md ml-4" target="_blank" rel="noopener noreferrer">
+            Visit Homepage
+          </a>
+        )}
+      </div>
+      <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
+    </ThemeCardWrapepr>
   );
 }
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
new file mode 100644
index 0000000..c793b1b
--- /dev/null
+++ b/src/components/theme-page.tsx
@@ -0,0 +1,27 @@
+import { ZenTheme } from "@/lib/themes";
+import { Button } from "./ui/button";
+
+export default function ThemePage({ theme }: { theme: ZenTheme }) {
+  return (
+    <div className="mt-56 flex mx-auto items-start">
+      <div className="flex flex-col w-md border-r pr-5 mr-5">
+        <h1 className="text-2xl font-bold">{theme.name}</h1>
+        <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
+        {theme.homepage && (
+          <a
+            href={theme.homepage}
+            className="text-blue-500 text-md mt-4"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Visit Homepage
+          </a>
+        )}
+        <hr className="mt-4" />
+        <Button
+          className="mt-4"
+        >Install Theme</Button>
+      </div>
+    </div>
+  );
+}