Merge pull request #42 from youngeek-0410/yuto/stylingShareButton

Yuto/styling share button

.env.sample

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_SPOTIFY_API_CLIENT_ID=
 NEXT_PUBLIC_SPOTIFY_API_CLIENT_SECRET=
 NEXT_PUBLIC_BACKEND_API_KEY=
+HOSTNAME=

src/common/LinkShare.tsx

@@ -1,36 +1,63 @@
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { FiShare, FiClipboard } from "react-icons/fi";
 
 import { styled } from "../stitches.config";
 
-export const LinkShare: React.FC = () => {
+export const LinkShare: React.FC<{ url: string }> = (props) => {
   const router = useRouter();
-  const hostName = "https://app.cloveeee.com";
-  const url = `${hostName}${router.asPath}`;
+  const [canShare, setCanShare] = useState(false);
   const copyLink = () => {
-    navigator.clipboard.writeText(url);
+    navigator.clipboard.writeText(props.url);
   };
   const shareLink = () => {
     const data: ShareData = {
-      url: url,
+      url: props.url,
     };
     navigator.share(data);
   };
 
+  useEffect(() => {
+    // NOTE: mac chrome で share がかけないらしいがぱっと対応コードが書けなかったのであと回し
+    // setCanShare(Object.hasOwn(navigator, "share"));
+  }, []);
+
   return (
-    <>
-      <span>{url}</span>
-      <ShareButton onClick={shareLink}>
-        <FiShare />
-      </ShareButton>
-      <CopyClipboard onClick={copyLink}>
-        <FiClipboard />
-      </CopyClipboard>
-    </>
+    <Base>
+      <PostMessageUrl>{props.url}</PostMessageUrl>
+      {canShare ? (
+        <Icon onClick={shareLink}>
+          <FiShare />
+        </Icon>
+      ) : (
+        <Icon onClick={copyLink}>
+          <FiClipboard />
+        </Icon>
+      )}
+
+      {/* 実際にサイトに飛べるアイコンリンク */}
+    </Base>
   );
 };
 
-const CopyClipboard = styled("button", {});
+const Base = styled("div", {
+  display: "flex",
+});
+
+const PostMessageUrl = styled("p", {
+  overflowWrap: "anywhere",
+  marginRight: "8px",
+});
 
-const ShareButton = styled("button", {});
+const Icon = styled("button", {
+  border: "none",
+  margin: "8px 16px 0 0",
+  padding: "0",
+  fontSize: "24px",
+  background: "inherit",
+  cursor: "pointer",
+  transition: "opacity 0.15s 0.05s",
+  "&:active": {
+    opacity: 0.5,
+  },
+});

src/project/ProjectSetting.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import React from "react";
 
 import { LinkShare } from "../common/LinkShare";
@@ -7,7 +8,14 @@ import { ProjectHeading2 } from "./common/ProjectHeading2";
 import { ProjectHeading3 } from "./common/ProjectHeading3";
 import { ProjectParagraph } from "./common/ProjectParagraph";
 
+const newMessageLink = (projectId: string) =>
+  `https://hacku-kosen-2022-frontend.vercel.app/projects/${projectId}/new_message`;
+const previewLink = (projectId: string) => `https://cloveeee-dcp-frontend.vercel.app/preview/${projectId}`;
+const publishLink = (projectId: string) => `https://cloveeee-dcp-frontend.vercel.app/${projectId}`;
+
 export const ProjectSetting: React.FC = () => {
+  const router = useRouter();
+  const { project_id } = router.query;
   return (
     <>
       <SectionTitle>
@@ -17,16 +25,14 @@ export const ProjectSetting: React.FC = () => {
 
       <Section>
         <ProjectHeading3>寄書き用リンクをコピー</ProjectHeading3>
-        <ProjectParagraph>寄書きを投稿してもらうには下のURLをコピーして共有してください</ProjectParagraph>
-        {/* TODO: いい感じコピーできるコンポーネントを用意する */}
-        <LinkShare />
+        <ProjectParagraph>寄書きを投稿してもらうには右のボタンからURLをコピーして共有してください</ProjectParagraph>
+        <LinkShare url={newMessageLink(project_id as string)} />
       </Section>
 
       <Section>
         <ProjectHeading3>プレビューをみる</ProjectHeading3>
-        <ProjectParagraph>下のリンクから完成予定のオリジナルWebサイトを見ることができます</ProjectParagraph>
-        {/* TODO: いい感じコピーできるコンポーネントを用意する */}
-        {/*  <LinkCopyButton onClick={copyLink}>コピーする</LinkCopyButton>*/}
+        <ProjectParagraph>下のリンクから完成予定のオリジナルWebサイトを見ることが出来ます</ProjectParagraph>
+        <LinkShare url={previewLink(project_id as string)} />
       </Section>
 
       <Section>
@@ -47,4 +53,3 @@ const Section = styled("div", {
 const SectionTitle = styled("div", {
   margin: "24px 0 36px",
 });
-const LinkCopyButton = styled("button", {});