update channel

src/app/channel/components/mutedItem.tsx

@@ -0,0 +1,78 @@
+import { DEFAULT_AVATAR } from '@lume/stores/constants';
+import { useProfile } from '@lume/utils/hooks/useProfile';
+import { shortenKey } from '@lume/utils/shortenKey';
+
+import { useState } from 'react';
+
+export default function MutedItem({ data }: { data: any }) {
+  const { user, isError, isLoading } = useProfile(data.content);
+  const [status, setStatus] = useState(data.status);
+
+  const unmute = async () => {
+    const { updateItemInBlacklist } = await import('@lume/utils/storage');
+    const res = await updateItemInBlacklist(data.content, 0);
+    if (res) {
+      setStatus(0);
+    }
+  };
+
+  const mute = async () => {
+    const { updateItemInBlacklist } = await import('@lume/utils/storage');
+    const res = await updateItemInBlacklist(data.content, 1);
+    if (res) {
+      setStatus(1);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      {isError || isLoading ? (
+        <>
+          <div className="flex items-center gap-1.5">
+            <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800"></div>
+            <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
+              <div className="h-3 w-16 animate-pulse bg-zinc-800"></div>
+              <div className="h-2 w-10 animate-pulse bg-zinc-800"></div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex items-center gap-1.5">
+            <div className="relative h-9 w-9 shrink rounded-md">
+              <img
+                src={user?.picture || DEFAULT_AVATAR}
+                alt={data.content}
+                className="h-9 w-9 rounded-md object-cover"
+                loading="lazy"
+              />
+            </div>
+            <div className="flex w-full flex-1 flex-col items-start gap-0.5 text-start">
+              <span className="truncate text-sm font-medium leading-none text-zinc-200">
+                {user?.display_name || user?.name}
+              </span>
+              <span className="text-xs leading-none text-zinc-400">{shortenKey(data.content)}</span>
+            </div>
+          </div>
+          <div>
+            {status === 1 ? (
+              <button
+                onClick={() => unmute()}
+                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-xs font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
+              >
+                Unmute
+              </button>
+            ) : (
+              <button
+                onClick={() => mute()}
+                className="inline-flex h-6 w-min items-center justify-center rounded px-1.5 text-xs font-medium leading-none text-zinc-400 hover:bg-zinc-800 hover:text-fuchsia-500"
+              >
+                Mute
+              </button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}