56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
|
import type { CSSProperties, ReactNode } from 'react';
|
|
|
|
import { EmptySvg } from './empty-svg';
|
|
import * as styles from './index.css';
|
|
|
|
type ContainerStyleProps = {
|
|
width?: string;
|
|
height?: string;
|
|
fontSize?: string;
|
|
};
|
|
export type EmptyContentProps = {
|
|
containerStyle?: ContainerStyleProps;
|
|
title?: ReactNode;
|
|
description?: ReactNode;
|
|
descriptionStyle?: CSSProperties;
|
|
};
|
|
|
|
export const Empty = ({
|
|
containerStyle,
|
|
title,
|
|
description,
|
|
descriptionStyle,
|
|
}: EmptyContentProps) => {
|
|
const cssVar = assignInlineVars({
|
|
[styles.svgWidth]: containerStyle?.width,
|
|
[styles.svgHeight]: containerStyle?.height,
|
|
[styles.svgFontSize]: containerStyle?.fontSize,
|
|
});
|
|
return (
|
|
<div className={styles.emptyContainer}>
|
|
<div style={{ color: 'var(--affine-black)' }}>
|
|
<EmptySvg className={styles.emptySvg} style={cssVar} />
|
|
</div>
|
|
{title && (
|
|
<p
|
|
style={{
|
|
marginTop: '30px',
|
|
color: 'var(--affine-text-primary-color)',
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{title}
|
|
</p>
|
|
)}
|
|
{description && (
|
|
<p style={{ marginTop: title ? '8px' : '30px', ...descriptionStyle }}>
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Empty;
|