Notes for card info

components/Scrim.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+type ScrimProps = {
+	children?: React.ReactNode;
+	onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+	show?: boolean;
+	className?: string;
+};
+
+export default function Scrim({ children, onClick, show = true, className = '' }: ScrimProps) {
+	const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+		if (event.target === event.currentTarget) {
+			onClick && onClick(event);
+		}
+	};
+	if (!show) return null;
+
+	return (
+		<div
+			onClick={handleClick}
+			className={`fixed inset-0 bg-black/20 backdrop-blur-sm z-40 ${className}`}
+		>
+			{children}
+		</div>
+	);
+}