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
26 lines
797 B
TypeScript
26 lines
797 B
TypeScript
import React from 'react';
|
|
import { Box, as, toRem } from 'folds';
|
|
import * as css from './TypingIndicator.css';
|
|
|
|
export type TypingIndicatorProps = {
|
|
size?: '300' | '400';
|
|
disableAnimation?: boolean;
|
|
};
|
|
|
|
export const TypingIndicator = as<'div', TypingIndicatorProps>(
|
|
({ size, disableAnimation, style, ...props }, ref) => (
|
|
<Box
|
|
as="span"
|
|
alignItems="Center"
|
|
shrink="No"
|
|
style={{ gap: toRem(size === '300' ? 1 : 2), ...style }}
|
|
{...props}
|
|
ref={ref}
|
|
>
|
|
<span className={css.TypingDot({ size, index: '0', animated: !disableAnimation })} />
|
|
<span className={css.TypingDot({ size, index: '1', animated: !disableAnimation })} />
|
|
<span className={css.TypingDot({ size, index: '2', animated: !disableAnimation })} />
|
|
</Box>
|
|
),
|
|
);
|