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;
+}