mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-13 16:13:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add compact variant to upload card

Browse source
This commit is contained in:
Ajay Bura 2024-12-14 21:13:24 +05:30
parent fa199dfeae
commit ff371eef8d
2 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/components/upload-card/UploadCard.css.ts
View file

@ -17,6 +17,11 @@ export const UploadCard = recipe({
borderWidth: config.borderWidth.B300, borderWidth: config.borderWidth.B300,
}, },
}, },
compact: {
true: {
padding: config.space.S100,
},
},
}, },
defaultVariants: { defaultVariants: {
radii: '400', radii: '400',

29
src/app/components/upload-card/UploadCard.tsx
View file

@ -12,8 +12,13 @@ type UploadCardProps = {
}; };
export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>( export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>(
({ before, after, children, bottom, radii, outlined }, ref) => ( ({ before, after, children, bottom, radii, outlined, compact }, ref) => (
<Box className={css.UploadCard({ radii, outlined })} direction="Column" gap="200" ref={ref}> <Box
className={css.UploadCard({ radii, outlined, compact })}
direction="Column"
gap="200"
ref={ref}
>
<Box alignItems="Center" gap="200"> <Box alignItems="Center" gap="200">
{before} {before}
<Box alignItems="Center" grow="Yes" gap="200"> <Box alignItems="Center" grow="Yes" gap="200">
@ -33,7 +38,7 @@ type UploadCardProgressProps = {
export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) { export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
return ( return (
<Box direction="Column" gap="200"> <Box grow="Yes" direction="Column" gap="200">
<ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} /> <ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} />
<Box alignItems="Center" justifyContent="SpaceBetween"> <Box alignItems="Center" justifyContent="SpaceBetween">
<Badge variant="Secondary" fill="Solid" radii="Pill"> <Badge variant="Secondary" fill="Solid" radii="Pill">
@ -49,6 +54,24 @@ export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgress
); );
} }
export function CompactUploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
return (
<Box grow="Yes" gap="200" alignItems="Center">
<Badge variant="Secondary" fill="Solid" radii="Pill">
<Text size="L400">{`${Math.round(percent(0, totalBytes, sentBytes))}%`}</Text>
</Badge>
<Box grow="Yes" direction="Column">
<ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} />
</Box>
<Badge variant="Secondary" fill="Soft" radii="Pill">
<Text size="L400">
{bytesToSize(sentBytes)} / {bytesToSize(totalBytes)}
</Text>
</Badge>
</Box>
);
}
type UploadCardErrorProps = { type UploadCardErrorProps = {
children: ReactNode; children: ReactNode;
}; };