Repent

overlayeddev · Nov 5, 2023 · 2e0621e · 2e0621e
1 parent 5fb95ad
commit 2e0621e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 39 deletions.
diff --git a/public/mic-off.svg b/public/mic-off.svg
diff --git a/public/tauri.svg b/public/tauri.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/components/headphones-off.tsx b/src/components/headphones-off.tsx
@@ -0,0 +1,16 @@
+export const HeadphonesOff = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      className="ml-1"
+    >
+      <path
+        fill="currentColor"
+        d="M12 1a9 9 0 0 1 9 9v7c0 .62-.19 1.19-.5 1.67L15 13.18V12h4v-2a7 7 0 0 0-7-7c-2 0-3.77.82-5.04 2.14L5.55 3.72A8.96 8.96 0 0 1 12 1M2.78 3.5L20.5 21.22l-1.27 1.28l-2.5-2.5H15v-1.73l-6-6V20H6a3 3 0 0 1-3-3v-7c0-1.11.2-2.18.57-3.16L1.5 4.77L2.78 3.5m2.39 4.94C5.06 8.94 5 9.46 5 10v2h3.73L5.17 8.44Z"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/mic-off.tsx b/src/components/mic-off.tsx
@@ -0,0 +1,16 @@
+export const MicOff = () => {
+  return (
+    <svg
+      className="ml-1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+    >
+      <path
+        className="fill-current text-zinc-400"
+        d="M19 11c0 1.19-.34 2.3-.9 3.28l-1.23-1.23c.27-.62.43-1.31.43-2.05H19m-4 .16L9 5.18V5a3 3 0 0 1 3-3a3 3 0 0 1 3 3v6.16M4.27 3L21 19.73L19.73 21l-4.19-4.19c-.77.46-1.63.77-2.54.91V21h-2v-3.28c-3.28-.49-6-3.31-6-6.72h1.7c0 3 2.54 5.1 5.3 5.1c.81 0 1.6-.19 2.31-.52l-1.66-1.66L12 14a3 3 0 0 1-3-3v-.72L3 4.27L4.27 3Z"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/user.tsx b/src/components/user.tsx
@@ -1,5 +1,6 @@
 import { OverlayedUser } from "../types";
-import { MicOff, Headphones } from "lucide-react";
+import { HeadphonesOff } from "./headphones-off";
+import { MicOff } from "./mic-off";
 
 export const User = ({ item }: { item: OverlayedUser }) => {
   const { id, selfMuted, selfDeafened, talking, avatarHash } = item;
@@ -25,33 +26,8 @@ export const User = ({ item }: { item: OverlayedUser }) => {
       >
         <p>{item.username}</p>
         <div className="flex">
-          {selfMuted && (
-            <svg
-              className="ml-1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-            >
-              <path
-                className="fill-current text-zinc-400"
-                d="M19 11c0 1.19-.34 2.3-.9 3.28l-1.23-1.23c.27-.62.43-1.31.43-2.05H19m-4 .16L9 5.18V5a3 3 0 0 1 3-3a3 3 0 0 1 3 3v6.16M4.27 3L21 19.73L19.73 21l-4.19-4.19c-.77.46-1.63.77-2.54.91V21h-2v-3.28c-3.28-.49-6-3.31-6-6.72h1.7c0 3 2.54 5.1 5.3 5.1c.81 0 1.6-.19 2.31-.52l-1.66-1.66L12 14a3 3 0 0 1-3-3v-.72L3 4.27L4.27 3Z"
-              />
-            </svg>
-          )}
-          {selfDeafened && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill="currentColor"
-                d="M12 1a9 9 0 0 1 9 9v7c0 .62-.19 1.19-.5 1.67L15 13.18V12h4v-2a7 7 0 0 0-7-7c-2 0-3.77.82-5.04 2.14L5.55 3.72A8.96 8.96 0 0 1 12 1M2.78 3.5L20.5 21.22l-1.27 1.28l-2.5-2.5H15v-1.73l-6-6V20H6a3 3 0 0 1-3-3v-7c0-1.11.2-2.18.57-3.16L1.5 4.77L2.78 3.5m2.39 4.94C5.06 8.94 5 9.46 5 10v2h3.73L5.17 8.44Z"
-              />
-            </svg>
-          )}
+          {selfMuted && <MicOff />}
+          {selfDeafened && <HeadphonesOff />}
         </div>
       </div>
     </div>