86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import { LucideIcon } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Link } from './Link';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface UserDropdownProps {
|
|
children: ReactNode;
|
|
isOpen: boolean;
|
|
}
|
|
|
|
export const UserDropdown = ({ children, isOpen }: UserDropdownProps) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<Box
|
|
position="absolute"
|
|
style={{ right: 0, top: '100%', marginTop: '0.5rem', width: '14rem', zIndex: 50 }}
|
|
>
|
|
<Surface variant="muted" rounded="xl" shadow="xl" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
|
|
{children}
|
|
</Surface>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface UserDropdownHeaderProps {
|
|
children: ReactNode;
|
|
variant?: 'default' | 'demo';
|
|
}
|
|
|
|
export const UserDropdownHeader = ({ children, variant = 'default' }: UserDropdownHeaderProps) => (
|
|
<Box
|
|
padding={4}
|
|
style={{
|
|
borderBottom: '1px solid var(--ui-color-border-default)',
|
|
background: variant === 'demo' ? 'rgba(25, 140, 255, 0.05)' : 'transparent'
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
|
|
export interface UserDropdownItemProps {
|
|
icon?: LucideIcon;
|
|
label: string;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
intent?: 'primary' | 'low' | 'critical' | 'success' | 'telemetry' | 'warning';
|
|
}
|
|
|
|
export const UserDropdownItem = ({ icon, label, href, onClick, intent = 'low' }: UserDropdownItemProps) => {
|
|
const content = (
|
|
<Box display="flex" alignItems="center" gap={3} paddingX={4} paddingY={2.5} style={{ cursor: 'pointer' }}>
|
|
{icon && <Icon icon={icon} size={4} intent={intent as any} />}
|
|
<Text size="sm" variant={intent === 'critical' ? 'critical' : (intent === 'low' ? 'med' : intent as any)}>{label}</Text>
|
|
</Box>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} block underline="none" onClick={onClick}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box as="button" onClick={onClick} fullWidth style={{ textAlign: 'left', background: 'transparent', border: 'none' }}>
|
|
{content}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface UserDropdownFooterProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const UserDropdownFooter = ({ children }: UserDropdownFooterProps) => (
|
|
<Box style={{ borderTop: '1px solid var(--ui-color-border-default)' }}>
|
|
{children}
|
|
</Box>
|
|
);
|