feat!: added cookie consent banner and management system

app/_components/CookieBanner.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { acceptCookies, dismissCookies, getCookieChoice, rejectCookies, requireExcplicitConsent } from "@/_utils/analytics/client";
+import { Dismiss24Regular } from "@fluentui/react-icons";
+import React, { useCallback, useEffect, useState } from "react";
+import Button from "./Button";
+import cls from "./CookieBanner.module.scss";
+
+const CookieBanner: React.FC = () =>
+{
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() =>
+	{
+		const choice = getCookieChoice();
+		setVisible(choice === "none");
+
+		// Since Clarity cookies expiration dates extend well beyond 60 days,
+		// we need to terminate them manually once our consent tracking cookie expires.
+		if (choice !== "accepted")
+			window.clarity?.("consent", false);
+	}, []);
+
+	const accept = useCallback(() =>
+	{
+		acceptCookies();
+		setVisible(false);
+	}, []);
+
+	const reject = useCallback(() =>
+	{
+		rejectCookies();
+		setVisible(false);
+	}, []);
+
+	const dismiss = useCallback(() =>
+	{
+		dismissCookies();
+		setVisible(false);
+	}, []);
+
+	if (!visible)
+		return null;
+
+	return (
+		<div className={ `cookie-banner ${cls.banner}` }>
+			<Button
+				as="next" href="/attribution"
+				className={ cls.learnMore }
+				aria-label="We use cookies for analytics purposes. Click to learn more"
+				icon={ <span>🍪</span> }>
+
+				<p aria-hidden>
+					<span>We use cookies for analytics purposes</span><br />
+					Click to learn more
+				</p>
+			</Button>
+
+			{ requireExcplicitConsent ?
+				<div className={ cls.controls }>
+					<Button onClick={ accept }>Accept</Button>
+					<Button onClick={ reject }>Reject</Button>
+				</div>
+				:
+				<Button
+					title="Dismiss" icon={ <Dismiss24Regular /> }
+					onClick={ dismiss } className={ cls.dismiss } />
+			}
+
+		</div>
+	);
+};
+
+export default CookieBanner;