BarsWave

1'use client';
2import React, { useState } from 'react';
3import { motion } from 'motion/react';
4import { cn } from '@/lib/utils';
5 
6interface BarsWaveProps {
7  barCount?: number;
8  minHeight?: number;
9  maxHeight?: number;
10  fillColor?: string;
11  borderColor?: string;
12  barOpacity?: number;
13  animationDuration?: number;
14  variant?: 'filled' | 'outlined';
15  className?: string;
16  children?: React.ReactNode;
17}
18 
19export function BarsWave({
20  barCount = 15,
21  minHeight = 15,
22  maxHeight = 85,
23  fillColor,
24  borderColor,
25  barOpacity = 1,
26  animationDuration = 3,
27  variant = 'outlined',
28  className,
29  children,
30}: BarsWaveProps) {
31  const halfCount = Math.ceil(barCount / 2);
32 
33  const [barAnimations] = useState(() => {
34    return Array.from({ length: halfCount }, (_, i) => {
35      const heights = [
36        Math.random() * (maxHeight - minHeight) + minHeight,
37        Math.random() * (maxHeight - minHeight) + minHeight,
38        Math.random() * (maxHeight - minHeight) + minHeight,
39      ];
40 
41      return {
42        id: i,
43        heights: [...heights, heights[0]],
44        delay: Math.random() * 2,
45        duration: animationDuration + Math.random() * 2,
46      };
47    });
48  });
49 
50  const allBars = React.useMemo(() => {
51    const leftBars = barAnimations.map((bar, i) => ({
52      ...bar,
53      id: `left-${i}`,
54      position: i,
55    }));
56 
57    const rightBars = [...barAnimations].reverse().map((bar, i) => ({
58      ...bar,
59      id: `right-${i}`,
60      position: halfCount + i,
61    }));
62 
63    return [...leftBars, ...rightBars].slice(0, barCount);
64  }, [barAnimations, halfCount, barCount]);
65 
66  return (
67    <div className={cn('relative overflow-hidden', className)}>
68      <div className='absolute inset-0 flex items-end justify-around gap-1 px-4'>
69        {allBars.map((bar) => (
70          <motion.div
71            key={bar.id}
72            className={cn(
73              'w-full max-w-20 rounded-t-md',
74              variant === 'filled'
75                ? 'bg-gray-900/10 dark:bg-white/10'
76                : 'bg-transparent border-2 border-gray-900/20 dark:border-white/20',
77            )}
78            style={{
79              ...(fillColor &&
80                variant === 'filled' && { backgroundColor: fillColor }),
81              ...(borderColor &&
82                variant === 'outlined' && { borderColor: borderColor }),
83              opacity: barOpacity,
84            }}
85            initial={{ height: `${bar.heights[0]}%` }}
86            animate={{
87// … truncated