Share modal; LinkShare component.

client/src/components/modals/ShareModal.tsx

@@ -0,0 +1,24 @@
+import Button from "../ui/Button";
+import LinkShare from "../ui/LinkShare";
+import ShareFilledIcon from "../icons/ShareFilledIcon";
+
+export default function ShareModal() {
+  return (
+    <>
+      <div className="mb-[1.389vw]">
+        <div className="title-s mb-[0.833vw]">Скопировать ссылку</div>
+        <LinkShare link={"https://estate.stream/ahdy12jdco1"} />
+      </div>
+      <Button
+        variant="primary"
+        size="large"
+        className="w-full flex items-center justify-center gap-[0.556vw]"
+      >
+        Отправить
+        <div className="size-[1.111vw]">
+          <ShareFilledIcon />
+        </div>
+      </Button>
+    </>
+  );
+}

client/src/components/ui/LinkShare.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import Button from "./Button";
+import CheckIcon from "../icons/CheckIcon";
+import LoaderIcon from "../icons/LoaderIcon";
+
+export default function LinkShare({ link }: { link: string }) {
+  const [shareState, setShareState] = useState<"default" | "loading" | "done">(
+    "default"
+  );
+
+  function handleCopy() {
+    setShareState("loading");
+    navigator.clipboard.writeText(link);
+
+    setTimeout(() => {
+      setShareState("done");
+    }, 500);
+  }
+
+  return (
+    <div className="w-full h-[3.75vw] bg-[#F3F3F3] flex items-center justify-between gap-[0.833vw] px-[1.111vw] rounded-[1.111vw] relative">
+      <span
+        className="text-ellipsis overflow-hidden text-s hover:cursor-pointer"
+        onClick={handleCopy}
+      >
+        {link}
+      </span>
+
+      {shareState === "default" && (
+        <Button
+          variant="cta"
+          size="medium"
+          className="h-[2.778vw] translate-x-[0.556vw]"
+          onClick={handleCopy}
+        >
+          Копировать
+        </Button>
+      )}
+
+      {shareState === "loading" && (
+        <div className="size-[1.389vw] text-[#7B60F3] animate-spin">
+          <LoaderIcon />
+        </div>
+      )}
+
+      {shareState === "done" && (
+        <>
+          <div className="size-[1.389vw] text-[#7B60F3]">
+            <CheckIcon />
+          </div>
+          <div className="caption-s absolute bottom-[-1.25vw] text-[#29AF61] left-0">
+            Ссылка скопирована
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

client/src/pages/HomePage.tsx

@@ -1,3 +1,4 @@
+import ShareModal from "../components/modals/ShareModal";
 import Button from "../components/ui/Button";
 import { useMe, useLogout } from "../hooks/useAuth";
 import { useNavigate } from "react-router";
@@ -18,6 +19,12 @@ function HomePage() {
         <div className="p-8 bg-white rounded-lg shadow-md">
           <h1 className="mb-6 text-3xl font-bold">Главная страница</h1>
 
+          {/* Потестить модалки */}
+
+          {/* <div className="w-[21.667vw] outline-1 outline">
+            <ShareModal />
+          </div> */}
+
           <div className="space-y-4">
             <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
               <h2 className="mb-2 text-xl font-semibold">