chore: Update dependencies and add sync-fetch for theme API

package.json

@@ -36,6 +36,7 @@
     "react-markdown": "^9.0.1",
     "react-spring": "^9.7.4",
     "styled-components": "^6.1.12",
+    "sync-fetch": "^0.5.2",
     "tailwind-merge": "^2.5.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
@@ -45,6 +46,7 @@
     "@types/node": "^20.14.15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/sync-fetch": "^0.4.3",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.4",
     "postcss": "^8.4.41",

src/components/theme-card.tsx

@@ -12,18 +12,17 @@ export default function ThemeCard({
   theme: ZenTheme;
 }) {
   return (
-    <ThemeCardWrapepr onClick={() => {
+    <ThemeCardWrapepr onClick={(event) => {
+      if (event.target instanceof HTMLAnchorElement) return;
       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>
+    }} className="flex flex-col justify-start p-5 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-lg border shadow" />
+      <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 mt-2" target="_blank" rel="noopener noreferrer">
+          Homepage
+        </a>
+      )}
       <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
     </ThemeCardWrapepr>
   );

src/lib/themes.ts

@@ -1,3 +1,4 @@
+import fetch from "sync-fetch";
 
 export interface ZenTheme {
   name: string
@@ -8,17 +9,18 @@ export interface ZenTheme {
   homepage?: string
 }
 
+const THEME_API = "https://zen-browser.github.io/theme-store/themes.json";
+
 export function getAllThemes(): ZenTheme[] {
-  // TODO: Fetch themes from the marketplace (database or JSON file)
-  return [
-    {
-      name: "Zen",
-      description: "The default theme for Zen Browser",
-      downloadUrl: "https://zen-browser.app/download", // idrc
-      id: "zen",
-      image: "https://imgs.search.brave.com/qcDBMGuBLvJGLxWR3IkZyg35vROTSZ2omLn_0iLU2rs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9pLnBp/bmltZy5jb20vb3Jp/Z2luYWxzLzgxL2Mz/LzE0LzgxYzMxNDI5/MmViOGM3YzYxNmY5/ZjM3YTRmZDI5ODU4/LmpwZw",
-    },
-  ];
+  // Fetch from the API
+  const response = fetch(THEME_API, {});
+  const themes = response.json();
+  // transform in to a ZenTheme[] as it is currently an object
+  let themesArray: ZenTheme[] = [];
+  for (let key in themes) {
+    themesArray.push(themes[key]);
+  }
+  return themesArray;
 }
 
 export function getThemesFromSearch(themes: ZenTheme[], query: string): ZenTheme[] {