Light Bar

import { cn } from "@/lib/utils";
 
const hexToRgb = (hex: string) => {
  const bigint = parseInt(hex.slice(1), 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return { r, g, b };
};
 
type Props = {
  width?: number;
  height?: number;
  startColor?: string;
  endColor?: string;
  className?: string;
};
 
/**
 * Creates a light bar component with a gradient and shadow effect.
 
 * @param {number} [props.width=50] - The width of the light bar in pixels.
 * @param {number} [props.height=2] - The height of the light bar in pixels.
 * @param {string} [props.startColor="#fce48d"] - The starting color of the gradient in hex format.
 * @param {string} [props.endColor="#b98dfc"] - The ending color of the gradient in hex format.
 * @param {string} [props.className=""] - Additional classes to apply for placement of the light bar.
 */
export function LightBar({
  width = 50,
  height = 2,
  startColor = "#fce48d",
  endColor = "#b98dfc",
  className,
}: Props) {
  const lightEffect = 50;
  const baseReach = 33;
  const reach = baseReach * (lightEffect / 30);
 
  const intensity = lightEffect / 50;
  const spread = (lightEffect / 100) * 0.1;
 
  const startRgb = hexToRgb(startColor);
  const endRgb = hexToRgb(endColor);
 
  const rgba = (r: number, g: number, b: number, a: number) =>
    `rgba(${r}, ${g}, ${b}, ${a * (intensity * 0.8 + 0.2)})`;
 
  const shadow = `
      0 ${reach}px ${reach * 2}px ${reach * spread}px ${rgba(startRgb.r, startRgb.g, startRgb.b, 0.4)},
      0 ${reach * 0.5}px ${reach * 1.5}px ${reach * spread}px ${rgba(endRgb.r, endRgb.g, endRgb.b, 0.4)},
      0 ${reach * 0.3}px ${reach * 0.7}px ${reach * spread}px ${rgba(startRgb.r, startRgb.g, startRgb.b, 0.3)},
      0 ${reach * 0.36}px ${reach * 0.7}px ${reach * spread}px ${rgba(endRgb.r, endRgb.g, endRgb.b, 0.3)},
      0 ${reach * 0.1}px ${reach * 0.3}px ${reach * spread * 0.5}px ${rgba(startRgb.r, startRgb.g, startRgb.b, 0.2)},
      0 ${reach * 0.05}px ${reach * 0.15}px ${reach * spread * 0.3}px ${rgba(endRgb.r, endRgb.g, endRgb.b, 0.2)}
    `;
 
  const cssProperties = {
    "--width": `${width}px`,
    "--height": `${height}px`,
    "--start-color": `${startColor}`,
    "--end-color": `${endColor}`,
    boxShadow: shadow,
  } as React.CSSProperties;
 
  return (
    <div
      className={cn(
        className,
        "bg-gradient-to-r from-[var(--start-color)] to-[var(--end-color)]",
        "w-[var(--width)] h-[var(--height)] bottom-[var(--bottom-offset)]"
      )}
      style={cssProperties}
    ></div>
  );
}