Lotus Bot
23008670f3
CI / Build & Quality Checks (push) Successful in 10m13s
- i18next 23->26 + react-i18next 15->17 - prettier 2->3, reformat all files - replace @fontsource/inter with @fontsource-variable/inter 5, update import path - domhandler 5->6 (aligns with transitive deps) - lint-staged 16->17
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import {
|
|
as,
|
|
Badge,
|
|
Box,
|
|
color,
|
|
ContainerColor,
|
|
MainColor,
|
|
Text,
|
|
Tooltip,
|
|
TooltipProvider,
|
|
toRem,
|
|
} from 'folds';
|
|
import React, { ReactNode, useId } from 'react';
|
|
import * as css from './styles.css';
|
|
import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
|
|
|
|
const PresenceToColor: Record<Presence, MainColor> = {
|
|
[Presence.Online]: 'Success',
|
|
[Presence.Unavailable]: 'Warning',
|
|
[Presence.Offline]: 'Secondary',
|
|
};
|
|
|
|
type PresenceBadgeProps = {
|
|
presence: Presence;
|
|
status?: string;
|
|
size?: '200' | '300' | '400' | '500';
|
|
};
|
|
export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
|
|
const label = usePresenceLabel();
|
|
const badgeLabelId = useId();
|
|
|
|
return (
|
|
<TooltipProvider
|
|
position="Right"
|
|
align="Center"
|
|
offset={4}
|
|
delay={200}
|
|
tooltip={
|
|
<Tooltip id={badgeLabelId}>
|
|
<Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
|
|
<Text size="L400">{label[presence]}</Text>
|
|
{status && <Text size="T200">•</Text>}
|
|
{status && <Text size="T200">{status}</Text>}
|
|
</Box>
|
|
</Tooltip>
|
|
}
|
|
>
|
|
{(triggerRef) => (
|
|
<Badge
|
|
aria-labelledby={badgeLabelId}
|
|
ref={triggerRef}
|
|
size={size}
|
|
variant={PresenceToColor[presence]}
|
|
fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
|
|
radii="Pill"
|
|
/>
|
|
)}
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
type AvatarPresenceProps = {
|
|
badge: ReactNode;
|
|
variant?: ContainerColor;
|
|
};
|
|
export const AvatarPresence = as<'div', AvatarPresenceProps>(
|
|
({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
|
|
<Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
|
|
{badge && (
|
|
<div
|
|
className={css.AvatarPresenceBadge}
|
|
style={{ backgroundColor: color[variant].Container }}
|
|
>
|
|
{badge}
|
|
</div>
|
|
)}
|
|
{children}
|
|
</Box>
|
|
),
|
|
);
|