diff --git a/components/valuation/ShareValuation.tsx b/components/valuation/ShareValuation.tsx new file mode 100644 index 0000000..0e3842e --- /dev/null +++ b/components/valuation/ShareValuation.tsx @@ -0,0 +1,84 @@ +"use client"; + +import { useState } from "react"; +import { formatUsd } from "@/lib/valuation/formatUsd"; + +type ShareValuationProps = { + artistName: string | null; + centralValue: number; +}; + +function CopyIcon() { + return ( + + ); +} + +function CheckIcon() { + return ( + + ); +} + +function XIcon() { + return ( + + ); +} + +function LinkedInIcon() { + return ( + + ); +} + +export function ShareValuation({ artistName, centralValue }: ShareValuationProps) { + const [copied, setCopied] = useState(false); + + const url = "https://recoupable.dev/valuation"; + const value = formatUsd(centralValue); + const name = artistName ?? "My artist"; + + const tweetText = `${name} catalog just got valued at ${value}. What's yours worth?\n\n${url}\n\n#recoup`; + const tweetUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}`; + const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`; + + async function copyLink() { + try { + await navigator.clipboard.writeText(url); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch { + // Fallback — noop + } + } + + const btnClass = + "inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-[12px] font-pixel uppercase tracking-[0.12em] text-(--foreground)/45 transition-all duration-200 hover:text-(--foreground)/70 hover:bg-(--foreground)/[0.04]"; + + return ( +