68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { memo } from 'react';
|
|
import { cls } from '@/lib/utils';
|
|
|
|
interface GradientBarsBackgroundProps {
|
|
className?: string;
|
|
numBars?: number;
|
|
gradientFrom?: string;
|
|
gradientTo?: string;
|
|
opacity?: number;
|
|
}
|
|
|
|
const GradientBarsBackground = ({
|
|
className = "",
|
|
numBars = 15,
|
|
gradientFrom = "var(--color-primary-cta)",
|
|
gradientTo = "transparent",
|
|
opacity = 0.5,
|
|
}: GradientBarsBackgroundProps) => {
|
|
const calculateHeight = (index: number, total: number): number => {
|
|
const position = index / (total - 1);
|
|
const maxHeight = 100;
|
|
const minHeight = 30;
|
|
|
|
const center = 0.5;
|
|
const distanceFromCenter = Math.abs(position - center);
|
|
const heightPercentage = Math.pow(distanceFromCenter * 2, 1.2);
|
|
|
|
return minHeight + (maxHeight - minHeight) * heightPercentage;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cls("fixed inset-0 -z-10 overflow-hidden", className)}
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
className="flex h-full w-full backface-hidden antialiased"
|
|
style={{
|
|
transform: 'translateZ(0)',
|
|
}}
|
|
>
|
|
{Array.from({ length: numBars }).map((_, index) => {
|
|
const height = calculateHeight(index, numBars);
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="h-full origin-bottom box-border"
|
|
style={{
|
|
flex: `1 0 calc(100% / ${numBars})`,
|
|
maxWidth: `calc(100% / ${numBars})`,
|
|
background: `linear-gradient(to top, ${gradientFrom}, ${gradientTo})`,
|
|
transform: `scaleY(${height / 100})`,
|
|
opacity: opacity,
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
GradientBarsBackground.displayName = 'GradientBarsBackground';
|
|
|
|
export default memo(GradientBarsBackground);
|