From 1feeafc99783c2d96d20b71192721a1167ea1fcb Mon Sep 17 00:00:00 2001
From: Gwansik Kim <gwansik.kim@gwansik.dev>
Date: Fri, 24 Jan 2025 00:07:57 +0900
Subject: [PATCH] docs(suspensive.org): add npm install copy-button on landing
 page (#1417)

Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>
---
 .../suspensive.org/public/img/icons/check.svg |  1 +
 .../public/img/icons/content_copy.svg         |  1 +
 .../src/components/HomePage.tsx               | 25 +++-------
 .../src/components/NpmInstallCopyButton.tsx   | 46 +++++++++++++++++++
 docs/suspensive.org/src/pages/en/index.mdx    |  2 +-
 docs/suspensive.org/src/pages/ko/index.mdx    |  2 +-
 docs/suspensive.org/svg.d.ts                  |  1 +
 docs/suspensive.org/tsconfig.json             |  1 +
 8 files changed, 59 insertions(+), 20 deletions(-)
 create mode 100644 docs/suspensive.org/public/img/icons/check.svg
 create mode 100644 docs/suspensive.org/public/img/icons/content_copy.svg
 create mode 100644 docs/suspensive.org/src/components/NpmInstallCopyButton.tsx
 create mode 100644 docs/suspensive.org/svg.d.ts

diff --git a/docs/suspensive.org/public/img/icons/check.svg b/docs/suspensive.org/public/img/icons/check.svg
new file mode 100644
index 000000000..18db27621
--- /dev/null
+++ b/docs/suspensive.org/public/img/icons/check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z"/></svg>
\ No newline at end of file
diff --git a/docs/suspensive.org/public/img/icons/content_copy.svg b/docs/suspensive.org/public/img/icons/content_copy.svg
new file mode 100644
index 000000000..026cbf17c
--- /dev/null
+++ b/docs/suspensive.org/public/img/icons/content_copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-520q0-17 11.5-28.5T160-720q17 0 28.5 11.5T200-680v520h400q17 0 28.5 11.5T640-120q0 17-11.5 28.5T600-80H200Zm160-240v-480 480Z"/></svg>
\ No newline at end of file
diff --git a/docs/suspensive.org/src/components/HomePage.tsx b/docs/suspensive.org/src/components/HomePage.tsx
index 56b3ad9b7..d31231680 100644
--- a/docs/suspensive.org/src/components/HomePage.tsx
+++ b/docs/suspensive.org/src/components/HomePage.tsx
@@ -4,6 +4,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'nextra/hooks'
 import { useEffect, useRef } from 'react'
+import { NpmInstallCopyButton } from './NpmInstallCopyButton'
 
 const CodeBlockClassName = 'nextra-code'
 
@@ -16,13 +17,12 @@ const backtickToCodeBlock = (text: string) =>
 const formatCodeBlocks = (desc: string) => backtickToCodeBlock(escapeHtml(desc))
 
 export const HomePage = ({
-  description,
+  title,
   buttonText,
   items,
   children,
 }: {
   title: string
-  description: string
   buttonText: string
   items: { title: string; desc: string }[]
   version: number
@@ -60,26 +60,15 @@ export const HomePage = ({
               />
             </div>
             <div className="flex flex-col items-center gap-4">
-              <div className="break-keep px-4 text-4xl font-bold leading-tight md:text-6xl">
-                <span>{description}</span>
+              <div className="break-keep bg-gradient-to-r from-white via-white/80 to-white/60 bg-clip-text px-4 text-4xl font-bold leading-tight text-transparent md:text-6xl">
+                <span>{title}</span>
               </div>
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{
-                  opacity: 0.6,
-                  transition: { delay: 0.1, duration: 1 },
-                }}
-                className="rounded-full text-lg text-white md:text-xl"
-              >
-                npm i @suspensive/react
-              </motion.p>
             </div>
+            <NpmInstallCopyButton />
           </div>
           <Link href={`/${router.locale}/docs/react/motivation`}>
             <motion.button
-              whileHover={{
-                scale: 1.05,
-              }}
+              whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
               initial={{ opacity: 0 }}
               animate={{
@@ -92,7 +81,7 @@ export const HomePage = ({
                   'drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))',
               }}
               type="button"
-              className="rounded-xl bg-white px-8 py-3 text-lg font-bold text-[#111111] md:px-10 md:py-3 md:text-xl"
+              className="rounded-xl bg-white px-7 py-2 text-lg font-bold text-[#111111] md:px-9 md:py-3 md:text-xl"
             >
               {buttonText}
             </motion.button>
diff --git a/docs/suspensive.org/src/components/NpmInstallCopyButton.tsx b/docs/suspensive.org/src/components/NpmInstallCopyButton.tsx
new file mode 100644
index 000000000..d3f3cd78e
--- /dev/null
+++ b/docs/suspensive.org/src/components/NpmInstallCopyButton.tsx
@@ -0,0 +1,46 @@
+import { AnimatePresence, motion } from 'motion/react'
+import '../styles/globals.css'
+import Image from 'next/image'
+import { useState } from 'react'
+import checkSVG from '../../public/img/icons/check.svg'
+import content_copySVG from '../../public/img/icons/content_copy.svg'
+
+const npmInstallScript = 'npm i @suspensive/react'
+export const NpmInstallCopyButton = () => {
+  const [isHovered, setIsHovered] = useState(false)
+  const [isClicked, setIsClicked] = useState(false)
+
+  return (
+    <motion.button
+      className="relative mt-4 flex cursor-copy"
+      type="button"
+      onHoverStart={() => setIsHovered(true)}
+      onHoverEnd={() => {
+        setIsHovered(false)
+        setIsClicked(false)
+      }}
+      whileHover={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 0.5 }}
+      onClick={() => {
+        navigator.clipboard.writeText(npmInstallScript)
+        setIsClicked(true)
+      }}
+    >
+      ~ {npmInstallScript}
+      <motion.div className="absolute -right-8 flex items-center justify-center">
+        <AnimatePresence>
+          {isHovered ? (
+            <motion.span
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <Image src={isClicked ? checkSVG : content_copySVG} alt="" />
+            </motion.span>
+          ) : null}
+        </AnimatePresence>
+      </motion.div>
+    </motion.button>
+  )
+}
diff --git a/docs/suspensive.org/src/pages/en/index.mdx b/docs/suspensive.org/src/pages/en/index.mdx
index a043186f1..61ab08d60 100644
--- a/docs/suspensive.org/src/pages/en/index.mdx
+++ b/docs/suspensive.org/src/pages/en/index.mdx
@@ -6,7 +6,7 @@ import {
 } from '@/components'
 
 <HomePage
-  description="All in one for React Suspense"
+  title="All in one for React Suspense"
   buttonText="Get Started"
   items={[
     {
diff --git a/docs/suspensive.org/src/pages/ko/index.mdx b/docs/suspensive.org/src/pages/ko/index.mdx
index 528dfbf6e..c254032bd 100644
--- a/docs/suspensive.org/src/pages/ko/index.mdx
+++ b/docs/suspensive.org/src/pages/ko/index.mdx
@@ -6,7 +6,7 @@ import {
 } from '@/components'
 
 <HomePage
-  description="React Suspense를 위한 모든 것"
+  title="React Suspense를 위한 모든 것"
   buttonText="시작하기"
   items={[
     {
diff --git a/docs/suspensive.org/svg.d.ts b/docs/suspensive.org/svg.d.ts
new file mode 100644
index 000000000..63199ce7e
--- /dev/null
+++ b/docs/suspensive.org/svg.d.ts
@@ -0,0 +1 @@
+declare module '*.svg'
diff --git a/docs/suspensive.org/tsconfig.json b/docs/suspensive.org/tsconfig.json
index e9c4393a5..768ef6b72 100644
--- a/docs/suspensive.org/tsconfig.json
+++ b/docs/suspensive.org/tsconfig.json
@@ -23,6 +23,7 @@
   },
   "include": [
     "next-env.d.ts",
+    "svg.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",