blur-vignette

1'use client';
2import React, { createContext, useContext } from 'react';
3import { cn } from '@/lib/utils';
4interface BlurVignetteContextProps {
5  radius?: string;
6  inset?: string;
7  transitionLength?: string;
8  blur?: string;
9}
10
11const BlurVignetteContext = createContext<BlurVignetteContextProps>({
12  radius: '24px',
13  inset: '20px',
14  transitionLength: '44px',
15  blur: '6px',
16});
17
18export const useBlurVignetteContext = () => useContext(BlurVignetteContext);
19
20interface BlurVignetteProps {
21  classname?: string;
22  children: React.ReactNode;
23  radius?: string;
24  inset?: string;
25  transitionLength?: string;
26  blur?: string;
27  blurclassname?: string;
28}
29
30export const BlurVignette: React.FC<BlurVignetteProps> = ({
31  classname,
32  children,
33  radius = '24px',
34  inset = '20px',
35  transitionLength = '44px',
36  blur = '6px',
37}) => {
38  return (
39    <BlurVignetteContext.Provider
40      value={{ radius, inset, transitionLength, blur }}
41    >
42      <div
43        className={cn('relative aspect-square overflow-hidden', classname)}
44        style={{ borderRadius: radius }}
45      >
46        {children}
47      </div>
48    </BlurVignetteContext.Provider>
49  );
50};
51interface BlurVignetteArticleProps {
52  children?: React.ReactNode;
53  classname?: string;
54}
55
56export const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({
57  children,
58  classname,
59}) => {
60  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();
61
62  return (
63    <div
64      className={cn(
65        'blur-vignette bottom-0 left-0 w-full h-full z-1',
66        classname
67      )}
68      style={
69        {
70          '--radius': radius,
71          '--inset': inset,
72          '--transition-length': transitionLength,
73          '--blur': blur,
74        } as React.CSSProperties
75      }
76    >
77      {children}
78    </div>
79  );
80};