Navbar

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5function Navbar({ className, ...props }: React.ComponentProps<"nav">) {
6  return (
7    <nav
8      data-slot="navbar"
9      className={cn("flex items-center justify-between py-4", className)}
10      {...props}
11    />
12  );
13}
14 
15function NavbarLeft({ className, ...props }: React.ComponentProps<"div">) {
16  return (
17    <div
18      data-slot="navbar-left"
19      className={cn("flex items-center justify-start gap-4", className)}
20      {...props}
21    />
22  );
23}
24 
25function NavbarRight({ className, ...props }: React.ComponentProps<"div">) {
26  return (
27    <div
28      data-slot="navbar-right"
29      className={cn("flex items-center justify-end gap-4", className)}
30      {...props}
31    />
32  );
33}
34 
35function NavbarCenter({ className, ...props }: React.ComponentProps<"div">) {
36  return (
37    <div
38      data-slot="navbar-center"
39      className={cn("flex items-center justify-center gap-4", className)}
40      {...props}
41    />
42  );
43}
44 
45export { Navbar, NavbarCenter, NavbarLeft, NavbarRight };