"use client"
import {Navbar, Button, Link, Text} from "@nextui-org/react";
import {styled} from "@nextui-org/react"
const Box = styled("div", {
boxSizing: "border-box",
});
const AcmeLogo = () => (
<svg
className=""
fill="none"
height="36"
viewBox="0 0 32 32"
width="36"
xmlns="http://www.w3.org/2000/svg"
>
<rect fill="var(--secondary)" height="100%" rx="16" width="100%"/>
<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>
);
export const MyNavbar = () => {
return (
<Box css={{
maxW: "100%"
}}>
<Navbar isBordered variant="floating">
<Navbar.Brand>
<AcmeLogo/>
<Text b color="inherit" hideIn="xs">
ACME
</Text>
</Navbar.Brand>
<Navbar.Content hideIn="xs" variant="highlight-rounded">
<Navbar.Link href="#">Features</Navbar.Link>
<Navbar.Link isActive href="#">Customers</Navbar.Link>
<Navbar.Link href="#">Pricing</Navbar.Link>
<Navbar.Link href="#">Company</Navbar.Link>
</Navbar.Content>
<Navbar.Content>
<Navbar.Link color="inherit" href="#">
Login
</Navbar.Link>
<Navbar.Item>
<Button auto flat as={Link} href="#">
Sign Up
</Button>
</Navbar.Item>
</Navbar.Content>
</Navbar>
</Box>
);
}
This component represents the navbar in my project.
"use client";
import * as React from "react";
import {NextUIProvider} from "@nextui-org/react";
export function Providers({children}) {
return (
<NextUIProvider>
{children}
</NextUIProvider>
);
}
This component sets up the providers for the app.
import './globals.css'
import {Inter} from 'next/font/google'
import {MyNavbar} from "@/components/navbar";
import {Providers} from "@/app/provider";
const inter = Inter({subsets: ['latin']})
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({children}) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>
<MyNavbar/>
{children}
</Providers>
</body>
</html>
)
}
This layout includes the global styles and components for the app.
Upon first opening the website, it appeared like this. [enter image description here]
After some adjustments, the website transformed into this. (https://i.stack.imgur.com/hLuXL.png)
If you are facing issues with rendering, make sure to enable CSS from the beginning.