diff --git a/apps/web/src/components/QuickStart.tsx b/apps/web/src/components/QuickStart.tsx index 2268822..01b190b 100644 --- a/apps/web/src/components/QuickStart.tsx +++ b/apps/web/src/components/QuickStart.tsx @@ -1,7 +1,8 @@ import {Button, Card, CardContent, CardDescription, CardHeader, CardTitle} from '@plunk/ui'; -import {BookOpen, CheckCircle2, Mail, MessageCircle, Shield, Users, Zap} from 'lucide-react'; +import {AnimatePresence, motion} from 'framer-motion'; +import {BookOpen, Check, CheckCircle2, Mail, MessageCircle, Shield, Users, Zap} from 'lucide-react'; import Link from 'next/link'; -import {useMemo} from 'react'; +import {useMemo, useState} from 'react'; import {LANDING_URI, WIKI_URI} from '../lib/constants'; import type {ProjectSetupState} from '../lib/hooks/useProjectSetupState'; import {useConfig} from '../lib/hooks/useConfig'; @@ -23,6 +24,14 @@ interface QuickStartProps { // Help resources that always appear function HelpResources() { + const [copied, setCopied] = useState(false); + + const copyEmail = () => { + void navigator.clipboard.writeText('support@useplunk.com'); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + return (

Need help?

@@ -39,6 +48,39 @@ function HelpResources() { Join Discord + + + {copied ? ( + + + Copied! + + ) : ( + + + Email support + + )} + +
);