89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Glow } from './Glow';
|
|
import { Surface } from './Surface';
|
|
|
|
export interface ProfileHeroProps {
|
|
children: ReactNode;
|
|
glowColor?: 'primary' | 'aqua' | 'purple' | 'amber';
|
|
variant?: 'default' | 'muted';
|
|
}
|
|
|
|
export const ProfileHero = ({ children, glowColor = 'primary', variant = 'default' }: ProfileHeroProps) => {
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
bg={variant === 'muted' ? 'var(--ui-color-bg-surface)' : 'var(--ui-color-bg-base)'}
|
|
style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
|
|
>
|
|
<Glow color={glowColor} size="xl" opacity={0.1} position="top-right" />
|
|
<Box padding={{ base: 6, md: 10 }} position="relative" zIndex={10}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface ProfileAvatarProps {
|
|
children: ReactNode;
|
|
badge?: ReactNode;
|
|
}
|
|
|
|
export const ProfileAvatar = ({ children, badge }: ProfileAvatarProps) => {
|
|
return (
|
|
<Box position="relative">
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
padding={1}
|
|
style={{ border: '1px solid var(--ui-color-border-default)' }}
|
|
>
|
|
{children}
|
|
</Surface>
|
|
{badge && (
|
|
<Box
|
|
position="absolute"
|
|
bottom={-2}
|
|
right={-2}
|
|
width={10}
|
|
height={10}
|
|
rounded="xl"
|
|
bg="var(--ui-color-intent-telemetry)"
|
|
style={{ border: '2px solid var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
|
>
|
|
{badge}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface ProfileStatsGroupProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const ProfileStatsGroup = ({ children }: ProfileStatsGroupProps) => {
|
|
return (
|
|
<Box display="flex" gap={4} marginTop={4}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export interface ProfileStatProps {
|
|
label: string;
|
|
value: string | number;
|
|
intent?: 'primary' | 'telemetry' | 'warning' | 'low';
|
|
}
|
|
|
|
import { Text } from './Text';
|
|
|
|
export const ProfileStat = ({ label, value, intent = 'low' }: ProfileStatProps) => {
|
|
return (
|
|
<Box>
|
|
<Text size="xs" variant="low" uppercase block>{label}</Text>
|
|
<Text size="sm" weight="bold" variant={intent} font="mono">{value}</Text>
|
|
</Box>
|
|
);
|
|
};
|