From 2b75462a3ac06d3c7a09fca74f9792afff314885 Mon Sep 17 00:00:00 2001
From: Jaewook Ahn <dev.jaewook@gmail.com>
Date: Sun, 21 Jan 2024 20:48:56 +0900
Subject: [PATCH] feat(menubar): add base MenuBar component

- show default clock
---
 app/components/MenuBar/MenuBar.css.ts | 30 +++++++++++++++++++++++++++
 app/components/MenuBar/index.tsx      | 21 +++++++++++++++++++
 app/home/components/Shortcuts.tsx     | 14 +++++++++----
 app/home/page.tsx                     |  2 ++
 4 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 app/components/MenuBar/MenuBar.css.ts
 create mode 100644 app/components/MenuBar/index.tsx

diff --git a/app/components/MenuBar/MenuBar.css.ts b/app/components/MenuBar/MenuBar.css.ts
new file mode 100644
index 0000000..433560b
--- /dev/null
+++ b/app/components/MenuBar/MenuBar.css.ts
@@ -0,0 +1,30 @@
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  height: 32,
+  backgroundColor: "rgba(33, 33, 33, 0.4)",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  paddingLeft: 16,
+  paddingRight: 16,
+  display: "flex",
+});
+
+export const menuWrapper = style({
+  display: "inline-flex",
+  alignItems: "center",
+  flex: 1,
+});
+
+export const rightMenuWrapper = style([menuWrapper, {
+  flexDirection: "row-reverse",
+  marginLeft: "auto",
+}]);
+
+export const clock = style({
+  color: "#fff",
+  fontSize: 14,
+});
diff --git a/app/components/MenuBar/index.tsx b/app/components/MenuBar/index.tsx
new file mode 100644
index 0000000..00edcd1
--- /dev/null
+++ b/app/components/MenuBar/index.tsx
@@ -0,0 +1,21 @@
+"use client";
+import { format } from "date-fns";
+import { useMemo } from "react";
+
+import { useClock } from "../../hooks";
+import * as css from "./MenuBar.css";
+
+export const MenuBar = () => {
+  const time = useClock();
+  const clock = useMemo(() => format(time, "E MMM d") + "\u00A0\u00A0" + format(time, "h:mm a"), [time]);
+
+  return (
+    <nav className={css.container}>
+      <div className={css.menuWrapper}>
+      </div>
+      <div className={css.rightMenuWrapper}>
+        <p className={css.clock}>{clock}</p>
+      </div>
+    </nav>
+  );
+};
diff --git a/app/home/components/Shortcuts.tsx b/app/home/components/Shortcuts.tsx
index b7076dc..df959cb 100644
--- a/app/home/components/Shortcuts.tsx
+++ b/app/home/components/Shortcuts.tsx
@@ -15,6 +15,8 @@ export const ProfileShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-profile.png" alt="profile icon" />}
       label="Profile"
+      initialX="24px"
+      initialY="40px"
       onClick={handleClick}
     />
   );
@@ -30,7 +32,8 @@ export const ResumeShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-resume.png" alt="resume icon" />}
       label="Resume"
-      initialY="120px"
+      initialX="24px"
+      initialY="160px"
       onClick={handleClick}
     />
   );
@@ -46,7 +49,8 @@ export const SettingsShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-settings.png" alt="settings icon" />}
       label="Settings"
-      initialY="240px"
+      initialX="24px"
+      initialY="280px"
       onClick={handleClick}
     />
   );
@@ -61,7 +65,8 @@ export const GitHubShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-github.png" alt="github icon" />}
       label="GitHub"
-      initialY="360px"
+      initialX="24px"
+      initialY="400px"
       onClick={handleClick}
     />
   );
@@ -77,7 +82,8 @@ export const BlogShortcut = () => {
     <Shortcut
       icon={<Image width={72} height={72} src="/images/icons/icon-blog.png" alt="blog icon" />}
       label="Blog"
-      initialY="480px"
+      initialX="24px"
+      initialY="520px"
       onClick={handleClick}
     />
   );
diff --git a/app/home/page.tsx b/app/home/page.tsx
index 676aab6..77fb5df 100644
--- a/app/home/page.tsx
+++ b/app/home/page.tsx
@@ -1,4 +1,5 @@
 import { LayerManager } from "../components/Layer";
+import { MenuBar } from "../components/MenuBar";
 import { Profile } from "./components/Profile";
 import { Resume } from "./components/Resume";
 import { Settings } from "./components/Settings";
@@ -70,6 +71,7 @@ import * as Shortcut from "./components/Shortcuts";
 const Main = () => {
   return (
     <LayerManager>
+      <MenuBar />
       <Shortcut.ResumeShortcut />
       <Shortcut.GitHubShortcut />
       <Shortcut.SettingsShortcut />