diff --git a/src/components/download.tsx b/src/components/download.tsx index 85fd258..fd7d314 100644 --- a/src/components/download.tsx +++ b/src/components/download.tsx @@ -2,9 +2,9 @@ import { useState, useEffect } from "react"; import styled, { keyframes } from "styled-components"; import { ny } from "@/lib/utils"; -import { Checkbox } from "./ui/checkbox"; import { ChevronLeft, InfoIcon } from "lucide-react"; import { Button } from "./ui/button"; +import { CopyButton } from "./ui/copy-button"; import Particles from "./ui/particles"; import confetti from "canvas-confetti"; import { releases, releaseTree } from "@/lib/releases"; @@ -189,6 +189,9 @@ export default function DownloadPage() { setSelectedLinuxDownloadType("flatpak"); }; + const linuxAppimageBashScript = + 'bash <(curl https://updates.zen-browser.app/appimage.sh)'; + return ( <> -
-										bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)
+									
+										{linuxAppimageBashScript}
+										
 									
)} diff --git a/src/components/ui/copy-button.tsx b/src/components/ui/copy-button.tsx new file mode 100644 index 0000000..de395d0 --- /dev/null +++ b/src/components/ui/copy-button.tsx @@ -0,0 +1,61 @@ +"use client"; + +import * as React from "react"; + +import { Button } from "./button"; +import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"; + +import { useClipboard } from "@/lib/hooks"; + +const CopyButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + valueToCopy: string; + } +>(({ className, valueToCopy, ...props }, ref) => { + const copyToClipboard = useClipboard(valueToCopy); + + const [showSuccessIcon, setShowSuccessIcon] = React.useState(false); + + const handleCopy = () => { + copyToClipboard(); + setShowSuccessIcon(true); + }; + + React.useEffect(() => { + let timeout: ReturnType | null = null; + + if (showSuccessIcon) { + timeout = setTimeout(() => { + setShowSuccessIcon(false); + }, 5000); + } + + return () => { + if (timeout) { + clearTimeout(timeout); + } + }; + }, [showSuccessIcon]); + + return ( + <> + + + ); +}); + +export { CopyButton }; diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts new file mode 100644 index 0000000..577519e --- /dev/null +++ b/src/lib/hooks.ts @@ -0,0 +1,7 @@ +export function useClipboard(valueToCopy: string) { + const copyToClipboard = () => { + navigator.clipboard.writeText(valueToCopy); + }; + + return copyToClipboard; +}