chore: Update MobileNav component to use "Theme Store" instead of "Themes"

src/components/mobile-nav.tsx

@@ -46,7 +46,7 @@ export function MobileNav() {
                      href="/themes"
                     onOpenChange={setOpen}
                   >
-                    Themes
+                    Theme Store
                   </MobileLink>
                   <MobileLink
                      href="/release-notes"

src/components/theme-card.tsx

@@ -1,4 +1,4 @@
-import { ZenTheme } from "@/lib/themes";
+import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
 import styled from "styled-components";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
 import { Button } from "./ui/button";
@@ -18,11 +18,21 @@ export default function ThemeCard({
     }} 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>
+      <div className="flex mt-2">
         {theme.homepage && (
-        <a href={theme.homepage} className="text-blue-500 text-md mt-2" target="_blank" rel="noopener noreferrer">
+          <>
+            <a href={theme.homepage} className="text-blue-500 text-md" target="_blank" rel="noopener noreferrer">
               Homepage
             </a>
+            <span className="text-muted-foreground text-md mx-2">
+              {"·"}
+            </span>
+          </>
         )}
+        <a href={getThemeAuthorLink(theme)} className="text-blue-500 text-md" target="_blank" rel="noopener noreferrer">
+          Author
+        </a>
+      </div>
       <p className="text-md mt-2 overflow-ellipsis text-muted-foreground text-start">{theme.description}</p>
     </ThemeCardWrapepr>
   );

src/components/theme-page.tsx

@@ -1,4 +1,4 @@
-import { getThemeMarkdown, ZenTheme } from "@/lib/themes";
+import { getThemeAuthorLink, getThemeMarkdown, ZenTheme } from "@/lib/themes";
 import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
@@ -46,7 +46,7 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         <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">
+          <a href={getThemeAuthorLink(theme)} className="text-blue-500 text-md mt-4" target="_blank" rel="noopener noreferrer">
             {theme.author}
           </a>
         </p>

src/lib/themes.ts

@@ -40,3 +40,7 @@ export function getThemeFromId(id: string): ZenTheme | undefined {
 export function getThemeMarkdown(theme: ZenTheme): string {
   return fetch(theme.readme, CACHE_OPTIONS).text();
 }
+
+export function getThemeAuthorLink(theme: ZenTheme): string {
+  return `https://github.com/${theme.author}`;
+}