diff --git a/components/common/CopyButton.tsx b/components/common/CopyButton.tsx new file mode 100644 index 000000000..ff59213c3 --- /dev/null +++ b/components/common/CopyButton.tsx @@ -0,0 +1,23 @@ +import { ReactElement } from 'react' +import useCopyToClipboard from '../hooks/useCopyToClipboard' +import { TbCopy, TbCheck } from 'react-icons/tb' + +interface CopyButtonProps { + text: string +} + +const CopyButton: React.FC = ({ text }): ReactElement => { + const { copyToClipboard, isCopied } = useCopyToClipboard() + + return ( + + ) +} + +export default CopyButton diff --git a/components/hooks/useCopyToClipboard.ts b/components/hooks/useCopyToClipboard.ts new file mode 100644 index 000000000..02be2da1f --- /dev/null +++ b/components/hooks/useCopyToClipboard.ts @@ -0,0 +1,19 @@ +import { useState } from 'react' + +const useCopyToClipboard = () => { + const [isCopied, setIsCopied] = useState(false) + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text).then(() => { + setIsCopied(true) + setTimeout(() => setIsCopied(false), 2000) + }) + } + + return { + copyToClipboard, + isCopied, + } +} + +export default useCopyToClipboard diff --git a/pages/cli/index.tsx b/pages/cli/index.tsx index c812c0f04..14de8a570 100644 --- a/pages/cli/index.tsx +++ b/pages/cli/index.tsx @@ -1,18 +1,23 @@ import Background from '../../components/sections/about/Background' -import Header from '../../components/sections/navigation/Header'; -import { Footer as SanityFooter, Navigation as SanityNavigation, Seo as SanitySeo } from '../../sanity.types' -import { getCommonData } from '../../lib/sanity'; -import Footer from '../../components/sections/Footer'; -import { Heading, Typography } from '../../components/common/text'; -import { Button } from '../../components/common'; -import { TbArrowNarrowRight } from "react-icons/tb"; -import Image from 'next/image'; +import Header from '../../components/sections/navigation/Header' +import { + Footer as SanityFooter, + Navigation as SanityNavigation, + Seo as SanitySeo, +} from '../../sanity.types' +import { getCommonData } from '../../lib/sanity' +import Footer from '../../components/sections/Footer' +import { Heading, Typography } from '../../components/common/text' +import { Button } from '../../components/common' +import { TbArrowNarrowRight } from 'react-icons/tb' +import Image from 'next/image' +import CopyButton from '../../components/common/CopyButton' export async function getStaticProps() { - const commonData = await getCommonData(); + const commonData = await getCommonData() - return { - props: { commonData } + return { + props: { commonData }, } } @@ -23,33 +28,45 @@ type CliPageProps = { footer: SanityFooter[] } } - + export default function CliPage({ commonData }: CliPageProps) { - const navigationURLs = commonData.navigationLinks; + const navigationURLs = commonData.navigationLinks + const command = 'brew install open-sauced/tap/pizza' + return (
-
-
+
+
Generate developer insights $yellow-to-orangefrom the command line - - Try the pizza CLI and access OpenSauced features right from your terminal. Autogenerate your CODEOWNERS and contributor insights in seconds. + + Try the pizza CLI and access + OpenSauced features right from your terminal. Autogenerate your + CODEOWNERS and contributor insights in seconds. -
- - brew install open-sauced/tap/pizza - - +
+
+ + {command} + + +
+
- - - + + + View installation instructions @@ -57,10 +74,15 @@ export default function CliPage({ commonData }: CliPageProps) {
- Pizza CLI help screenshot + Pizza CLI help screenshot