-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
dev: Simplified navigation component with context
- Loading branch information
1 parent
ee5274c
commit a66487d
Showing
10 changed files
with
191 additions
and
395 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 23 additions & 29 deletions
52
packages/ui/src/components/Navigation/NavigationExtended.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,36 @@ | ||
| import { Navbar, NavbarContent } from '@nextui-org/react'; | ||
| import { twColors } from '@do-ob/ui/utility'; | ||
| import { clsx, clmg } from '@do-ob/core'; | ||
| import type { NavigationProps } from './Navigation'; | ||
| import type { NavigationProps } from './data/NavigationContext'; | ||
| import { NavigationPart_Brand } from './parts/NavigationPart_Brand'; | ||
| import { NavigationPart_Links } from './parts/NavigationPart_Links'; | ||
| import { NavigationPart_Actions } from './parts/NavigationPart_Actions'; | ||
| import { NavigationProvider } from './data/NavigationProvider'; | ||
|
|
||
| export function NavigationExtended({ | ||
| title, | ||
| color, | ||
| links, | ||
| className, | ||
| search, | ||
| modeToggle, | ||
| socials, | ||
| }: NavigationProps) { | ||
|
|
||
| const [ colors ] = twColors(color); | ||
| export function NavigationExtended(props: NavigationProps) { | ||
|
|
||
| return ( | ||
| <Navbar | ||
| className={clmg(clsx(color && colors, 'relative border-b-1 border-b-foreground-200/50', className))} | ||
| height="4rem" | ||
| > | ||
| <NavbarContent justify="start"> | ||
| <NavigationPart_Brand title={title} /> | ||
| </NavbarContent> | ||
| <NavigationProvider {...props}> | ||
| {({ color, colors, className }) => ( | ||
| <Navbar | ||
| className={clmg(clsx(color && colors, 'relative border-b-1 border-b-foreground-200/50', className))} | ||
| height="4rem" | ||
| > | ||
| <NavbarContent justify="start"> | ||
| <NavigationPart_Brand /> | ||
| </NavbarContent> | ||
|
|
||
| <NavbarContent justify="start"> | ||
| <NavigationPart_Links links={links} colors={colors} /> | ||
| </NavbarContent> | ||
| <NavbarContent justify="start"> | ||
| <NavigationPart_Links /> | ||
| </NavbarContent> | ||
|
|
||
| <NavbarContent justify="end"> | ||
| <div className="max-w-64"> | ||
| <NavigationPart_Actions search={search} modeToggle={modeToggle} socials={socials} /> | ||
| </div> | ||
| </NavbarContent> | ||
| <NavbarContent justify="end"> | ||
| <div className="max-w-64"> | ||
| <NavigationPart_Actions /> | ||
| </div> | ||
| </NavbarContent> | ||
|
|
||
| </Navbar> | ||
| </Navbar> | ||
| )} | ||
| </NavigationProvider> | ||
| ); | ||
| } |
48 changes: 20 additions & 28 deletions
48
packages/ui/src/components/Navigation/NavigationIsland.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,31 @@ | ||
| import { Navbar, NavbarContent } from '@nextui-org/react'; | ||
| import { twColors } from '@do-ob/ui/utility'; | ||
| import { clsx, clmg } from '@do-ob/core'; | ||
|
|
||
| import type { NavigationProps } from './Navigation'; | ||
| import type { NavigationProps } from './data/NavigationContext'; | ||
| import { NavigationProvider } from './data/NavigationProvider'; | ||
| import { NavigationPart_Brand } from './parts/NavigationPart_Brand'; | ||
| import { NavigationPart_Links } from './parts/NavigationPart_Links'; | ||
| import { NavigationPart_Actions } from './parts/NavigationPart_Actions'; | ||
|
|
||
| export function NavigationIsland({ | ||
| title, | ||
| logo, | ||
| color, | ||
| links, | ||
| className, | ||
| search, | ||
| modeToggle, | ||
| socials, | ||
| classNames = {} | ||
| }: NavigationProps) { | ||
|
|
||
| const [ colors ] = twColors(color); | ||
| export function NavigationIsland(props: NavigationProps) { | ||
|
|
||
| return ( | ||
| <Navbar className="items-center justify-center bg-transparent backdrop-blur-none backdrop-filter-none" height="5rem"> | ||
| <NavbarContent justify="start" className="flex items-center"> | ||
| <NavigationPart_Brand title={title} logo={logo} logoClassName={classNames.logo} /> | ||
| </NavbarContent> | ||
| <NavbarContent justify="center"> | ||
| <div className={clmg(clsx(color && colors, 'flex rounded-full border-1 border-foreground-200/50 px-4', className))}> | ||
| <NavigationPart_Links links={links} colors={colors} /> | ||
| </div> | ||
| </NavbarContent> | ||
| <NavbarContent justify="end"> | ||
| <NavigationPart_Actions search={search} modeToggle={modeToggle} socials={socials} /> | ||
| </NavbarContent> | ||
| </Navbar> | ||
| <NavigationProvider {...props}> | ||
| {({ color, colors, className }) => ( | ||
| <Navbar className="items-center justify-center bg-transparent backdrop-blur-none backdrop-filter-none" height="5rem"> | ||
| <NavbarContent justify="start" className="flex items-center"> | ||
| <NavigationPart_Brand /> | ||
| </NavbarContent> | ||
| <NavbarContent justify="center"> | ||
| <div className={clmg(clsx(color && colors, 'flex rounded-full border-1 border-foreground-200/50 px-4', className))}> | ||
| <NavigationPart_Links /> | ||
| </div> | ||
| </NavbarContent> | ||
| <NavbarContent justify="end"> | ||
| <NavigationPart_Actions /> | ||
| </NavbarContent> | ||
| </Navbar> | ||
| )} | ||
| </NavigationProvider> | ||
| ); | ||
| } |
53 changes: 23 additions & 30 deletions
53
packages/ui/src/components/Navigation/NavigationStandard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
packages/ui/src/components/Navigation/data/NavigationContext.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| 'use client'; | ||
|
|
||
| import { Link, SocialLinks, ThemeColor } from '@do-ob/ui/types'; | ||
| import { createContext } from 'react'; | ||
|
|
||
| /** | ||
| * Context properties for the do-ob ui provider | ||
| */ | ||
| export interface NavigationProps { | ||
| /** | ||
| * The brand title to display | ||
| */ | ||
| title?: string; | ||
|
|
||
| /** | ||
| * The brand image to display | ||
| */ | ||
| logo?: string; | ||
|
|
||
| /** | ||
| * The theme color of the navigation | ||
| */ | ||
| color?: ThemeColor; | ||
|
|
||
| /** | ||
| * The links of the navigation | ||
| */ | ||
| links?: Link[]; | ||
|
|
||
| /** | ||
| * Class name for the navigation | ||
| */ | ||
| className?: string; | ||
|
|
||
| /** | ||
| * The search form action URL | ||
| */ | ||
| search?: string; | ||
|
|
||
| /** | ||
| * Enable the dark mode toggle | ||
| */ | ||
| modeToggle?: boolean; | ||
|
|
||
| /** | ||
| * The social links of the navigation | ||
| */ | ||
| socials?: SocialLinks; | ||
|
|
||
| /** | ||
| * Class names to modify. | ||
| */ | ||
| classNames?: { | ||
| /** | ||
| * The logo image class name | ||
| */ | ||
| logo?: string; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * The context interface | ||
| */ | ||
| export interface NavigationContextProps extends NavigationProps { | ||
| /** | ||
| * Compiled tailwind color classes | ||
| */ | ||
| colors: [full: string, bg: string, text: string]; | ||
| } | ||
|
|
||
| /** | ||
| * Default properties for the do-ob ui context | ||
| */ | ||
| export const NavigationProps: NavigationContextProps = { | ||
| colors: [ '', '', '' ], | ||
| }; | ||
|
|
||
| /** | ||
| * The do-ob user interface (ui) context | ||
| */ | ||
| export const NavigationContext = createContext<NavigationContextProps>(NavigationProps); |
25 changes: 25 additions & 0 deletions
25
packages/ui/src/components/Navigation/data/NavigationProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| 'use client'; | ||
|
|
||
| import { twColors } from '@do-ob/ui/utility'; | ||
| import { NavigationContext, NavigationContextProps, NavigationProps } from './NavigationContext'; | ||
|
|
||
| export interface NavigationProviderProps extends NavigationProps { | ||
| children: ((props: NavigationContextProps) => React.ReactNode )| React.ReactNode; | ||
| } | ||
|
|
||
| export function NavigationProvider({ | ||
| children, | ||
| ...props | ||
| }: NavigationProviderProps) { | ||
|
|
||
| const value = { | ||
| ...props, | ||
| colors: twColors(props.color), | ||
| }; | ||
|
|
||
| return ( | ||
| <NavigationContext.Provider value={value}> | ||
| {typeof children === 'function' ? children(value) : children} | ||
| </NavigationContext.Provider> | ||
| ); | ||
| } |
Oops, something went wrong.