v5.1.0 (#2970)

* chore(release): v5.1.0 * feat: implement resume thumbnails * fix: remove unused mcp tools * docs: fix formatting of docs
2026-08-25 15:52:21 +10:00 · 2026-05-07 15:12:33 +02:00
parent 51c366310e
commit 50ba37a27f
1015 changed files with 106087 additions and 141872 deletions
@@ -0,0 +1,84 @@
+import type { AuthProvider } from "@reactive-resume/auth/types";
+import { Trans } from "@lingui/react/macro";
+import { LinkBreakIcon, LinkIcon } from "@phosphor-icons/react";
+import { motion } from "motion/react";
+import { useCallback, useMemo } from "react";
+import { match } from "ts-pattern";
+import { Button } from "@reactive-resume/ui/components/button";
+import { Separator } from "@reactive-resume/ui/components/separator";
+import { getProviderIcon, getProviderName, useAuthAccounts, useAuthProviderActions } from "./hooks";
+
+type SocialProviderSectionProps = {
+	provider: AuthProvider;
+	name?: string;
+	animationDelay?: number;
+};
+
+export function SocialProviderSection({ provider, name, animationDelay = 0 }: SocialProviderSectionProps) {
+	const { link, unlink } = useAuthProviderActions();
+	const { hasAccount, getAccountByProviderId } = useAuthAccounts();
+
+	const providerName = useMemo(() => name ?? getProviderName(provider), [name, provider]);
+	const providerIcon = useMemo(() => getProviderIcon(provider), [provider]);
+
+	const account = useMemo(() => getAccountByProviderId(provider), [getAccountByProviderId, provider]);
+	const isConnected = useMemo(() => hasAccount(provider), [hasAccount, provider]);
+
+	const handleLink = useCallback(async () => {
+		await link(provider);
+	}, [link, provider]);
+
+	const handleUnlink = useCallback(async () => {
+		if (!account?.accountId) return;
+		await unlink(provider, account.accountId);
+	}, [account, unlink, provider]);
+
+	return (
+		<motion.div
+			className="will-change-[transform,opacity]"
+			initial={{ opacity: 0, y: -20 }}
+			animate={{ opacity: 1, y: 0 }}
+			transition={{ duration: 0.2, delay: animationDelay, ease: "easeOut" }}
+		>
+			<Separator />
+
+			<div className="mt-4 flex items-center justify-between gap-x-4">
+				<h2 className="flex items-center gap-x-3 font-medium text-base">
+					{providerIcon}
+					{providerName}
+				</h2>
+
+				{match(isConnected)
+					.with(true, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleUnlink}>
+								<LinkBreakIcon />
+								<Trans comment="Authentication settings action to unlink a connected social login provider">
+									Disconnect
+								</Trans>
+							</Button>
+						</motion.div>
+					))
+					.with(false, () => (
+						<motion.div
+							className="will-change-transform"
+							whileHover={{ y: -1, scale: 1.01 }}
+							whileTap={{ scale: 0.99 }}
+							transition={{ duration: 0.14, ease: "easeOut" }}
+						>
+							<Button variant="outline" onClick={handleLink}>
+								<LinkIcon />
+								<Trans comment="Authentication settings action to link a social login provider">Connect</Trans>
+							</Button>
+						</motion.div>
+					))
+					.exhaustive()}
+			</div>
+		</motion.div>
+	);
+}