Merge pull request #30 from a-company-jp/feature/ui

色々UIの改善

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

src/App.tsx

@@ -1,21 +1,22 @@
-import Header from './components/Header';
-import './App.css';
-import CardList from './components/CardList';
-import SendImageButton from './components/SendImageButton';
-import { UIProvider } from "@yamada-ui/react"
-import { Pagination } from './components/Pagination';
-import { useState } from 'react';
-import useLGTMFetch from './hooks/useLGTMFetch';
+import Header from "./components/Header";
+import "./App.css";
+import CardList from "./components/CardList";
+import SendImageButton from "./components/SendImageButton";
+import { UIProvider } from "@yamada-ui/react";
+import { Pagination } from "./components/Pagination";
+import { useState } from "react";
+import useLGTMFetch from "./hooks/useLGTMFetch";
+import Banner from "./components/Banner";
 
 function App() {
-
   const [activePage, setActivePage] = useState(1);
   const [uploaded, setUploaded] = useState(false);
-  const {LGTMUrls} = useLGTMFetch(activePage, uploaded, setUploaded);
+  const { LGTMUrls } = useLGTMFetch(activePage, uploaded, setUploaded);
 
   return (
     <UIProvider>
       <div className="App">
+        <Banner />
         <Header />
         <SendImageButton setUploaded={setUploaded} />
         <CardList {...LGTMUrls} />

src/components/Banner/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+const Banner = () => {
+  const gitHubUrl = process.env.REACT_APP_GITHUB_URL;
+
+  return (
+    <>
+      <div className="py-2 font-semibold text-white bg-gradient-to-r from-cyan-500 to-blue-500 transition-colors">
+        拡張機能の利用は、
+        <a
+          href={gitHubUrl}
+          className="text-orange-300 underline hover:text-orange-100"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          GitHub
+        </a>
+        を参照してください
+      </div>
+    </>
+  );
+};
+
+export default Banner;

src/components/Card/index.tsx

@@ -1,43 +1,56 @@
-import React from 'react'
-import { FaRegCopy } from "react-icons/fa";
-import { imageCopy } from '../../utils';
-
+import React, { useState } from "react";
+import { FaRegCheckCircle, FaRegCopy } from "react-icons/fa";
+import { imageCopy } from "../../utils";
 
 export type CardProps = {
-    imageUrl: string
-    title?: string
-}
-
-const Card = ({ imageUrl, title }: CardProps) => {
-
-    // TODO: refactor css
-    const styles = {
-        centering: 'flex justify-center items-center',
-        card: 'w-full h-full rounded-xl',
-        linkWrapper: 'group relative block bg-black w-full h-full justify-between rounded-xl',
-        image: 'absolute inset-0 h-full w-full  opacity-75 transition-opacity group-hover:opacity-50 rounded-xl',
-        title: 'text-xl font-bold text-white sm:text-2xl top-4',
-        hoverBox: 'mt-20',
-        copyBox: 'translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100 mt-4',
-    }
-
-    return (
-        <div className={`${styles.centering} ${styles.card}`}>
-            <button onClick={() => imageCopy(imageUrl)} className={`${styles.linkWrapper}`}>
-                <img alt="LGTMの画像" src={imageUrl} className={`${styles.image}`} />
-                <div className={`${styles.hoverBox} ${styles.centering}`}>
-                    <div className={`${styles.copyBox}`}>
-                        <FaRegCopy className='' color='white' size={50} />
-                    </div>
-                </div>
-
-                <div className="relative p-4 sm:p-6 lg:p-8 pt-8 whitespace-no-wrap">
-                    <p className={`${styles.title}`}>{title}</p>
-                </div>
-            </button>
-        </div>
-
-    )
-}
-
-export default Card
+  imageUrl: string;
+};
+
+const Card = ({ imageUrl }: CardProps) => {
+  const [isCopying, setIsCopying] = useState(false);
+
+  const handleCopyClick = async () => {
+    await imageCopy(imageUrl);
+    setIsCopying(true);
+    setTimeout(() => {
+      setIsCopying(false);
+    }, 2000);
+  };
+
+  // TODO: refactor css
+  const styles = {
+    centering: "",
+    card: "relative",
+    linkWrapper: "group relative",
+    image:
+      "inset-0 h-full w-full transition-opacity group-hover:opacity-30 rounded-xl",
+    checkCircleWrapper:
+      "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center",
+    checkCircle: "mr-2 text-green-500",
+    copyMessage: "text-green-500 font-bold",
+    copyIcon:
+      "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-75 transition-opacity",
+  };
+
+  return (
+    <div className={`${styles.centering} ${styles.card}`}>
+      <button onClick={handleCopyClick} className={`${styles.linkWrapper}`}>
+        <img alt="LGTMの画像" src={imageUrl} className={`${styles.image}`} />
+        {isCopying ? (
+          <div className={styles.checkCircleWrapper}>
+            <FaRegCheckCircle
+              className={styles.checkCircle}
+              color=""
+              size={35}
+            />
+            <span className={styles.copyMessage}>Copied!!</span>
+          </div>
+        ) : (
+          <FaRegCopy className={styles.copyIcon} color="" size={35} />
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default Card;

src/components/CardList/index.tsx

@@ -1,30 +1,25 @@
-import React from 'react'
-import Card, { CardProps } from '../Card'
+import React from "react";
+import Card, { CardProps } from "../Card";
 
-type CardListProps = CardProps[]
+type CardListProps = CardProps[];
 
 function CardList(props: CardListProps) {
+  const cardDataArray = Object.values(props);
 
-    const cardDataArray = Object.values(props)
+  const styles = {
+    grid: "grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8 md:grid-cols-2 md:gap-4 sm:grid-cols-2 sm:gap-4 mt-4 mx-6 lg:mx-36",
+    gridItem: "rounded-lg",
+  };
 
-    const styles = {
-        grid: 'grid grid-cols-1 gap-4 lg:grid-cols-4 lg:gap-8 md:grid-cols-2 md:gap-4 sm:grid-cols-2 sm:gap-4 mt-4 mx-6 lg:mx-36',
-        gridItem: 'h-56 rounded-lg',
-    }
-
-
-    return (
-        <div className={`${styles.grid}`}>
-        {
-            cardDataArray.map((card) => (
-                <div className={`${styles.gridItem}`}>
-                    <Card {...card} />
-                </div>
-            ))
-        }
+  return (
+    <div className={`${styles.grid}`}>
+      {cardDataArray.map((card) => (
+        <div className={`${styles.gridItem}`}>
+          <Card {...card} />
         </div>
-
-    )
+      ))}
+    </div>
+  );
 }
 
-export default CardList
+export default CardList;

src/components/Header/index.tsx

@@ -1,28 +1,28 @@
-import ButtonToChromeExtension from "../atoms/ButtonToChromeExtension";
+import ButtonToGitHub from "../atoms/ButtonToGitHub";
 import CopyrightPolicyButton from "../atoms/CopyrightPolicyButton";
 import SiteTitle from "../atoms/SiteTitle";
 
 const Header = () => {
+  const styles = {
+    header: "w-full  px-4 py-8 sm:px-6 sm:py-12 lg:px-8 bg-gray-200",
+    container: "sm:flex sm:items-center sm:justify-between mx-auto max-w-6xl",
+    title: "text-2xl font-bold text-gray-900 sm:text-3xl",
+    subTitle: "mt-1.5 text-sm text-gray-500",
+    btnContainer:
+      "mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center",
+  };
 
-    const styles = {
-        header: "w-full  px-4 py-8 sm:px-6 sm:py-12 lg:px-8 bg-gray-200",
-        container: "sm:flex sm:items-center sm:justify-between mx-auto max-w-6xl",
-        title: "text-2xl font-bold text-gray-900 sm:text-3xl",
-        subTitle: "mt-1.5 text-sm text-gray-500",
-        btnContainer: "mt-4 flex flex-col gap-4 sm:mt-0 sm:flex-row sm:items-center",
-    }
-
-    return (
-        <header className={styles.header}>
-            <div className={styles.container}>
-                <SiteTitle />
-                <div className={styles.btnContainer}>
-                   <ButtonToChromeExtension />
-                   <CopyrightPolicyButton />
-                </div>
-            </div>
-        </header>
-    )
-}
+  return (
+    <header className={styles.header}>
+      <div className={styles.container}>
+        <SiteTitle />
+        <div className={styles.btnContainer}>
+          <ButtonToGitHub />
+          <CopyrightPolicyButton />
+        </div>
+      </div>
+    </header>
+  );
+};
 
 export default Header;

src/components/atoms/ButtonToGitHub/index.tsx

@@ -0,0 +1,37 @@
+const ButtonToGitHub = (): JSX.Element => {
+  const gitHubUrl = process.env.REACT_APP_GITHUB_URL;
+
+  const styles = {
+    btn: "inline-flex items-center justify-center gap-1.5 rounded-lg px-5 py-3 text-gray-500 transition hover:text-gray-700 focus:outline-none focus:ring",
+    text: "text-sm font-medium",
+  };
+
+  return (
+    <a
+      href={gitHubUrl}
+      className={styles.btn}
+      type="button"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span className={styles.text}> GitHub Page </span>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-4 w-4"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        />
+      </svg>
+    </a>
+  );
+};
+
+export default ButtonToGitHub;