97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useContext, ReactNode } from 'react';
|
|
|
|
interface ThemeProviderProps {
|
|
children: ReactNode;
|
|
defaultButtonVariant?: string;
|
|
defaultTextAnimation?: string;
|
|
borderRadius?: 'soft' | 'medium' | 'sharp';
|
|
contentWidth?: 'small' | 'medium' | 'large';
|
|
sizing?: string;
|
|
background?: string;
|
|
cardStyle?: string;
|
|
primaryButtonStyle?: string;
|
|
secondaryButtonStyle?: string;
|
|
headingFontWeight?: string;
|
|
}
|
|
|
|
interface ThemeContextType {
|
|
defaultButtonVariant?: string;
|
|
defaultTextAnimation?: string;
|
|
borderRadius?: string;
|
|
contentWidth?: string;
|
|
sizing?: string;
|
|
background?: string;
|
|
cardStyle?: string;
|
|
primaryButtonStyle?: string;
|
|
secondaryButtonStyle?: string;
|
|
headingFontWeight?: string;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
export function ThemeProvider({
|
|
children,
|
|
defaultButtonVariant = 'default',
|
|
defaultTextAnimation = 'none',
|
|
borderRadius = 'medium',
|
|
contentWidth = 'medium',
|
|
sizing = 'medium',
|
|
background = 'light',
|
|
cardStyle = 'solid',
|
|
primaryButtonStyle = 'solid',
|
|
secondaryButtonStyle = 'outline',
|
|
headingFontWeight = 'bold',
|
|
}: ThemeProviderProps) {
|
|
const themeValue: ThemeContextType = {
|
|
defaultButtonVariant,
|
|
defaultTextAnimation,
|
|
borderRadius,
|
|
contentWidth,
|
|
sizing,
|
|
background,
|
|
cardStyle,
|
|
primaryButtonStyle,
|
|
secondaryButtonStyle,
|
|
headingFontWeight,
|
|
};
|
|
|
|
const borderRadiusClass = {
|
|
soft: 'rounded-2xl',
|
|
medium: 'rounded-lg',
|
|
sharp: 'rounded-none',
|
|
}[borderRadius] || 'rounded-lg';
|
|
|
|
const contentWidthClass = {
|
|
small: 'max-w-2xl',
|
|
medium: 'max-w-4xl',
|
|
large: 'max-w-6xl',
|
|
}[contentWidth] || 'max-w-4xl';
|
|
|
|
const backgroundClass = {
|
|
aurora: 'bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900',
|
|
light: 'bg-white',
|
|
dark: 'bg-gray-900',
|
|
}[background] || 'bg-white';
|
|
|
|
return (
|
|
<ThemeContext.Provider value={themeValue}>
|
|
<div
|
|
className={`${backgroundClass} ${borderRadiusClass} min-h-screen transition-colors duration-300`}
|
|
>
|
|
<div className={`${contentWidthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useTheme(): ThemeContextType {
|
|
const context = useContext(ThemeContext);
|
|
if (context === undefined) {
|
|
throw new Error('useTheme must be used within a ThemeProvider');
|
|
}
|
|
return context;
|
|
} |