feat: add copy button to mobile code examples

Author: wackerow

src/components/Homepage/useHome.ts

@@ -27,6 +27,7 @@ import { GITHUB_REPO_URL } from "@/lib/constants"
 import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
 import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
 import SimpleWalletContent from "!!raw-loader!@/data/SimpleWallet.sol"
+import { useClipboard, type UseClipboardReturn } from "@/hooks/useClipboard"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export const useHome = () => {
@@ -45,14 +46,15 @@ export const useHome = () => {
     setModalOpen(true)
   }
 
-  const codeExamples: CodeExample[] = [
+  const codeExamples: (CodeExample & { clipboard: UseClipboardReturn })[] = [
     {
       title: t("page-index:page-index-developers-code-example-title-0"),
       description: t(
         "page-index:page-index-developers-code-example-description-0"
       ),
       codeLanguage: "language-solidity",
       code: SimpleWalletContent,
+      clipboard: useClipboard(SimpleWalletContent),
     },
     {
       title: t("page-index:page-index-developers-code-example-title-1"),
@@ -61,6 +63,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleTokenContent,
+      clipboard: useClipboard(SimpleTokenContent),
     },
     {
       title: t("page-index:page-index-developers-code-example-title-2"),
@@ -69,6 +72,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-javascript",
       code: CreateWalletContent,
+      clipboard: useClipboard(CreateWalletContent),
     },
     {
       title: t("page-index:page-index-developers-code-example-title-3"),
@@ -77,6 +81,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleDomainRegistryContent,
+      clipboard: useClipboard(SimpleDomainRegistryContent),
     },
   ]
 

src/hooks/useClipboard.ts

@@ -1,14 +1,14 @@
 import { useState } from "react"
 import { useCopyToClipboard } from "usehooks-ts"
 
-type UseClipboardOptions = {
+export type UseClipboardOptions = {
   /**
    * timeout delay (in ms) to switch back to initial state once copied.
    */
   timeout?: number
 }
 
-type UseClipboardReturn = {
+export type UseClipboardReturn = {
   value: string
   setValue: React.Dispatch<React.SetStateAction<string>>
   onCopy: () => void

src/pages/index.tsx

@@ -2,6 +2,8 @@ import { Fragment, lazy, Suspense } from "react"
 import type { GetStaticProps, InferGetStaticPropsType } from "next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { FaDiscord, FaGithub } from "react-icons/fa6"
+import { IoMdCopy } from "react-icons/io"
+import { MdCheck } from "react-icons/md"
 
 import type {
   AllMetricData,
@@ -25,7 +27,7 @@ import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import Swiper from "@/components/Swiper"
 import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
-import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Card,
   CardBanner,
@@ -409,8 +411,12 @@ const HomePage = ({
                 {/* Mobile */}
                 <Accordion type="single" collapsible className="md:hidden">
                   {codeExamples.map(
-                    ({ title, description, code, codeLanguage }) => (
-                      <AccordionItem key={title} value={title}>
+                    ({ title, description, code, codeLanguage, clipboard }) => (
+                      <AccordionItem
+                        key={title}
+                        value={title}
+                        className="relative"
+                      >
                         <AccordionTrigger className="flex border-t px-6 py-4 hover:bg-background-highlight">
                           <div className="flex flex-col items-start gap-y-0.5">
                             <p className="text-md font-bold text-body">
@@ -431,6 +437,12 @@ const HomePage = ({
                             >
                               {code}
                             </Codeblock>
+                            <Button
+                              onClick={clipboard.onCopy}
+                              className="absolute end-4 top-24"
+                            >
+                              {clipboard.hasCopied ? <MdCheck /> : <IoMdCopy />}
+                            </Button>
                           </Suspense>
                         </AccordionContent>
                       </AccordionItem>