mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-31 18:47:29 -04:00
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
|
import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds';
|
||
|
import React, { ReactNode, forwardRef } from 'react';
|
||
|
|
||
|
import * as css from './UploadCard.css';
|
||
|
import { bytesToSize } from '../../utils/common';
|
||
|
|
||
|
type UploadCardProps = {
|
||
|
before?: ReactNode;
|
||
|
children: ReactNode;
|
||
|
after?: ReactNode;
|
||
|
bottom?: ReactNode;
|
||
|
};
|
||
|
|
||
|
export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>(
|
||
|
({ before, after, children, bottom, radii }, ref) => (
|
||
|
<Box className={css.UploadCard({ radii })} direction="Column" gap="200" ref={ref}>
|
||
|
<Box alignItems="Center" gap="200">
|
||
|
{before}
|
||
|
<Box alignItems="Center" grow="Yes" gap="200">
|
||
|
{children}
|
||
|
</Box>
|
||
|
{after}
|
||
|
</Box>
|
||
|
{bottom}
|
||
|
</Box>
|
||
|
)
|
||
|
);
|
||
|
|
||
|
type UploadCardProgressProps = {
|
||
|
sentBytes: number;
|
||
|
totalBytes: number;
|
||
|
};
|
||
|
|
||
|
export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
|
||
|
return (
|
||
|
<Box direction="Column" gap="200">
|
||
|
<ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} />
|
||
|
<Box alignItems="Center" justifyContent="SpaceBetween">
|
||
|
<Badge variant="Secondary" fill="Solid" radii="Pill">
|
||
|
<Text size="L400">{`${Math.round(percent(0, totalBytes, sentBytes))}%`}</Text>
|
||
|
</Badge>
|
||
|
<Badge variant="Secondary" fill="Soft" radii="Pill">
|
||
|
<Text size="L400">
|
||
|
{bytesToSize(sentBytes)} / {bytesToSize(totalBytes)}
|
||
|
</Text>
|
||
|
</Badge>
|
||
|
</Box>
|
||
|
</Box>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
type UploadCardErrorProps = {
|
||
|
children: ReactNode;
|
||
|
};
|
||
|
|
||
|
export function UploadCardError({ children }: UploadCardErrorProps) {
|
||
|
return (
|
||
|
<Box className={css.UploadCardError} alignItems="Center" gap="300">
|
||
|
<Icon src={Icons.Warning} size="50" />
|
||
|
{children}
|
||
|
</Box>
|
||
|
);
|
||
|
}
|