1
import React, { createContext, useContext } from 'react';
2
import { cn } from '@/lib/utils';
3
interface BlurVignetteContextProps {
4
  radius?: string;
5
  inset?: string;
6
  transitionLength?: string;
7
  blur?: string;
8
}
9

10
const BlurVignetteContext = createContext<BlurVignetteContextProps>({
11
  radius: '24px',
12
  inset: '20px',
13
  transitionLength: '44px',
14
  blur: '6px',
15
});
16

17
export const useBlurVignetteContext = () => useContext(BlurVignetteContext);
18

19
interface BlurVignetteProps {
20
  classname?: string;
21
  children: React.ReactNode;
22
  radius?: string;
23
  inset?: string;
24
  transitionLength?: string;
25
  blur?: string;
26
  blurclassname?: string;
27
}
28

29
export const BlurVignette: React.FC<BlurVignetteProps> = ({
30
  classname,
31
  children,
32
  radius = '24px',
33
  inset = '20px',
34
  transitionLength = '44px',
35
  blur = '6px',
36
}) => {
37
  return (
38
    <BlurVignetteContext.Provider
39
      value={{ radius, inset, transitionLength, blur }}
40
    >
41
      <div
42
        className={cn('relative aspect-square overflow-hidden', classname)}
43
        style={{ borderRadius: radius }}
44
      >
45
        {children}
46
      </div>
47
    </BlurVignetteContext.Provider>
48
  );
49
};
50
interface BlurVignetteArticleProps {
51
  children?: React.ReactNode;
52
  classname?: string;
53
}
54

55
export const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({
56
  children,
57
  classname,
58
}) => {
59
  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();
60

61
  return (
62
    <div
63
      className={cn(
64
        'blur-vignette bottom-0 left-0 w-full h-full z-[1]',
65
        classname
66
      )}
67
      style={
68
        {
69
          '--radius': radius,
70
          '--inset': inset,
71
          '--transition-length': transitionLength,
72
          '--blur': blur,
73
        } as React.CSSProperties
74
      }
75
    >
76
      {children}
77
    </div>
78
  );
79
};