System banner

1interface SystemBannerProps {
2  text?: string;
3  color?: string;
4  size?: "xs" | "sm" | "md" | "lg";
5  show?: boolean;
6}
7 
8const sizeClasses: Record<NonNullable<SystemBannerProps["size"]>, string> = {
9  xs: "text-[10px] px-1 py-0.5",
10  sm: "text-xs px-2 py-0.5",
11  md: "text-sm px-3 py-1",
12  lg: "text-base px-4 py-1.5"
13};
14 
15export default function SystemBanner({
16  text = "Development Mode",
17  color = "bg-orange-500",
18  size = "xs",
19  show = true
20}: SystemBannerProps) {
21  if (!show) return null;
22  return (
23    <div
24      className={`
25        fixed top-0 left-0 w-full h-0.5 z-50 flex justify-center
26        ${typeof color === "string" && color.startsWith("#") ? "" : color}
27      `}
28      style={
29        typeof color === "string" && color.startsWith("#")
30          ? { backgroundColor: color }
31          : undefined
32      }
33    >
34      <span
35        className={`
36          absolute -bottom-4 text-white font-bold rounded shadow-md
37          ${sizeClasses[size]}
38          ${typeof color === "string" && color.startsWith("#") ? "" : color}
39        `}
40        style={
41          typeof color === "string" && color.startsWith("#")
42            ? { backgroundColor: color }
43            : undefined
44        }
45      >
46        {text}
47      </span>
48    </div>
49  );
50}