51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Box, Text } from "@saleor/macaw-ui/next";
|
|
import React, { PropsWithChildren } from "react";
|
|
|
|
import useAppChannel from "../AppChannelContext";
|
|
import AppChannelSelect from "../AppChannelSelect";
|
|
import { TopNavLink } from "./TopNavLink";
|
|
import { TopNavWrapper } from "./TopNavWrapper";
|
|
|
|
interface TopNavProps {
|
|
title: string | React.ReactNode;
|
|
href?: string;
|
|
withoutBorder?: boolean;
|
|
isAlignToRight?: boolean;
|
|
}
|
|
|
|
export const Root: React.FC<PropsWithChildren<TopNavProps>> = ({
|
|
title,
|
|
href,
|
|
withoutBorder = false,
|
|
isAlignToRight = true,
|
|
children,
|
|
}) => {
|
|
const { availableChannels, channel, isPickerActive, setChannel } =
|
|
useAppChannel(false);
|
|
|
|
return (
|
|
<TopNavWrapper withoutBorder={withoutBorder}>
|
|
{href && <TopNavLink to={href} />}
|
|
<Box __flex={isAlignToRight ? 1 : 0} __minWidth="max-content">
|
|
<Text variant="title" size="small">
|
|
{title}
|
|
</Text>
|
|
</Box>
|
|
<Box
|
|
display="flex"
|
|
flexWrap="nowrap"
|
|
height="100%"
|
|
__flex={isAlignToRight ? "initial" : 1}
|
|
>
|
|
{isPickerActive && (
|
|
<AppChannelSelect
|
|
channels={availableChannels}
|
|
selectedChannelId={channel?.id}
|
|
onChannelSelect={setChannel}
|
|
/>
|
|
)}
|
|
{children}
|
|
</Box>
|
|
</TopNavWrapper>
|
|
);
|
|
};
|