diff --git a/src/App.css b/src/App.css index 9645216..4c5689e 100644 --- a/src/App.css +++ b/src/App.css @@ -458,6 +458,25 @@ padding: 0; } +.share-show-wrap { + margin-top: 1rem; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.45rem; +} + +.btn-share-show { + width: fit-content; +} + +.share-feedback { + margin: 0; + font-family: 'Barlow Condensed', sans-serif; + color: #cdb483; + font-size: 0.9rem; +} + .qr-code-wrap { text-align: center; flex-shrink: 0; @@ -1324,8 +1343,22 @@ .consent-actions .btn-primary, .consent-actions .btn-secondary { - font-size: 0.85rem; - padding: 0.55rem 1rem; + font-size: 1rem; + padding: 0.75rem 1.4rem; + min-width: 140px; + justify-content: center; +} + +.consent-actions .btn-secondary { + color: #c8860a; + border-color: rgba(200, 134, 10, 0.55); + background: transparent; +} + +.consent-actions .btn-secondary:hover { + color: #0a0a0a; + background: #c8860a; + border-color: #c8860a; } .admin-form { diff --git a/src/App.tsx b/src/App.tsx index 6ee91d3..3fae047 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -240,6 +240,43 @@ function AnalyticsConsentBanner() { ) } +function ShareShowButton() { + const [feedback, setFeedback] = useState('') + + async function handleShare() { + const shareUrl = window.location.origin + const shareTitle = 'Verse by Verse with Nate' + const shareText = 'Check out Verse by Verse with Nate.' + + try { + if (navigator.share) { + await navigator.share({ title: shareTitle, text: shareText, url: shareUrl }) + setFeedback('Shared successfully.') + return + } + + if (navigator.clipboard?.writeText) { + await navigator.clipboard.writeText(shareUrl) + setFeedback('Link copied. Share it with a friend.') + return + } + + setFeedback(`Copy this link: ${shareUrl}`) + } catch { + setFeedback('Share canceled.') + } + } + + return ( +
+ + {feedback &&

{feedback}

} +
+ ) +} + function LandingPage({ content }: { content: SiteContent }) { return (
@@ -446,6 +483,7 @@ function LandingPage({ content }: { content: SiteContent }) { > creators.spotify.com/pod/profile/nmemmert +