39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import classNames from 'classnames';
|
|
import { type HTMLAttributes } from 'react';
|
|
|
|
export const BORDER_COLOR = 'border-vega-clight-500 dark:border-vega-cdark-500';
|
|
export const GRADIENT =
|
|
'bg-gradient-to-b from-vega-clight-800 dark:from-vega-cdark-800 to-transparent';
|
|
|
|
export const Box = ({
|
|
children,
|
|
backgroundImage,
|
|
...props
|
|
}: HTMLAttributes<HTMLDivElement> & { backgroundImage?: string }) => {
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={classNames(
|
|
BORDER_COLOR,
|
|
GRADIENT,
|
|
'border rounded-lg',
|
|
'relative p-6 overflow-hidden',
|
|
props.className
|
|
)}
|
|
>
|
|
{Boolean(backgroundImage?.length) && (
|
|
<div
|
|
className={classNames(
|
|
'pointer-events-none',
|
|
'bg-no-repeat bg-center bg-[length:500px_500px]',
|
|
'absolute top-0 left-0 w-full h-full -z-10 opacity-30 blur-lg'
|
|
)}
|
|
style={{ backgroundImage: `url("${backgroundImage}")` }}
|
|
></div>
|
|
)}
|
|
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|