Add react-qr-code dependency; enhance PopupHeader and SharePopup components with draggable functionality; update LinkShare component for improved UI; integrate SettingsModal in HomePage for better user experience.

2025-10-09 15:31:39 +05:00
parent 8ca825475e
commit 79fb7f2748
11 changed files with 316 additions and 38 deletions
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import SoundIcon from "../icons/SoundIcon";
+import VideoFilledIcon from "../icons/VideoFilledIcon";
+import ModalWrapper from "../ModalWrapper";
+import Button from "../ui/Button";
+import RangeInput from "../ui/RangeInput";
+
+function SettingsModal() {
+  const [microphoneVolume, setMicrophoneVolume] = useState(50);
+  //   const [speakerVolume, setSpeakerVolume] = useState(50);
+
+  return (
+    <ModalWrapper title="Настройки">
+      <div className="2xl:space-y-[1.389vw] space-y-5">
+        <div className="flex">
+          <Button variant="menu" size="large" className="w-full">
+            <div className="flex 2xl:gap-[0.556vw] items-center">
+              <div className="2xl:size-[1.111vw] size-4 text-[#7B60F3]">
+                <SoundIcon />
+              </div>
+              <p className="font-medium">Звук</p>
+            </div>
+          </Button>
+          <Button variant="menu" size="large" className="w-full">
+            <div className="flex 2xl:gap-[0.556vw] items-center">
+              <div className="2xl:size-[1.111vw] size-4 text-[#7B60F3]">
+                <VideoFilledIcon />
+              </div>
+              <p className="font-medium">Видео</p>
+            </div>
+          </Button>
+        </div>
+        <div className="2xl:space-y-[1.667vw] space-y-6">
+          <div className="2xl:space-y-[0.833vw] space-y-3">
+            <p className="title-s font-medium">Микрофон</p>
+            <div className="2xl:space-y-[1.111vw] space-y-4">
+              <div className="flex 2xl:gap-[0.556vw]">
+                <div className="bg-[#F3F3F3] flex-1"></div>
+                <Button variant="cta" size="large">
+                  Проверить
+                </Button>
+              </div>
+              <div className="flex items-center 2xl:gap-[0.833vw]">
+                <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
+                  <SoundIcon />
+                </div>
+                <RangeInput
+                  value={microphoneVolume}
+                  onChange={setMicrophoneVolume}
+                />
+                <p className="caption-xs font-medium text-[#7D7D7D] 2xl:w-[1.667vw] w-6">
+                  {microphoneVolume.toFixed(0)}%
+                </p>
+              </div>
+            </div>
+          </div>
+          <hr className="bg-[#F6F6F6] 2xl:h-[0.069vw] h-px" />
+          <div className="2xl:space-y-[0.833vw] space-y-3">
+            <p className="title-s font-medium">Динамик</p>
+            <div className="2xl:space-y-[1.111vw] space-y-4">
+              <div className="flex 2xl:gap-[0.556vw]">
+                <div className="bg-[#F3F3F3] flex-1"></div>
+                <Button variant="cta" size="large">
+                  Проверить
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ModalWrapper>
+  );
+}
+
+export default SettingsModal;