34 lines
834 B
TypeScript
34 lines
834 B
TypeScript
import type { CSSProperties } from 'react';
|
|
|
|
interface WaveformProps {
|
|
active: boolean;
|
|
}
|
|
|
|
const heights = [20, 34, 48, 30, 56, 76, 42, 64, 88, 46, 74, 36, 58, 80, 44];
|
|
|
|
export const Waveform = ({ active }: WaveformProps) => (
|
|
<div
|
|
aria-hidden="true"
|
|
className={[
|
|
'flex h-28 items-center justify-center gap-2 transition duration-500',
|
|
active ? 'opacity-100' : 'opacity-35'
|
|
].join(' ')}
|
|
>
|
|
{heights.map((height, index) => (
|
|
<span
|
|
key={`${height}-${index}`}
|
|
className={[
|
|
'wave-bar w-1.5 rounded-full bg-cyan-200/85 shadow-[0_0_18px_rgba(103,232,249,0.55)] sm:w-2',
|
|
active ? 'is-active' : ''
|
|
].join(' ')}
|
|
style={
|
|
{
|
|
'--bar-index': index,
|
|
height
|
|
} as CSSProperties
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|