From ff371eef8d29c7f42dfb67c56277252aa3f87fe0 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 14 Dec 2024 21:13:24 +0530
Subject: [PATCH] add compact variant to upload card

---
 .../components/upload-card/UploadCard.css.ts  |  5 ++++
 src/app/components/upload-card/UploadCard.tsx | 29 +++++++++++++++++--
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/app/components/upload-card/UploadCard.css.ts b/src/app/components/upload-card/UploadCard.css.ts
index bfe2e091..ad3caf10 100644
--- a/src/app/components/upload-card/UploadCard.css.ts
+++ b/src/app/components/upload-card/UploadCard.css.ts
@@ -17,6 +17,11 @@ export const UploadCard = recipe({
         borderWidth: config.borderWidth.B300,
       },
     },
+    compact: {
+      true: {
+        padding: config.space.S100,
+      },
+    },
   },
   defaultVariants: {
     radii: '400',
diff --git a/src/app/components/upload-card/UploadCard.tsx b/src/app/components/upload-card/UploadCard.tsx
index cf91435a..1e2edb96 100644
--- a/src/app/components/upload-card/UploadCard.tsx
+++ b/src/app/components/upload-card/UploadCard.tsx
@@ -12,8 +12,13 @@ type UploadCardProps = {
 };
 
 export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>(
-  ({ before, after, children, bottom, radii, outlined }, ref) => (
-    <Box className={css.UploadCard({ radii, outlined })} direction="Column" gap="200" ref={ref}>
+  ({ before, after, children, bottom, radii, outlined, compact }, ref) => (
+    <Box
+      className={css.UploadCard({ radii, outlined, compact })}
+      direction="Column"
+      gap="200"
+      ref={ref}
+    >
       <Box alignItems="Center" gap="200">
         {before}
         <Box alignItems="Center" grow="Yes" gap="200">
@@ -33,7 +38,7 @@ type UploadCardProgressProps = {
 
 export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
   return (
-    <Box direction="Column" gap="200">
+    <Box grow="Yes" 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">
@@ -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 = {
   children: ReactNode;
 };