chore: Add homepage link to theme card

src/app/api/get-theme/route.ts

@@ -0,0 +1,25 @@
+
+import { getThemeFromId } from "@/lib/themes";
+import { NextApiRequest, NextApiResponse } from "next";
+
+function getQSParamFromURL(
+  key: string,
+  url: string | undefined
+): string | null {
+  if (!url) return "";
+  const search = new URL(url).search;
+  const urlParams = new URLSearchParams(search);
+  return urlParams.get(key);
+}
+
+export async function GET(request: NextApiRequest, response: NextApiResponse) {
+  const id = getQSParamFromURL("id", request.url);
+  if (!id) {
+    return Response.json({ error: "id is required" });
+  }
+  const theme = getThemeFromId(id);
+  if (!theme) {
+    return Response.json({ error: "theme not found" });
+  }
+  return Response.json( theme );
+}

src/components/theme-card.tsx

@@ -16,7 +16,14 @@ export default function ThemeCard({
       <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" />
-          <h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
+          <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>

src/lib/themes.ts

@@ -5,6 +5,7 @@ export interface ZenTheme {
   image: string
   downloadUrl: string
   id: string
+  homepage?: string
 }
 
 export function getAllThemes(): ZenTheme[] {
@@ -23,3 +24,7 @@ export function getAllThemes(): ZenTheme[] {
 export function getThemesFromSearch(themes: ZenTheme[], query: string): ZenTheme[] {
   return themes.filter((theme) => theme.name.toLowerCase().includes(query.toLowerCase()));
 }
+
+export function getThemeFromId(id: string): ZenTheme | undefined {
+  return getAllThemes().find((theme) => theme.id === id);
+}