feat: update layout, add copy key

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

@@ -10,8 +10,8 @@ type Props = {
 const BucketCard = ({ data }: Props) => {
   return (
     <div className="card card-body p-6">
-      <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">
+      <div className="grid grid-cols-2 items-start gap-4 p-2 pb-0">
+        <div className="flex flex-row items-start gap-x-3 col-span-2">
           <ArchiveIcon size={28} className="shrink-0" />
 
           <p className="text-xl font-medium truncate">
@@ -38,7 +38,7 @@ const BucketCard = ({ data }: Props) => {
         </div>
       </div>
 
-      <div className="mt-1 flex flex-row justify-end gap-4">
+      <div className="flex flex-row justify-end gap-4">
         <Button href={`/buckets/${data.id}`}>Manage</Button>
         {/* <Button color="primary">Browse</Button> */}
       </div>

src/pages/buckets/page.tsx

@@ -3,9 +3,24 @@ import { useBuckets } from "./hooks";
 import { Input } from "react-daisyui";
 import BucketCard from "./components/bucket-card";
 import CreateBucketDialog from "./components/create-bucket-dialog";
+import { useMemo, useState } from "react";
 
 const BucketsPage = () => {
   const { data } = useBuckets();
+  const [search, setSearch] = useState("");
+
+  const items = useMemo(() => {
+    if (!search?.length) {
+      return data;
+    }
+
+    const q = search.toLowerCase();
+    return data?.filter(
+      (bucket) =>
+        bucket.id.includes(q) ||
+        bucket.globalAliases.find((alias) => alias.includes(q))
+    );
+  }, [data, search]);
 
   return (
     <div className="container">
@@ -13,13 +28,17 @@ const BucketsPage = () => {
 
       <div>
         <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-          <Input placeholder="Search..." />
+          <Input
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
           <div className="flex-1" />
           <CreateBucketDialog />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-stretch mt-4 md:mt-8">
-          {data?.map((bucket) => (
+          {items?.map((bucket) => (
             <BucketCard key={bucket.id} data={bucket} />
           ))}
         </div>