add thanks for joining modal (12dabc85) · Commits · FQQD / Canvas

packages/client/src/components/App.tsx

+2 −0

Original line number	Diff line number	Diff line
		@@ -23,6 +23,7 @@ import { Moderator, ModeratorContext } from "../Moderator/Moderator";
		import { DialogContext } from "../contexts/DialogContext";
		import { ChatInfoDialog } from "./Chat/ChatInfoDialog";
		import { LoginModal } from "./LoginModal/LoginModal";
		import { ThanksForJoining } from "./EventDates/ThanksForJoining";

		// const Chat = lazy(() => import("./Chat/Chat"));

		@@ -160,6 +161,7 @@ const AppInner = () => {

		<ToastWrapper />
		<DynamicModals />
		<ThanksForJoining />
		</>
		);
		};

packages/client/src/components/EventDates/ThanksForJoining.tsx

0 → 100644

+67 −0

Original line number	Diff line number	Diff line
		import {
		Button,
		Link,
		Modal,
		ModalBody,
		ModalContent,
		ModalFooter,
		ModalHeader,
		} from "@nextui-org/react";
		import { MatrixButton } from "../Info/buttons/Matrix";
		import { DiscordButton } from "../Info/buttons/Discord";
		import { LemmyButton } from "../Info/buttons/Lemmy";
		import { MastodonButton } from "../Info/buttons/Mastodon";
		import { useState } from "react";
		import { TipButton } from "../Info/buttons/Tip";
		import { useEventDates } from "./useEventDates";

		export const ThanksForJoining = () => {
		const [show, setShow] = useState(true);
		const { state } = useEventDates();

		return (
		<Modal isOpen={show && state === "AFTER"} onClose={() => setShow(false)}>
		<ModalContent>
		{(onClose) => (
		<>
		<ModalHeader>Thank you for participating!</ModalHeader>
		<ModalBody>
		<h1 className="text-3xl text-center font-bold">Canvas 2025</h1>
		<h2 className="text-2xl text-center">...has concluded!</h2>
		<p>
		Timelapses of the event will be available on our socials as soon
		as they are ready
		</p>
		<p>
		<strong>If you've enjoyed the event, send a tip!</strong>
		<br />
		Tips are split between server maintenance/development and the
		event moderators
		<br />
		<TipButton variant="solid" size="md" className="w-full" />
		</p>
		<p>
		<Button
		as={Link}
		href="https://sc07.shop/product/canvas-2025/"
		target="_blank"
		>
		Get a poster print!
		</Button>
		</p>
		<div className="flex gap-1">
		<MatrixButton />
		<DiscordButton />
		<LemmyButton />
		<MastodonButton />
		</div>
		</ModalBody>
		<ModalFooter>
		<Button onPress={onClose}>Show Canvas</Button>
		</ModalFooter>
		</>
		)}
		</ModalContent>
		</Modal>
		);
		};

packages/client/src/components/Info/InfoButtons.tsx

+10 −62

Original line number	Diff line number	Diff line
		import { Link } from "@nextui-org/react";
		import {
		SiDiscord,
		SiLemmy,
		SiMastodon,
		SiMatrix,
		} from "@icons-pack/react-simple-icons";
		import { DISCORD_INVITE, MATRIX_INVITE } from "../../lib/constants";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faDollarSign } from "@fortawesome/free-solid-svg-icons";
		import { Button } from "../core/Button";
		import { MatrixButton } from "./buttons/Matrix";
		import { DiscordButton } from "./buttons/Discord";
		import { LemmyButton } from "./buttons/Lemmy";
		import { MastodonButton } from "./buttons/Mastodon";
		import { TipButton } from "./buttons/Tip";

		export const InfoButtons = () => {
		return (
		<div className="p-2 flex gap-2 flex-wrap">
		<Button
		as={Link}
		size="sm"
		href={MATRIX_INVITE}
		target="_blank"
		variant="ghost"
		>
		<SiMatrix size={18} />
		<p>Matrix</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href={DISCORD_INVITE}
		target="_blank"
		variant="ghost"
		>
		<SiDiscord size={18} />
		<p>Discord</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href="https://toast.ooo/c/canvas"
		target="_blank"
		variant="ghost"
		>
		<SiLemmy size={18} />
		<p>Lemmy</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href="https://social.fediverse.events/@canvas"
		target="_blank"
		variant="ghost"
		>
		<SiMastodon size={18} />
		<p>Mastodon</p>
		</Button>
		<Button
		as={Link}
		size="sm"
		href="https://tips.sc07.com"
		target="_blank"
		variant="ghost"
		color="success"
		>
		<FontAwesomeIcon icon={faDollarSign} style={{ fontSize: 16 }} />
		<p>Tip Jar</p>
		</Button>
		<MatrixButton />
		<DiscordButton />
		<LemmyButton />
		<MastodonButton />
		<TipButton />
		</div>
		);
		};

packages/client/src/components/Info/buttons/Discord.tsx

0 → 100644

+18 −0

Original line number	Diff line number	Diff line
		import { Button, Link } from "@nextui-org/react";
		import { DISCORD_INVITE } from "../../../lib/constants";
		import { SiDiscord } from "@icons-pack/react-simple-icons";

		export const DiscordButton = () => {
		return (
		<Button
		as={Link}
		size="sm"
		href={DISCORD_INVITE}
		target="_blank"
		variant="ghost"
		>
		<SiDiscord size={18} />
		<p>Discord</p>
		</Button>
		);
		};

packages/client/src/components/Info/buttons/Lemmy.tsx

0 → 100644

+17 −0

Original line number	Diff line number	Diff line
		import { SiLemmy } from "@icons-pack/react-simple-icons";
		import { Button, Link } from "@nextui-org/react";

		export const LemmyButton = () => {
		return (
		<Button
		as={Link}
		size="sm"
		href="https://toast.ooo/c/canvas"
		target="_blank"
		variant="ghost"
		>
		<SiLemmy size={18} />
		<p>Lemmy</p>
		</Button>
		);
		};