|
- import * as React from 'react';
- import {LayoutArgs, Span, widgets} from '@tesseract-design/viewfinder-base';
-
- export type TopBarProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
- span?: Span,
- brand?: React.ReactNode,
- menuLink?: React.ReactNode,
- userLink?: React.ReactNode,
- }
-
- export const TopBar = React.forwardRef<HTMLDivElement, TopBarProps>(({
- span = Span.NORMAL,
- brand,
- menuLink,
- userLink,
- children,
- ...etcProps
- }, ref) => {
- const args = React.useMemo<LayoutArgs>(() => ({
- span,
- mainSidebarOpen: false,
- }), [span]);
-
- return (
- <div className={widgets.TopBar.Base()}>
- <div
- {...etcProps}
- ref={ref}
- >
- <div className={widgets.TopBar.Container(args)}>
- {
- Boolean(brand as unknown)
- && (
- <div>
- {brand}
- </div>
- )
- }
- <div className={widgets.TopBar.CenterContainer()}>
- {children}
- </div>
- <div className={widgets.TopBar.ActionContainer()}>
- {
- Boolean(menuLink as unknown)
- && (
- <div className={widgets.TopBar.MenuLinkContainer()}>
- {menuLink}
- </div>
- )
- }
- {
- Boolean(userLink as unknown)
- && (
- <div className={widgets.TopBar.LinkContainer()}>
- {userLink}
- </div>
- )
- }
- </div>
- </div>
- </div>
- </div>
- )
- })
-
- TopBar.displayName = 'TopBar';
|