42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
/** Live equalizer bars. `bars` are 0..1 levels. */
|
|
export function Equalizer({
|
|
bars,
|
|
color = "var(--color-signal)",
|
|
className,
|
|
}: {
|
|
bars: number[];
|
|
color?: string;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div className={cn("flex h-10 items-end gap-[3px]", className)}>
|
|
{bars.length === 0 ? (
|
|
<div className="flex w-full items-end gap-[3px]">
|
|
{Array.from({ length: 28 }).map((_, i) => (
|
|
<span
|
|
key={`eq-${i}`}
|
|
className="flex-1 rounded-full bg-hairline"
|
|
style={{ height: "12%" }}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
bars.map((b, i) => (
|
|
<span
|
|
key={`bar-${i}`}
|
|
className="flex-1 rounded-full"
|
|
style={{
|
|
height: `${Math.max(6, b * 100)}%`,
|
|
background: color,
|
|
boxShadow: b > 0.05 ? `0 0 8px ${color}` : "none",
|
|
transition: "height 90ms linear",
|
|
}}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
);
|
|
}
|