♻️ add root layout with navbar

create root directory for page that will use navbar and other basic elements
2025-07-10 23:57:12 +07:00
parent 2b40f9b407
commit 060ceb8f32
5 changed files with 135 additions and 0 deletions
--- a/shared/ui/navbar.tsx
+++ b/shared/ui/navbar.tsx
@ -0,0 +1,122 @@
+"use client";
+
+import {
+  Button,
+  Link,
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenu,
+  NavbarMenuItem,
+  NavbarMenuToggle,
+} from "@heroui/react";
+import React, { useState } from "react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+const NavbarUI = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const navbarItems = [
+    {
+      title: "Home",
+      route: "/",
+    },
+    {
+      title: "Featured",
+      route: "/featured",
+    },
+    {
+      title: "Season",
+      route: "/season",
+    },
+    {
+      title: "Genres",
+      route: "/genres",
+    },
+  ];
+
+  return (
+    <Navbar onMenuOpenChange={setIsMenuOpen} maxWidth="full">
+      <NavbarContent>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="hidden sm:flex gap-6" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Home
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Explore
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Trending
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Schedule
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#" className="font-medium">
+            Login
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button
+            as={Link}
+            color="primary"
+            href="#"
+            variant="solid"
+            radius="sm"
+          >
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarMenu>
+        {navbarItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              className="w-full"
+              color="foreground"
+              href={item.route}
+              size="lg"
+            >
+              {item.title}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+};
+
+export default NavbarUI;