From 879570a72d804214d3f8d6edd77086d19432ec16 Mon Sep 17 00:00:00 2001
From: ricafolio <29043464+ricafolio@users.noreply.github.com>
Date: Tue, 16 Apr 2024 01:04:42 +0800
Subject: [PATCH 1/3] feat: remove canvas footer

---
 src/components/Canvas/Canvas.tsx       |  2 --
 src/components/Canvas/CanvasFooter.tsx | 23 -----------------------
 2 files changed, 25 deletions(-)
 delete mode 100644 src/components/Canvas/CanvasFooter.tsx

diff --git a/src/components/Canvas/Canvas.tsx b/src/components/Canvas/Canvas.tsx
index 95dde40..d74760e 100644
--- a/src/components/Canvas/Canvas.tsx
+++ b/src/components/Canvas/Canvas.tsx
@@ -1,4 +1,3 @@
-import CanvasFooter from "@/components/Canvas/CanvasFooter"
 import { OBJECT_LOCKED, ASPECT_RATIOS } from "@/constants/canvasConfig"
 import { useCanvasAction, useTabAction } from "@/hooks/useReduxAction"
 import { useCanvasConfigData } from "@/hooks/useReduxData"
@@ -175,7 +174,6 @@ export default function Canvas() {
       <div className="hidden">
         <input ref={inputRef} type="file" accept="image/*" className="hidden" />
       </div>
-      <CanvasFooter />
     </div>
   )
 }
diff --git a/src/components/Canvas/CanvasFooter.tsx b/src/components/Canvas/CanvasFooter.tsx
deleted file mode 100644
index 14b818c..0000000
--- a/src/components/Canvas/CanvasFooter.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-export default function CanvasFooter() {
-  return (
-    <footer className="hidden w-full text-center sm:block">
-      <a
-        href="https://github.com/ricafolio/react-canvas-collage-maker/"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="font-medium text-gray-600 transition-colors hover:text-gray-200"
-      >
-        Source code
-      </a>
-      <span className="mx-3 text-gray-700">&middot;</span>
-      <a
-        href="https://ricafolio.me"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="font-medium text-gray-600 transition-colors hover:text-gray-200"
-      >
-        ricafolio.me
-      </a>
-    </footer>
-  )
-}

From 962f29b1521320b593de1f350d15fd3042fb7bfc Mon Sep 17 00:00:00 2001
From: ricafolio <29043464+ricafolio@users.noreply.github.com>
Date: Tue, 16 Apr 2024 01:06:09 +0800
Subject: [PATCH 2/3] feat: remove download button from panel tab

---
 src/components/Tab/TabPanel.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Tab/TabPanel.tsx b/src/components/Tab/TabPanel.tsx
index 6605762..78a2088 100644
--- a/src/components/Tab/TabPanel.tsx
+++ b/src/components/Tab/TabPanel.tsx
@@ -1,4 +1,3 @@
-import DownloadButton from "@/components/Button/DownloadButton"
 import TabButtonGroup from "@/components/Tab/TabButtonGroup"
 import TabContent from "@/components/Tab/TabContent"
 
@@ -6,10 +5,7 @@ export default function EditingPanel() {
   return (
     <>
       <TabButtonGroup />
-
       <TabContent />
-
-      <DownloadButton />
     </>
   )
 }

From 1056050459b847ffcfdedc3940eb645a6d659406 Mon Sep 17 00:00:00 2001
From: ricafolio <29043464+ricafolio@users.noreply.github.com>
Date: Tue, 16 Apr 2024 01:22:05 +0800
Subject: [PATCH 3/3] feat: add menu bar

---
 src/App.tsx                              |  2 ++
 src/components/Button/DownloadButton.tsx |  8 ++++----
 src/components/Menu/CreatorLink.tsx      | 24 ++++++++++++++++++++++++
 src/components/Menu/GithubLink.tsx       | 24 ++++++++++++++++++++++++
 src/components/Menu/MenuBar.tsx          | 13 +++++++++++++
 5 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Menu/CreatorLink.tsx
 create mode 100644 src/components/Menu/GithubLink.tsx
 create mode 100644 src/components/Menu/MenuBar.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 162c285..bdec75b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import Canvas from "@/components/Canvas/Canvas"
+import MenuBar from "@/components/Menu/MenuBar"
 import EditingPanel from "@/components/Tab/TabPanel"
 import store from "@/redux/store"
 import { Toaster } from "react-hot-toast"
@@ -15,6 +16,7 @@ function App() {
         </aside>
 
         <main className="order-1 w-full sm:order-2 sm:w-9/12">
+          <MenuBar />
           <Canvas />
         </main>
       </div>
diff --git a/src/components/Button/DownloadButton.tsx b/src/components/Button/DownloadButton.tsx
index 44dfa3b..f5df847 100644
--- a/src/components/Button/DownloadButton.tsx
+++ b/src/components/Button/DownloadButton.tsx
@@ -22,14 +22,14 @@ export default function DownloadButton() {
   }
 
   return (
-    <div className={clsx("bottom-0 left-0 px-2 pb-4", "sm:fixed sm:p-4")}>
+    <div>
       <a ref={linkRef} id="download" className="hidden"></a>
       <button
         className={clsx([
           "flex w-full items-center justify-center",
-          "mt-4 px-5 py-3 text-sm font-semibold",
-          "transition transition-colors",
-          "rounded bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-500",
+          "px-5 py-3 text-sm font-semibold",
+          "transition-colors",
+          "bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-500 disabled:text-gray-300/50",
         ])}
         onClick={downloadImage}
         disabled={uploadCount !== maxImageUploads}
diff --git a/src/components/Menu/CreatorLink.tsx b/src/components/Menu/CreatorLink.tsx
new file mode 100644
index 0000000..770f83b
--- /dev/null
+++ b/src/components/Menu/CreatorLink.tsx
@@ -0,0 +1,24 @@
+export default function CreatorLink() {
+  return (
+    <a
+      href="https://ricafolio.dev"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="p-3 hover:bg-neutral-800"
+      title="Made by Ricafolio :)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.3em"
+        height="1.3em"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="#757575"
+          d="M19 2a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm-7 5h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1l.117-.007A1 1 0 0 0 11 16v-2.332l2.2 2.932a1 1 0 0 0 1.4.2l.096-.081A1 1 0 0 0 14.8 15.4l-1.903-2.538l.115-.037A3.001 3.001 0 0 0 12 7m0 2a1 1 0 0 1 0 2h-1V9z"
+        ></path>
+      </svg>
+      <span className="hidden">Ricafolio.dev</span>
+    </a>
+  )
+}
diff --git a/src/components/Menu/GithubLink.tsx b/src/components/Menu/GithubLink.tsx
new file mode 100644
index 0000000..1403c92
--- /dev/null
+++ b/src/components/Menu/GithubLink.tsx
@@ -0,0 +1,24 @@
+export default function GithubLink() {
+  return (
+    <a
+      href="https://github.com/ricafolio/react-collage-maker-app"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="p-3 hover:bg-neutral-800"
+      title="Github repository"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1.3em"
+        height="1.3em"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="#757575"
+          d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+        ></path>
+      </svg>
+      <span className="hidden">Github</span>
+    </a>
+  )
+}
diff --git a/src/components/Menu/MenuBar.tsx b/src/components/Menu/MenuBar.tsx
new file mode 100644
index 0000000..04cc80c
--- /dev/null
+++ b/src/components/Menu/MenuBar.tsx
@@ -0,0 +1,13 @@
+import DownloadButton from "@/components/Button/DownloadButton"
+import CreatorLink from "@/components/Menu/CreatorLink"
+import GithubLink from "@/components/Menu/GithubLink"
+
+export default function MenuBar() {
+  return (
+    <section className="flex h-12 w-full items-center justify-end bg-neutral-900">
+      <GithubLink />
+      <CreatorLink />
+      <DownloadButton />
+    </section>
+  )
+}