File size: 1,184 Bytes
5f7dc7e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import { ReactNode } from "react";
interface GlassCardProps {
children: ReactNode;
className?: string;
interactive?: boolean;
elevated?: boolean;
padding?: "none" | "sm" | "md" | "lg";
onClick?: () => void;
style?: React.CSSProperties;
}
const paddingMap = {
none: "",
sm: "p-4",
md: "p-5",
lg: "p-6",
};
export default function GlassCard({
children,
className = "",
interactive = false,
elevated = false,
padding = "md",
onClick,
style,
}: GlassCardProps) {
const baseClass = elevated ? "glass-card--elevated" : "glass-card";
const interactiveClass = interactive ? "glass-card--interactive" : "";
const padClass = paddingMap[padding];
return (
<div
className={`${baseClass} ${interactiveClass} ${padClass} ${className}`}
style={style}
onClick={onClick}
role={onClick ? "button" : undefined}
tabIndex={onClick ? 0 : undefined}
onKeyDown={
onClick
? (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClick();
}
}
: undefined
}
>
{children}
</div>
);
}
|