mirror of
https://github.com/artegoser/ultyt.git
synced 2024-11-05 20:43:58 +03:00
feat: navbar
This commit is contained in:
parent
3d798eb391
commit
d5c9887acb
2 changed files with 82 additions and 1 deletions
|
@ -4,6 +4,7 @@ import { NextUIProvider } from "@nextui-org/react";
|
|||
import { PipedAPI } from "piped-api";
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
import Trending from "./pages/trending";
|
||||
import { NavbarComponent } from "./components/navbar";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
@ -16,8 +17,10 @@ function App() {
|
|||
return (
|
||||
<NextUIProvider>
|
||||
<BrowserRouter>
|
||||
<NavbarComponent />
|
||||
<Routes>
|
||||
<Route path="/" element={<Trending />} />
|
||||
<Route path="/" element={<Navigate to="/trending" />} />
|
||||
<Route path="/trending" element={<Trending />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</NextUIProvider>
|
||||
|
|
78
src/components/navbar.tsx
Normal file
78
src/components/navbar.tsx
Normal file
|
@ -0,0 +1,78 @@
|
|||
import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
|
||||
import {
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
NavbarMenuToggle,
|
||||
NavbarMenu,
|
||||
NavbarMenuItem,
|
||||
Input,
|
||||
} from "@nextui-org/react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function NavbarComponent() {
|
||||
return (
|
||||
<Navbar>
|
||||
<NavbarContent>
|
||||
<NavbarMenuToggle className="sm:hidden" />
|
||||
<NavbarBrand>
|
||||
<Link className="font-bold text-inherit" to="/trending">
|
||||
ULTYT
|
||||
</Link>
|
||||
</NavbarBrand>
|
||||
</NavbarContent>
|
||||
|
||||
<NavbarContent className="sm:flex gap-4" justify="start">
|
||||
<NavbarItem>
|
||||
<Input
|
||||
isClearable
|
||||
radius="lg"
|
||||
placeholder="Type to search..."
|
||||
startContent={<MagnifyingGlassIcon className="h-6 w-6" />}
|
||||
/>
|
||||
</NavbarItem>
|
||||
</NavbarContent>
|
||||
|
||||
<Menu />
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
function genMenu(menu: boolean) {
|
||||
let NavItem, Nav;
|
||||
|
||||
if (menu) {
|
||||
NavItem = NavbarMenuItem;
|
||||
Nav = NavbarMenu;
|
||||
} else {
|
||||
NavItem = NavbarItem;
|
||||
Nav = NavbarContent;
|
||||
}
|
||||
|
||||
return (
|
||||
<Nav className="hidden sm:flex gap-4" justify="center">
|
||||
<NavItem>
|
||||
<Link to="/trending">Trending</Link>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Link to="/feed">Feed</Link>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Link to="/playlists">Playlists</Link>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<Link to="/preferences">Preferences</Link>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
);
|
||||
}
|
||||
|
||||
function Menu() {
|
||||
return (
|
||||
<>
|
||||
{genMenu(false)}
|
||||
{genMenu(true)}
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue