diff --git a/src/components/LoginSection.tsx b/src/components/LoginSection.tsx index e986e3f..0c70118 100644 --- a/src/components/LoginSection.tsx +++ b/src/components/LoginSection.tsx @@ -17,11 +17,13 @@ const ROUND_LABELS: Record = { export function LoginSectionShare({ twitterShareUrl, blueskyShareUrl, + mastodonShareUrl, copied, onCopyLink, }: { twitterShareUrl: string | null; blueskyShareUrl: string | null; + mastodonShareUrl: string | null; copied: boolean; onCopyLink: () => Promise; }) { @@ -107,6 +109,17 @@ export function LoginSectionShare({ Share on Bluesky )} + {mastodonShareUrl && ( + + + Share on Mastodon + + )} ); diff --git a/src/components/bracket/Bracket.tsx b/src/components/bracket/Bracket.tsx index 8db6152..be5dfe7 100644 --- a/src/components/bracket/Bracket.tsx +++ b/src/components/bracket/Bracket.tsx @@ -133,6 +133,9 @@ function BracketToolbar() { const blueskyShareUrl = username ? `https://bsky.app/intent/compose?text=${encodeURIComponent(`Check out my March Mad CSS bracket picks! 🏀\n\n${shareUrl}`)}` : null; + const mastodonShareUrl = username + ? `https://share.joinmastodon.org/#text=${encodeURIComponent(`Check out my March Mad CSS bracket picks! 🏀\n\n${shareUrl}`)}` + : null; const isBracketComplete = pickCount === TOTAL_GAMES; const showShare = isLoggedIn && (isBracketComplete || isDeadlinePassed) && !!shareUrl; @@ -176,6 +179,7 @@ function BracketToolbar() { diff --git a/src/styles/login.css b/src/styles/login.css index 3550ce7..558886e 100644 --- a/src/styles/login.css +++ b/src/styles/login.css @@ -476,6 +476,11 @@ color: var(--white); } +.btn-share--mastodon { + background: var(--mastodon); + color: var(--white); +} + .share-icon { width: 16px; height: 16px; diff --git a/src/styles/styles.css b/src/styles/styles.css index b6c558b..75fcd77 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -8,6 +8,7 @@ --white: #fff; --beige: #f5eeda; --bluesky: #0f73ff; + --mastodon: #6364ff; /* TODO: Add web fonts */ --font-serif: "serif", serif; --font-block: "Alfa Slab One", "CollegiateBlackFLF", sans-serif;