111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
'use client';
|
|
import { Icon, Row } from '@umami/react-zen';
|
|
import { useNavigation } from '@/components/hooks';
|
|
import { Slash } from '@/components/icons';
|
|
import { BoardSelect } from '@/components/input/BoardSelect';
|
|
import { LinkSelect } from '@/components/input/LinkSelect';
|
|
import { PixelSelect } from '@/components/input/PixelSelect';
|
|
import { TeamsButton } from '@/components/input/TeamsButton';
|
|
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
|
|
|
|
export function TopNav() {
|
|
const { websiteId, linkId, pixelId, boardId, teamId, router, renderUrl } = useNavigation();
|
|
|
|
const handleWebsiteChange = (value: string) => {
|
|
router.push(renderUrl(`/websites/${value}`));
|
|
};
|
|
|
|
const handleLinkChange = (value: string) => {
|
|
router.push(renderUrl(`/links/${value}`));
|
|
};
|
|
|
|
const handlePixelChange = (value: string) => {
|
|
router.push(renderUrl(`/pixels/${value}`));
|
|
};
|
|
|
|
const handleBoardChange = (value: string) => {
|
|
router.push(renderUrl(`/boards/${value}`));
|
|
};
|
|
|
|
return (
|
|
<Row
|
|
position="sticky"
|
|
top="0"
|
|
alignItems="center"
|
|
justifyContent="flex-start"
|
|
paddingY="2"
|
|
paddingX="3"
|
|
paddingRight="5"
|
|
width="100%"
|
|
zIndex={100}
|
|
backgroundColor="surface-raised"
|
|
>
|
|
<Row alignItems="center">
|
|
<TeamsButton />
|
|
{(websiteId || linkId || pixelId || boardId) && (
|
|
<>
|
|
<Icon size="sm" color="muted" style={{ opacity: 0.7, margin: '0 6px' }}>
|
|
<Slash />
|
|
</Icon>
|
|
{websiteId && (
|
|
<WebsiteSelect
|
|
websiteId={websiteId}
|
|
teamId={teamId}
|
|
onChange={handleWebsiteChange}
|
|
buttonProps={{
|
|
variant: 'quiet',
|
|
style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
|
|
}}
|
|
/>
|
|
)}
|
|
{linkId && (
|
|
<LinkSelect
|
|
linkId={linkId}
|
|
teamId={teamId}
|
|
onChange={handleLinkChange}
|
|
buttonProps={{
|
|
variant: 'quiet',
|
|
style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
|
|
}}
|
|
/>
|
|
)}
|
|
{pixelId && (
|
|
<PixelSelect
|
|
pixelId={pixelId}
|
|
teamId={teamId}
|
|
onChange={handlePixelChange}
|
|
buttonProps={{
|
|
variant: 'quiet',
|
|
style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
|
|
}}
|
|
/>
|
|
)}
|
|
{boardId && (
|
|
<BoardSelect
|
|
boardId={boardId}
|
|
teamId={teamId}
|
|
onChange={handleBoardChange}
|
|
buttonProps={{
|
|
variant: 'quiet',
|
|
style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</Row>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: -16,
|
|
left: 0,
|
|
right: 0,
|
|
height: 16,
|
|
background: 'linear-gradient(to bottom, var(--surface-raised), transparent)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
</Row>
|
|
);
|
|
}
|