feat: add keys & bucket permissions management

src/pages/buckets/components/bucket-card.tsx

@@ -10,33 +10,35 @@ type Props = {
 const BucketCard = ({ data }: Props) => {
   return (
     <div className="card card-body p-6">
-      <div className="flex flex-row items-start gap-4 p-2 pb-0">
-        <ArchiveIcon size={28} />
+      <div className="grid grid-cols-2 md:grid-cols-3 items-start gap-4 p-2 pb-0">
+        <div className="flex flex-row items-start gap-x-3 col-span-2 md:col-span-1">
+          <ArchiveIcon size={28} className="shrink-0" />
 
-        <div className="flex-1">
-          <p className="text-xl font-medium">
+          <p className="text-xl font-medium truncate">
             {data.globalAliases?.join(", ")}
           </p>
         </div>
 
-        <div className="flex-1">
+        <div>
           <p className="text-sm flex items-center gap-1">
             <ChartPie className="inline" size={16} />
             Usage
           </p>
-          <p className="text-2xl font-medium">{readableBytes(data.bytes)}</p>
+          <p className="text-xl font-medium mt-1">
+            {readableBytes(data.bytes)}
+          </p>
         </div>
 
-        <div className="flex-1">
+        <div>
           <p className="text-sm flex items-center gap-1">
             <ChartScatter className="inline" size={16} />
             Objects
           </p>
-          <p className="text-2xl font-medium">{data.objects}</p>
+          <p className="text-xl font-medium mt-1">{data.objects}</p>
         </div>
       </div>
 
-      <div className="mt-4 flex flex-row justify-end gap-4">
+      <div className="mt-1 flex flex-row justify-end gap-4">
         <Button href={`/buckets/${data.id}`}>Manage</Button>
         {/* <Button color="primary">Browse</Button> */}
       </div>