-
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.
- Loading branch information
1 parent
85d5d29
commit 26dfe27
Showing
12 changed files
with
2,968 additions
and
401 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
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
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
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
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
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
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,54 +1,20 @@ | ||
| import { cn } from '@do-ob/ui/utility'; | ||
| import { Brand, BrandProps, Navigation, NavigationProps } from '@do-ob/ui/widgets'; | ||
| import type { HeaderProps } from './Header.types'; | ||
|
|
||
| export interface HeaderProps { | ||
| /** | ||
| * Branding properties. | ||
| */ | ||
| brand?: BrandProps; | ||
|
|
||
| /** | ||
| * Navigation properties. | ||
| */ | ||
| navigation?: NavigationProps; | ||
|
|
||
| /** | ||
| * Maximum width of the header. | ||
| */ | ||
| maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; | ||
| } | ||
| const variants: Record<NonNullable<HeaderProps['variant']>, () => Promise<React.ComponentType<HeaderProps>>> = { | ||
| standard: async () => (await import('./HeaderStandard')).HeaderStandard, | ||
| extended: async () => (await import('./HeaderExtended')).HeaderExtended, | ||
| }; | ||
|
|
||
| const maxWidthScreenStyles = { | ||
| sm: 'max-w-screen-sm', | ||
| md: 'max-w-screen-md', | ||
| lg: 'max-w-screen-lg', | ||
| xl: 'max-w-screen-xl', | ||
| '2xl': 'max-w-screen-2xl', | ||
| const getVariant = async (variant: NonNullable<HeaderProps['variant']>) => { | ||
| return (await variants[variant]()); | ||
| }; | ||
|
|
||
| export function Header({ | ||
| brand, | ||
| navigation, | ||
| maxWidth = '2xl', | ||
| className, | ||
| export async function Header({ | ||
| variant = 'standard', | ||
| ...props | ||
| }: HeaderProps & React.HTMLAttributes<HTMLDivElement>) { | ||
| return ( | ||
| <header | ||
| className={cn( | ||
| 'flex w-full items-center justify-center', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className={cn( | ||
| 'flex w-full items-center justify-center gap-4 px-6 py-4', | ||
| maxWidthScreenStyles[maxWidth] | ||
| )}> | ||
| <Brand {...brand}/> | ||
| <Navigation {...navigation} style={{ flex: 2 }}/> | ||
| <div className="size-full bg-green-500" style={{ flex: 1 }}> </div> | ||
| </div> | ||
| </header> | ||
| ); | ||
|
|
||
| const HeaderComponent = await getVariant(variant); | ||
|
|
||
| return <HeaderComponent {...props} />; | ||
| } |
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,23 @@ | ||
| import type { BrandProps, NavigationProps } from '@do-ob/ui/widgets'; | ||
|
|
||
| export interface HeaderProps { | ||
| /** | ||
| * Branding properties. | ||
| */ | ||
| brand?: BrandProps; | ||
|
|
||
| /** | ||
| * The variant of the header. | ||
| */ | ||
| variant?: 'standard' | 'extended'; | ||
|
|
||
| /** | ||
| * Navigation properties. | ||
| */ | ||
| navigation?: NavigationProps; | ||
|
|
||
| /** | ||
| * Maximum width of the header. | ||
| */ | ||
| maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'; | ||
| } |
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,38 @@ | ||
| import { cn } from '@do-ob/ui/utility'; | ||
| import { Brand, Navigation } from '@do-ob/ui/widgets'; | ||
| import type { HeaderProps } from './Header.types'; | ||
|
|
||
| const maxWidthScreenStyles = { | ||
| sm: 'max-w-screen-sm', | ||
| md: 'max-w-screen-md', | ||
| lg: 'max-w-screen-lg', | ||
| xl: 'max-w-screen-xl', | ||
| '2xl': 'max-w-screen-2xl', | ||
| }; | ||
|
|
||
| export function HeaderExtended({ | ||
| brand, | ||
| navigation, | ||
| maxWidth = '2xl', | ||
| className, | ||
| ...props | ||
| }: HeaderProps & React.HTMLAttributes<HTMLDivElement>) { | ||
| return ( | ||
| <header | ||
| className={cn( | ||
| 'flex w-full items-center justify-center gap-4 px-6 py-4', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className={cn( | ||
| 'grid w-full grid-cols-2 grid-rows-2 items-center justify-center [grid-template-areas:"brand_tools""nav_nav"]', | ||
| maxWidthScreenStyles[maxWidth] | ||
| )}> | ||
| <Brand href={brand?.href ?? '/'} className="[grid-area:brand]" {...brand}/> | ||
| <Navigation {...navigation} className="[grid-area:nav]" style={{ flex: 2 }}/> | ||
| <div className="size-full bg-green-500 [grid-area:tools]" style={{ flex: 1 }}> </div> | ||
| </div> | ||
| </header> | ||
| ); | ||
| } |
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,38 @@ | ||
| import { cn } from '@do-ob/ui/utility'; | ||
| import { Brand, Navigation } from '@do-ob/ui/widgets'; | ||
| import type { HeaderProps } from './Header.types'; | ||
|
|
||
| const maxWidthScreenStyles = { | ||
| sm: 'max-w-screen-sm', | ||
| md: 'max-w-screen-md', | ||
| lg: 'max-w-screen-lg', | ||
| xl: 'max-w-screen-xl', | ||
| '2xl': 'max-w-screen-2xl', | ||
| }; | ||
|
|
||
| export function HeaderStandard({ | ||
| brand, | ||
| navigation, | ||
| maxWidth = '2xl', | ||
| className, | ||
| ...props | ||
| }: HeaderProps & React.HTMLAttributes<HTMLDivElement>) { | ||
| return ( | ||
| <header | ||
| className={cn( | ||
| 'flex w-full items-center justify-center', | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <div className={cn( | ||
| 'flex w-full items-center justify-center gap-4 px-6 py-4', | ||
| maxWidthScreenStyles[maxWidth] | ||
| )}> | ||
| <Brand href={brand?.href ?? '/'} {...brand}/> | ||
| <Navigation {...navigation} style={{ flex: 2 }}/> | ||
| <div className="size-full bg-green-500" style={{ flex: 1 }}> </div> | ||
| </div> | ||
| </header> | ||
| ); | ||
| } |
Oops, something went wrong.