blur-vignette

1'use client';
2import { cn } from '@/lib/utils';
3import type React from 'react';
4import { createContext, useContext } from 'react';
5 
6interface BlurVignetteContextProps {
7  radius?: string;
8  inset?: string;
9  transitionLength?: string;
10  blur?: string;
11}
12 
13const BlurVignetteContext = createContext<BlurVignetteContextProps>({
14  radius: '24px',
15  inset: '20px',
16  transitionLength: '44px',
17  blur: '6px',
18});
19 
20export const useBlurVignetteContext = () => useContext(BlurVignetteContext);
21 
22interface BlurVignetteProps {
23  classname?: string;
24  children: React.ReactNode;
25  radius?: string;
26  inset?: string;
27  transitionLength?: string;
28  blur?: string;
29  blurclassname?: string;
30}
31 
32export const BlurVignette: React.FC<BlurVignetteProps> = ({
33  classname,
34  children,
35  radius = '24px',
36  inset = '20px',
37  transitionLength = '44px',
38  blur = '6px',
39}) => {
40  return (
41    <BlurVignetteContext.Provider value={{ radius, inset, transitionLength, blur }}>
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('blur-vignette bottom-0 left-0 w-full h-full z-1', classname)}
65      style={
66        {
67          '--radius': radius,
68          '--inset': inset,
69          '--transition-length': transitionLength,
70          '--blur': blur,
71        } as React.CSSProperties
72      }
73    >
74      {children}
75    </div>
76  );
77};