chore: Update ThemeCard component to open theme page on click

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>
+  );
+}

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,9 +12,9 @@ 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">
+    <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>
@@ -26,23 +26,5 @@ export default function ThemeCard({
       </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>
   );
 }

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>
+  );
+}