Skip to content

Commit

Permalink
Merge pull request #17 from feature/menu-bar
Browse files Browse the repository at this point in the history
Add menu bar
  • Loading branch information
ricafolio authored Apr 15, 2024
2 parents 1b16051 + 1056050 commit 919e008
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 33 deletions.
2 changes: 2 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -15,6 +16,7 @@ function App() {
</aside>

<main className="order-1 w-full sm:order-2 sm:w-9/12">
<MenuBar />
<Canvas />
</main>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Button/DownloadButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 0 additions & 2 deletions src/components/Canvas/Canvas.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -175,7 +174,6 @@ export default function Canvas() {
<div className="hidden">
<input ref={inputRef} type="file" accept="image/*" className="hidden" />
</div>
<CanvasFooter />
</div>
)
}
23 changes: 0 additions & 23 deletions src/components/Canvas/CanvasFooter.tsx

This file was deleted.

24 changes: 24 additions & 0 deletions src/components/Menu/CreatorLink.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
24 changes: 24 additions & 0 deletions src/components/Menu/GithubLink.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
13 changes: 13 additions & 0 deletions src/components/Menu/MenuBar.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
4 changes: 0 additions & 4 deletions src/components/Tab/TabPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import DownloadButton from "@/components/Button/DownloadButton"
import TabButtonGroup from "@/components/Tab/TabButtonGroup"
import TabContent from "@/components/Tab/TabContent"

export default function EditingPanel() {
return (
<>
<TabButtonGroup />

<TabContent />

<DownloadButton />
</>
)
}

0 comments on commit 919e008

Please sign in to comment.