62 lines
2.2 KiB
JavaScript
62 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { cn } from '../../lib/utils';
|
|
|
|
const maskClasses = {
|
|
'fade-edges': '[mask-image:radial-gradient(ellipse_at_center,var(--color-background),transparent)]',
|
|
'fade-center': '[mask-image:radial-gradient(ellipse_at_center,transparent,var(--color-background))]',
|
|
'fade-top': '[mask-image:linear-gradient(to_bottom,transparent,var(--color-background))]',
|
|
'fade-bottom': '[mask-image:linear-gradient(to_bottom,var(--color-background),transparent)]',
|
|
'fade-left': '[mask-image:linear-gradient(to_right,transparent,var(--color-background))]',
|
|
'fade-right': '[mask-image:linear-gradient(to_right,var(--color-background),transparent)]',
|
|
'fade-x': '[mask-image:linear-gradient(to_right,transparent,var(--color-background),transparent)]',
|
|
'fade-y': '[mask-image:linear-gradient(to_bottom,transparent,var(--color-background),transparent)]',
|
|
none: '',
|
|
};
|
|
|
|
function geBgImage(variant, fill, size) {
|
|
switch (variant) {
|
|
case 'dots':
|
|
return `radial-gradient(${fill} 1px, transparent 1px)`;
|
|
case 'grid':
|
|
return `linear-gradient(to right, ${fill} 1px, transparent 1px), linear-gradient(to bottom, ${fill} 1px, transparent 1px)`;
|
|
case 'diagonal-stripes':
|
|
return `repeating-linear-gradient(45deg, ${fill}, ${fill} 1px, transparent 1px, transparent ${size}px)`;
|
|
case 'horizontal-lines':
|
|
return `linear-gradient(to bottom, ${fill} 1px, transparent 1px)`;
|
|
case 'vertical-lines':
|
|
return `linear-gradient(to right, ${fill} 1px, transparent 1px)`;
|
|
case 'checkerboard':
|
|
return `linear-gradient(45deg, ${fill} 25%, transparent 25%), linear-gradient(-45deg, ${fill} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${fill} 75%), linear-gradient(-45deg, transparent 75%, ${fill} 75%)`;
|
|
default:
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
const BGPattern = ({
|
|
variant = 'grid',
|
|
mask = 'none',
|
|
size = 24,
|
|
fill = '#252525',
|
|
className,
|
|
style,
|
|
...props
|
|
}) => {
|
|
const bgSize = `${size}px ${size}px`;
|
|
const backgroundImage = geBgImage(variant, fill, size);
|
|
|
|
return (
|
|
<div
|
|
className={cn('absolute inset-0 z-0 size-full', maskClasses[mask], className)}
|
|
style={{
|
|
backgroundImage,
|
|
backgroundSize: bgSize,
|
|
...style,
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
BGPattern.displayName = 'BGPattern';
|
|
export { BGPattern };
|