1  import { useState } from "react";
 2  import { useSearch } from "@tanstack/react-router";
 3  
 4  import BackButton from "./common/BackButton.tsx";
 5  import { useMassMarketContext } from "@massmarket/react-hooks";
 6  
 7  export function useShopDomain() {
 8    return {
 9      protocol: globalThis.location.protocol,
10      shopDomain: globalThis.location.host,
11    };
12  }
13  
14  export default function Share() {
15    const search = useSearch({ strict: false });
16    const { config: env } = useMassMarketContext();
17    const shopId = search?.shopId || env.shopId || "";
18    const { protocol, shopDomain } = useShopDomain();
19    const [copiedToClipboard, setCopied] = useState<boolean>(false);
20  
21    function copyToClipboard() {
22      navigator.clipboard.writeText(
23        `${protocol}//${shopDomain}/listings?shopId=${shopId}`,
24      );
25      setCopied(true);
26    }
27    return (
28      <main className="px-4 flex justify-center">
29        <section className="md:w-[800px] w-full">
30          <BackButton />
31          <h1 className="py-3">Share</h1>
32          <section className="mt-2 flex flex-col gap-1 bg-white p-5 rounded-lg">
33            <div className="flex justify-between">
34              <h3>Link</h3>
35              {copiedToClipboard ? <div>copied!</div> : null}
36            </div>
37            <div className="flex gap-2">
38              <input
39                className="border-2 border-solid mt-1 p-2 rounded w-full"
40                id="shopId"
41                name="shopId"
42                value={`${protocol}//${shopDomain}/listings?shopId=${shopId}`}
43                onChange={() => {}}
44              />
45              <button
46                type="button"
47                className="mr-4 cursor-pointer"
48                style={{ backgroundColor: "transparent", padding: 0 }}
49                onClick={copyToClipboard}
50              >
51                <img
52                  src="/icons/copy-icon.svg"
53                  width={14}
54                  height={14}
55                  alt="copy-icon"
56                  className="w-auto h-auto"
57                />
58              </button>
59            </div>
60          </section>
61        </section>
62      </main>
63    );
64  }