diff --git a/apps/docs/content/components/navbar/bordered.raw.jsx b/apps/docs/content/components/navbar/bordered.raw.jsx new file mode 100644 index 0000000000..0d9f45e996 --- /dev/null +++ b/apps/docs/content/components/navbar/bordered.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/bordered.ts b/apps/docs/content/components/navbar/bordered.ts index 131a1d1c4f..4e025375c3 100644 --- a/apps/docs/content/components/navbar/bordered.ts +++ b/apps/docs/content/components/navbar/bordered.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./bordered.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/controlled-menu.raw.jsx b/apps/docs/content/components/navbar/controlled-menu.raw.jsx new file mode 100644 index 0000000000..129004d662 --- /dev/null +++ b/apps/docs/content/components/navbar/controlled-menu.raw.jsx @@ -0,0 +1,106 @@ +import { + Navbar, + NavbarBrand, + NavbarMenuToggle, + NavbarMenuItem, + NavbarMenu, + NavbarContent, + NavbarItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

ACME

+ + + + + + +

ACME

+ + + + Features + + + + + Customers + + + + + Integrations + + + + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/content/components/navbar/controlled-menu.ts b/apps/docs/content/components/navbar/controlled-menu.ts index bac2a98e55..40facd8ed4 100644 --- a/apps/docs/content/components/navbar/controlled-menu.ts +++ b/apps/docs/content/components/navbar/controlled-menu.ts @@ -1,106 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - - - - -

ACME

- - - - - - -

ACME

- - - - Features - - - - - Customers - - - - - Integrations - - - - - - - Login - - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - - - ); -}`; +import App from "./controlled-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/custom-active-item.raw.jsx b/apps/docs/content/components/navbar/custom-active-item.raw.jsx new file mode 100644 index 0000000000..b2f1617098 --- /dev/null +++ b/apps/docs/content/components/navbar/custom-active-item.raw.jsx @@ -0,0 +1,69 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/custom-active-item.ts b/apps/docs/content/components/navbar/custom-active-item.ts index a564688395..f62f66c256 100644 --- a/apps/docs/content/components/navbar/custom-active-item.ts +++ b/apps/docs/content/components/navbar/custom-active-item.ts @@ -1,75 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./custom-active-item.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx new file mode 100644 index 0000000000..858e009612 --- /dev/null +++ b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx @@ -0,0 +1,104 @@ +import { + Navbar, + NavbarBrand, + NavbarMenuToggle, + NavbarMenu, + NavbarMenuItem, + NavbarContent, + NavbarItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + + + + +

ACME

+ + + + + + +

ACME

+ + + + Features + + + + + Customers + + + + + Integrations + + + + + + + Login + + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/content/components/navbar/disable-menu-animation.ts b/apps/docs/content/components/navbar/disable-menu-animation.ts index a0e0382579..a485b0530f 100644 --- a/apps/docs/content/components/navbar/disable-menu-animation.ts +++ b/apps/docs/content/components/navbar/disable-menu-animation.ts @@ -1,100 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - - - - -

ACME

- - - - - - -

ACME

- - - - Features - - - - - Customers - - - - - Integrations - - - - - - - Login - - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - - - ); -}`; +import App from "./disable-menu-animation.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/disabled-blur.raw.jsx b/apps/docs/content/components/navbar/disabled-blur.raw.jsx new file mode 100644 index 0000000000..c725d9db9b --- /dev/null +++ b/apps/docs/content/components/navbar/disabled-blur.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/disabled-blur.ts b/apps/docs/content/components/navbar/disabled-blur.ts index 8f9b04eb19..b3b7865113 100644 --- a/apps/docs/content/components/navbar/disabled-blur.ts +++ b/apps/docs/content/components/navbar/disabled-blur.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./disabled-blur.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx new file mode 100644 index 0000000000..3e76a1088b --- /dev/null +++ b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/hide-on-scroll.ts b/apps/docs/content/components/navbar/hide-on-scroll.ts index 4f2372e15e..a160f6edf7 100644 --- a/apps/docs/content/components/navbar/hide-on-scroll.ts +++ b/apps/docs/content/components/navbar/hide-on-scroll.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./hide-on-scroll.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/static.raw.jsx b/apps/docs/content/components/navbar/static.raw.jsx new file mode 100644 index 0000000000..27eec0adb0 --- /dev/null +++ b/apps/docs/content/components/navbar/static.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/static.ts b/apps/docs/content/components/navbar/static.ts index 59177f7de5..1b7a00893d 100644 --- a/apps/docs/content/components/navbar/static.ts +++ b/apps/docs/content/components/navbar/static.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./static.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/usage.raw.jsx b/apps/docs/content/components/navbar/usage.raw.jsx new file mode 100644 index 0000000000..1ec1d37c9b --- /dev/null +++ b/apps/docs/content/components/navbar/usage.raw.jsx @@ -0,0 +1,52 @@ +import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/usage.ts b/apps/docs/content/components/navbar/usage.ts index c651a56f7e..1118304c37 100644 --- a/apps/docs/content/components/navbar/usage.ts +++ b/apps/docs/content/components/navbar/usage.ts @@ -1,58 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./usage.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-avatar.raw.jsx b/apps/docs/content/components/navbar/with-avatar.raw.jsx new file mode 100644 index 0000000000..ce2386a05c --- /dev/null +++ b/apps/docs/content/components/navbar/with-avatar.raw.jsx @@ -0,0 +1,85 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, + Avatar, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + return ( + + + +

ACME

+ + + + + + Features + + + + + Customers + + + + + Integrations + + + + + + + + + + + +

Signed in as

+

zoey@example.com

+ + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/with-avatar.ts b/apps/docs/content/components/navbar/with-avatar.ts index c5e11c58cd..17d3676daf 100644 --- a/apps/docs/content/components/navbar/with-avatar.ts +++ b/apps/docs/content/components/navbar/with-avatar.ts @@ -1,80 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - return ( - - - -

ACME

- - - - - - Features - - - - - Customers - - - - - Integrations - - - - - - - - - - - -

Signed in as

-

zoey@example.com

- - My Settings - Team Settings - Analytics - System - Configurations - Help & Feedback - - Log Out - - - - - - ); -}`; +import App from "./with-avatar.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx new file mode 100644 index 0000000000..8b0f82f756 --- /dev/null +++ b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx @@ -0,0 +1,320 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + Button, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export const ChevronDown = ({fill, size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const Lock = ({fill, size, height, width, ...props}) => { + const color = fill; + + return ( + + + + + + + + ); +}; + +export const Activity = ({fill, size, height, width, ...props}) => { + return ( + + + + + + + + ); +}; + +export const Flash = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const Server = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + ); +}; + +export const TagUser = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + ); +}; + +export const Scale = ({fill = "currentColor", size, height, width, ...props}) => { + return ( + + + + + ); +}; + +export default function App() { + const icons = { + chevron: , + scale: , + lock: , + activity: , + flash: , + server: , + user: , + }; + + return ( + + + +

ACME

+ + + + + + + + + + + Autoscaling + + + Usage Metrics + + + Production Ready + + + +99% Uptime + + + +Supreme Support + + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.ts b/apps/docs/content/components/navbar/with-dropdown-menu.ts index 61b4a6a4fa..e5badd5a96 100644 --- a/apps/docs/content/components/navbar/with-dropdown-menu.ts +++ b/apps/docs/content/components/navbar/with-dropdown-menu.ts @@ -1,342 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const Icons = `export const ChevronDown = ({fill, size, height, width, ...props}) => { - return ( - - - - ); -}; - -export const Lock = ({fill, size, height, width, ...props}) => { - const color = fill; - - return ( - - - - - - - - ); -}; - -export const Activity = ({fill, size, height, width, ...props}) => { - return ( - - - - - - - - ); -}; - -export const Flash = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - ); -}; - -export const Server = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - ); -}; - -export const TagUser = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - - ); -}; - - -export const Scale = ({ - fill = "currentColor", - size, - height, - width, - ...props -}) => { - return ( - - - - - ); -};`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu} from "@nextui-org/react"; -import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "./Icons.jsx"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const icons = { - chevron: , - scale: , - lock: , - activity: , - flash: , - server: , - user: , - }; - - return ( - - - -

ACME

- - - - - - - - - - - Autoscaling - - - Usage Metrics - - - Production Ready - - - +99% Uptime - - - +Supreme Support - - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - ); -}`; +import App from "./with-dropdown-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, - "/Icons.jsx": Icons, }; export default { diff --git a/apps/docs/content/components/navbar/with-menu.raw.jsx b/apps/docs/content/components/navbar/with-menu.raw.jsx new file mode 100644 index 0000000000..78320c99d5 --- /dev/null +++ b/apps/docs/content/components/navbar/with-menu.raw.jsx @@ -0,0 +1,100 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + NavbarMenuToggle, + NavbarMenu, + NavbarMenuItem, + Link, + Button, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export default function App() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const menuItems = [ + "Profile", + "Dashboard", + "Activity", + "Analytics", + "System", + "Deployments", + "My Settings", + "Team Settings", + "Help & Feedback", + "Log Out", + ]; + + return ( + + + + + +

ACME

+ + + + + + + Features + + + + + Customers + + + + + Integrations + + + + + + Login + + + + + + + {menuItems.map((item, index) => ( + + + {item} + + + ))} + + + ); +} diff --git a/apps/docs/content/components/navbar/with-menu.ts b/apps/docs/content/components/navbar/with-menu.ts index 7762007966..be734be3c5 100644 --- a/apps/docs/content/components/navbar/with-menu.ts +++ b/apps/docs/content/components/navbar/with-menu.ts @@ -1,96 +1,7 @@ -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link, Button} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; - -export default function App() { - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const menuItems = [ - "Profile", - "Dashboard", - "Activity", - "Analytics", - "System", - "Deployments", - "My Settings", - "Team Settings", - "Help & Feedback", - "Log Out", - ]; - - return ( - - - - - -

ACME

- - - - - - - Features - - - - - Customers - - - - - Integrations - - - - - - Login - - - - - - - {menuItems.map((item, index) => ( - - - {item} - - - ))} - - - ); -}`; +import App from "./with-menu.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, }; export default { diff --git a/apps/docs/content/components/navbar/with-search-input.raw.jsx b/apps/docs/content/components/navbar/with-search-input.raw.jsx new file mode 100644 index 0000000000..300f80cb51 --- /dev/null +++ b/apps/docs/content/components/navbar/with-search-input.raw.jsx @@ -0,0 +1,130 @@ +import { + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, + Input, + DropdownItem, + DropdownTrigger, + Dropdown, + DropdownMenu, + Avatar, +} from "@nextui-org/react"; + +export const AcmeLogo = () => { + return ( + + + + ); +}; + +export const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => { + return ( + + ); +}; + +export default function App() { + return ( + + + + +

ACME

+ + + + + Features + + + + + Customers + + + + + Integrations + + + + + + + } + type="search" + /> + + + + + + +

Signed in as

+

zoey@example.com

+ + My Settings + Team Settings + Analytics + System + Configurations + Help & Feedback + + Log Out + + + + + + ); +} diff --git a/apps/docs/content/components/navbar/with-search-input.ts b/apps/docs/content/components/navbar/with-search-input.ts index 871710ca62..88fc86bd2b 100644 --- a/apps/docs/content/components/navbar/with-search-input.ts +++ b/apps/docs/content/components/navbar/with-search-input.ts @@ -1,130 +1,7 @@ -const SearchIcon = `export const SearchIcon = ({ - size = 24, - strokeWidth = 1.5, - width, - height, - ...props -}) => ( - -); -`; - -const AcmeLogo = `export const AcmeLogo = () => ( - - - -);`; - -const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Input, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react"; -import {AcmeLogo} from "./AcmeLogo.jsx"; -import {SearchIcon} from "./SearchIcon.jsx"; - -export default function App() { - return ( - - - - -

ACME

- - - - - Features - - - - - Customers - - - - - Integrations - - - - - - - } - type="search" - /> - - - - - - -

Signed in as

-

zoey@example.com

- - My Settings - Team Settings - Analytics - System - Configurations - Help & Feedback - - Log Out - - - - - - ); -}`; +import App from "./with-search-input.raw.jsx?raw"; const react = { "/App.jsx": App, - "/AcmeLogo.jsx": AcmeLogo, - "/SearchIcon.jsx": SearchIcon, }; export default { diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx index d267c48d26..e949056967 100644 --- a/apps/docs/content/docs/components/navbar.mdx +++ b/apps/docs/content/docs/components/navbar.mdx @@ -44,22 +44,22 @@ NextUI exports 7 navbar-related components: @@ -117,7 +117,6 @@ If you want to remove the `open` / `close` animation, you can pass the `disableA asIframe title="With Menu" iframeInitialWidth={420} - highlightedLines="24" previewHeight="600px" iframeSrc="/examples/navbar/disable-menu-animation" files={navbarContent.disableMenuAnimation} @@ -132,7 +131,6 @@ You can use the `isMenuOpen` and `onMenuOpenChange` props to control the navbar title="Controlled Menu" iframeInitialWidth={420} previewHeight="600px" - highlightedLines="5,23-24" iframeSrc="/examples/navbar/controlled-menu" files={navbarContent.controlledMenu} /> @@ -206,7 +204,6 @@ When the `NavbarItem` is active, it will have a `data-active` attribute. You can title="Customizing the active item" previewHeight="420px" iframeSrc="/examples/navbar/custom-active-item" - highlightedLines="9-20" files={navbarContent.customActiveItem} />