diff --git a/src/components/frame/LandingPage/ColonyInvitationBanner.tsx b/src/components/frame/LandingPage/ColonyInvitationBanner.tsx new file mode 100644 index 0000000000..6c8920cb2c --- /dev/null +++ b/src/components/frame/LandingPage/ColonyInvitationBanner.tsx @@ -0,0 +1,98 @@ +import { + SmileySticker, + Ticket, + CopySimple, + Check, +} from '@phosphor-icons/react'; +import React from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import useCopyToClipboard from '~hooks/useCopyToClipboard.ts'; +import Button from '~v5/shared/Button/Button.tsx'; + +const displayName = 'frame.LandingPage'; + +export interface ColonyInvitationBannerProps { + inviteLink: string; + coloniesRemaining: number; +} + +const MSG = defineMessages({ + title: { + id: `${displayName}.title`, + defaultMessage: `Early access colony invitations`, + }, + remaining: { + id: `${displayName}.remaining`, + defaultMessage: `{remaining} colonies remaining`, + }, + descriptionRemaining: { + id: `${displayName}.descriptionRemaining`, + defaultMessage: `As a part of the early access, creating a colony is limited to invites only. You can use the invites yourself or share with others.`, + }, + descriptionNoRemaining: { + id: `${displayName}.descriptionNoRemaining`, + defaultMessage: `During early access, creating a colony is limited to invites only. You have no colony creation invites remaining. You can request additional invites.`, + }, + copyButton: { + id: `${displayName}.copyButton`, + defaultMessage: `Copy link`, + }, +}); + +const ColonyInvitationBanner = ({ + inviteLink, + coloniesRemaining, +}: ColonyInvitationBannerProps) => { + const { handleClipboardCopy, isCopied } = useCopyToClipboard(); + + const hasColoniesRemaining = coloniesRemaining > 0; + + return ( +
+
+ {inviteLink} +
+