35f0e400ad
* add pinned room events hook * room pinned message - WIP * add room event hook * fetch pinned messages before displaying * use react-query in room event hook * disable staleTime and gc to 1 hour in room event hook * use room event hook in reply component * render pinned messages * add option to pin/unpin messages * remove message base from message placeholders and add variant * display message placeholder while loading pinned messages * render pinned event error * show no pinned message placeholder * fix message placeholder flickering
36 lines
1002 B
TypeScript
36 lines
1002 B
TypeScript
import { ComplexStyleRule } from '@vanilla-extract/css';
|
|
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
|
import { ContainerColor, DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
|
|
backgroundColor: color[variant].Container,
|
|
});
|
|
|
|
export const LinePlaceholder = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
width: '100%',
|
|
height: toRem(16),
|
|
borderRadius: config.radii.R300,
|
|
},
|
|
],
|
|
variants: {
|
|
variant: {
|
|
Background: getVariant('Background'),
|
|
Surface: getVariant('Surface'),
|
|
SurfaceVariant: getVariant('SurfaceVariant'),
|
|
Primary: getVariant('Primary'),
|
|
Secondary: getVariant('Secondary'),
|
|
Success: getVariant('Success'),
|
|
Warning: getVariant('Warning'),
|
|
Critical: getVariant('Critical'),
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'SurfaceVariant',
|
|
},
|
|
});
|
|
|
|
export type LinePlaceholderVariants = RecipeVariants<typeof LinePlaceholder>;
|