feat(components/Navbar/NavbarContent): add variant

components/Navbar/NavbarContent.stories.tsx

@@ -1,12 +1,28 @@
 import React from "react";
 import type { Meta, Story } from "@storybook/react";
-import NavbarContent from "./NavbarContent";
+import type { NavbarContentProps } from "./NavbarContent";
+import NavbarContent, { NavbarContentVariant } from "./NavbarContent";
 
 export default {
   title: "Navbar/NavbarContent",
   component: NavbarContent,
 } as Meta;
 
-const Template: Story = () => <NavbarContent />;
+const Template: Story<NavbarContentProps> = ({
+  variant,
+}: NavbarContentProps) => <NavbarContent variant={variant} />;
 
-export const NavbarContentExample = Template.bind({});
+export const HomepageVariant = Template.bind({});
+HomepageVariant.args = {
+  variant: NavbarContentVariant.HOMEPAGE,
+};
+
+export const NotLoggedInVariant = Template.bind({});
+NotLoggedInVariant.args = {
+  variant: NavbarContentVariant.NOT_LOGGED_IN,
+};
+
+export const LoggedInVariant = Template.bind({});
+LoggedInVariant.args = {
+  variant: NavbarContentVariant.LOGGED_IN,
+};

components/Navbar/NavbarContent.tsx

@@ -1,12 +1,56 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
+import { faLink } from "@fortawesome/free-solid-svg-icons";
 import BaseButton from "../Elements/Button/BaseButton";
 
-// export interface NavbarContentProps {}
+export enum NavbarContentVariant {
+  HOMEPAGE,
+  NOT_LOGGED_IN,
+  LOGGED_IN,
+}
+
+export interface NavbarContentProps {
+  variant?: NavbarContentVariant;
+}
+
+function HomepageVariant() {
+  return (
+    <>
+      <BaseButton solid>開始使用！</BaseButton>
+    </>
+  );
+}
 
-export default function NavbarContent() {
+function NotLoggedInVariant() {
   return (
-    <div className="flex items-center">
+    <>
       <BaseButton solid>登入來建立簽到連結</BaseButton>
+    </>
+  );
+}
+
+function LoggedInVariant() {
+  return (
+    <>
+      <BaseButton solid className="flex space-x-3">
+        <div>
+          <FontAwesomeIcon icon={faLink} />
+        </div>
+        <div>建立簽到連結</div>
+      </BaseButton>
+      <BaseButton>設定</BaseButton>
+    </>
+  );
+}
+
+export default function NavbarContent({
+  variant = NavbarContentVariant.NOT_LOGGED_IN,
+}: NavbarContentProps) {
+  return (
+    <div className="flex items-center space-x-2">
+      {variant === NavbarContentVariant.HOMEPAGE && <HomepageVariant />}
+      {variant === NavbarContentVariant.NOT_LOGGED_IN && <NotLoggedInVariant />}
+      {variant === NavbarContentVariant.LOGGED_IN && <LoggedInVariant />}
     </div>
   );
 }