feat: add NavBar

components/shared/Bars/NavBar/NavBar.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import NavBar from "./index";
+
+const meta: Meta<typeof NavBar> = {
+  title: "Bars/NavBar",
+  component: NavBar,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type PlaygroudStory = StoryObj<typeof NavBar>;
+
+export const Playgroud: PlaygroudStory = {
+  render: (args) => <NavBar {...args}></NavBar>,
+};
+
+Playgroud.args = {};

components/shared/Bars/NavBar/NavBar.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import NavBar from "./NavBar";
+import "@testing-library/jest-dom";
+import React from "react";
+
+describe("NavBar", () => {
+  afterEach(cleanup);
+
+  it("NavBar", () => {
+    render(<NavBar />);
+    expect(screen.getByText("遊戲微服務大平台")).toBeInTheDocument();
+  });
+});

components/shared/Bars/NavBar/NavBar.tsx

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from "react";
+import Icon from "@/components/shared/Icon";
+
+interface TagProps extends React.ComponentPropsWithoutRef<"div"> {}
+
+const NavBar = ({}: PropsWithChildren<TagProps>) => {
+  return (
+    <div
+      className={
+        "flex items-center justify-between h-14 pl-2 pr-4 py-1 gradient-black"
+      }
+    >
+      <div id={"logo"} className={"flex px-2.5 items-center"}>
+        <div
+          id={"leading-icon"}
+          className={"flex flex-col w-12 h-12 p-2 items-center justify-center"}
+        >
+          <Icon name="logo" className="w-6 h-6" />
+        </div>
+        <div className={"ml-1 text-primary-100"}>遊戲微服務大平台</div>
+      </div>
+      <div id={"btn-group"} className={"flex"}>
+        <div className={"w-12 h-12 p-3"}>
+          <Icon name="chat" className="w-6 h-6 [&_*]:stroke-gray-500" />
+        </div>
+        <div className={"w-12 h-12 p-3 ml-3"}>
+          <Icon name="notification" className="w-6 h-6 [&_*]:stroke-gray-500" />
+        </div>
+        <div className={"w-12 h-12 p-3 ml-3"}>
+          <Icon name="player" className="w-6 h-6 [&_*]:stroke-gray-500" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NavBar;

components/shared/Bars/NavBar/index.ts

@@ -0,0 +1,5 @@
+import NarBar from "./NavBar";
+
+export * from "./NavBar";
+
+export default NarBar;

components/shared/Icon/icons/index.ts

@@ -20,6 +20,7 @@ import bounceRight from "./svgs/bounce-right.svg";
 import brightCrown from "./svgs/bright-crown.svg";
 import brightStar from "./svgs/bright-star.svg";
 import cellar from "./svgs/cellar.svg";
+import chat from "./svgs/chat.svg";
 import chatLines from "./svgs/chat-lines.svg";
 import chessRook from "./svgs/chess-rook.svg";
 import collectbook from "./svgs/collectbook.svg";
@@ -43,6 +44,7 @@ import lens from "./svgs/lens.svg";
 import navArrowLeft from "./svgs/nav-arrow-left.svg";
 import navArrowRight from "./svgs/nav-arrow-right.svg";
 import neighbourhood from "./svgs/neighbourhood.svg";
+import notification from "./svgs/notification.svg";
 import pageLeft from "./svgs/page-left.svg";
 import pageRight from "./svgs/page-right.svg";
 import planimetry from "./svgs/planimetry.svg";
@@ -83,6 +85,7 @@ const icons = {
   brightCrown,
   brightStar,
   cellar,
+  chat,
   chatLines,
   chessRook,
   collectbook,
@@ -106,6 +109,7 @@ const icons = {
   navArrowLeft,
   navArrowRight,
   neighbourhood,
+  notification,
   pageLeft,
   pageRight,
   planimetry,