40 lines
959 B
TypeScript
40 lines
959 B
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Icon } from './Icon';
|
|
import { Image as ImageIcon } from 'lucide-react';
|
|
|
|
export interface ImagePlaceholderProps {
|
|
width?: string | number;
|
|
height?: string | number;
|
|
animate?: 'pulse' | 'none' | 'spin';
|
|
aspectRatio?: string;
|
|
}
|
|
|
|
export const ImagePlaceholder = ({
|
|
width = '100%',
|
|
height = '100%',
|
|
animate = 'pulse',
|
|
aspectRatio
|
|
}: ImagePlaceholderProps) => {
|
|
return (
|
|
<Box
|
|
width={width}
|
|
height={height}
|
|
aspectRatio={aspectRatio}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
bg="var(--ui-color-bg-surface-muted)"
|
|
style={{ borderRadius: 'var(--ui-radius-md)' }}
|
|
>
|
|
<Icon
|
|
icon={ImageIcon}
|
|
size={8}
|
|
intent="low"
|
|
animate={animate === 'spin' ? 'spin' : 'none'}
|
|
className={animate === 'pulse' ? 'animate-pulse' : ''}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|