From 3fe12d8227276ba42ebefe02d9dc5cc37dee97f8 Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Fri, 16 Aug 2024 11:16:36 +0200
Subject: [PATCH] chore: Update MobileNav component to use "Theme Store"
 instead of "Themes"

---
 src/components/mobile-nav.tsx |  2 +-
 src/components/theme-card.tsx | 20 +++++++++++++++-----
 src/components/theme-page.tsx |  4 ++--
 src/lib/themes.ts             |  4 ++++
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 8178456..a9a6560 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -46,7 +46,7 @@ export function MobileNav() {
                      href="/themes"
                     onOpenChange={setOpen}
                   >
-                    Themes
+                    Theme Store
                   </MobileLink>
                   <MobileLink
                      href="/release-notes"
diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index 765efbd..0ceeccc 100644
--- a/src/components/theme-card.tsx
+++ b/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>
-      {theme.homepage && (
-        <a href={theme.homepage} className="text-blue-500 text-md mt-2" target="_blank" rel="noopener noreferrer">
-          Homepage
+      <div className="flex mt-2">
+        {theme.homepage && (
+          <>
+            <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>
   );
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 522778e..091caf9 100644
--- a/src/components/theme-page.tsx
+++ b/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>
diff --git a/src/lib/themes.ts b/src/lib/themes.ts
index 1a95e65..3a17b32 100644
--- a/src/lib/themes.ts
+++ b/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}`;
+}