import React from "react"
import { Button } from '@nextui-org/button'
import { Nav, Stack } from "react-bootstrap"
import 'bootstrap/dist/css/bootstrap.min.css'
import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from "@nextui-org/react"
import Link from "next/link"

export default function Page() {
  return (
    <div className="flex gap-4 items-center" style={{ padding: 4 }}>
      <Button color="primary" size="lg">Click me 2</Button>
      <Button size="md">
        Medium
      </Button>
      <Button size="lg">
        Large
      </Button>
      <Stack direction="horizontal" gap={3}>
        <div className="p-2">First item</div>
        <div className="p-2">Second item</div>
        <div className="p-2">Third item</div>
      </Stack>
      <ul className="nav flex-column">
        <li className="nav-item">
          <a className="nav-link active" href="/x">Active</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">Link</a>
        </li>
        <li className="nav-item">
          <a className="nav-link" href="#">Link</a>
        </li>
        <li className="nav-item">
          <a className="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  )
}