From 5742310b2583bf60f37f142287adffaf9881aa3f Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 27 Feb 2026 13:10:51 +0000 Subject: [PATCH] Update src/providers/themeProvider/ThemeProvider.tsx --- src/providers/themeProvider/ThemeProvider.tsx | 248 ++++++++++-------- 1 file changed, 144 insertions(+), 104 deletions(-) diff --git a/src/providers/themeProvider/ThemeProvider.tsx b/src/providers/themeProvider/ThemeProvider.tsx index 8e1e8cf..54d9eda 100644 --- a/src/providers/themeProvider/ThemeProvider.tsx +++ b/src/providers/themeProvider/ThemeProvider.tsx @@ -1,25 +1,107 @@ -"use client"; +'use client'; -import { createContext, useContext } from "react"; -import type { ThemeConfig, ThemeProviderProps } from "./config/types"; -import { borderRadiusMap, borderRadiusCappedMap, contentWidthMap, expandedContentWidthMap, baseVwMap, textSizingMap, backgroundComponents, headingFontWeightMap } from "./config/constants"; -import { cardStyleMap, getGradientBorderedPseudo } from "./styles/cardStyles"; -import { primaryButtonStyleMap } from "./styles/primaryButtonStyles"; -import { secondaryButtonStyleMap } from "./styles/secondaryButtonStyles"; +import React, { useState } from 'react'; -const ThemeContext = createContext(undefined); +interface SocialLink { + platform: string; + url: string; + icon: string; +} -export const useTheme = () => { - const context = useContext(ThemeContext); - if (!context) { - throw new Error( - "useTheme must be used within a ThemeProvider. Wrap your sections in at the app/page level." - ); - } - return context; -}; +interface TeamMember { + id: string; + name: string; + role: string; + image: string; + socialLinks: SocialLink[]; +} -export const ThemeProvider = ({ +interface TeamCardProps { + member: TeamMember; +} + +function TeamCard({ member }: TeamCardProps) { + const [isFlipped, setIsFlipped] = useState(false); + + return ( +
setIsFlipped(true)} + onMouseLeave={() => setIsFlipped(false)} + > +
+ {/* Front Side */} +
+
+ {member.name} +
+

+ {member.name} +

+

+ {member.role} +

+
+ + {/* Back Side */} +
+

+ Connect +

+
+ {member.socialLinks.map((link) => ( + + {link.icon} + + ))} +
+
+
+
+ ); +} + +interface ThemeProviderProps { + children: React.ReactNode; + defaultButtonVariant?: string; + defaultTextAnimation?: string; + borderRadius?: string; + contentWidth?: string; + sizing?: string; + background?: string; + cardStyle?: string; + primaryButtonStyle?: string; + secondaryButtonStyle?: string; + headingFontWeight?: string; +} + +export function ThemeProvider({ children, defaultButtonVariant, defaultTextAnimation, @@ -31,96 +113,54 @@ export const ThemeProvider = ({ primaryButtonStyle, secondaryButtonStyle, headingFontWeight, -}: ThemeProviderProps) => { - const themeConfig: ThemeConfig = { - defaultButtonVariant, - defaultTextAnimation, - borderRadius, - contentWidth, - sizing, - background, - cardStyle, - primaryButtonStyle, - secondaryButtonStyle, - headingFontWeight, +}: ThemeProviderProps) { + const backgroundClasses = { + aurora: 'bg-gradient-to-br from-slate-950 via-purple-900 to-slate-950', + light: 'bg-white', + dark: 'bg-slate-900', }; - const borderRadiusValue = borderRadiusMap[borderRadius]; - const borderRadiusCappedValue = borderRadiusCappedMap[borderRadius]; - const contentWidthValues = contentWidthMap[contentWidth]; - const expandedContentWidthValues = expandedContentWidthMap[contentWidth]; - const baseVwValues = baseVwMap[sizing]; - const textSizingValues = textSizingMap[sizing]; - const BackgroundComponent = backgroundComponents[background]; - const headingFontWeightValue = headingFontWeightMap[headingFontWeight]; + const borderRadiusClasses = { + soft: 'rounded-lg', + sharp: 'rounded-none', + smooth: 'rounded-2xl', + }; - const cardStyles = cardStyleMap[cardStyle]; - const primaryButtonStyles = primaryButtonStyleMap[primaryButtonStyle]; - const secondaryButtonStyles = secondaryButtonStyleMap[secondaryButtonStyle]; + const contentWidthClasses = { + small: 'max-w-2xl', + medium: 'max-w-6xl', + large: 'max-w-7xl', + }; - const gradientBorderedPseudo = getGradientBorderedPseudo(cardStyle); - - const styleString = ` - :root { - --theme-border-radius: ${borderRadiusValue}; - --theme-border-radius-capped: ${borderRadiusCappedValue}; - --width-content-width: ${contentWidthValues.desktop}; - --width-content-width-expanded: ${expandedContentWidthValues.desktop}; - --vw: ${baseVwValues.desktop}; - --heading-font-weight: ${headingFontWeightValue}; - --text-2xs: ${textSizingValues.desktop.text2xs}; - --text-xs: ${textSizingValues.desktop.textXs}; - --text-sm: ${textSizingValues.desktop.textSm}; - --text-base: ${textSizingValues.desktop.textBase}; - --text-lg: ${textSizingValues.desktop.textLg}; - --text-xl: ${textSizingValues.desktop.textXl}; - --text-2xl: ${textSizingValues.desktop.text2xl}; - --text-3xl: ${textSizingValues.desktop.text3xl}; - --text-4xl: ${textSizingValues.desktop.text4xl}; - --text-5xl: ${textSizingValues.desktop.text5xl}; - --text-6xl: ${textSizingValues.desktop.text6xl}; - --text-7xl: ${textSizingValues.desktop.text7xl}; - --text-8xl: ${textSizingValues.desktop.text8xl}; - --text-9xl: ${textSizingValues.desktop.text9xl}; - } - @media (max-width: 768px) { - :root { - --width-content-width: ${contentWidthValues.mobile}; - --width-content-width-expanded: ${expandedContentWidthValues.mobile}; - --vw: ${baseVwValues.mobile}; - --text-2xs: ${textSizingValues.mobile.text2xs}; - --text-xs: ${textSizingValues.mobile.textXs}; - --text-sm: ${textSizingValues.mobile.textSm}; - --text-base: ${textSizingValues.mobile.textBase}; - --text-lg: ${textSizingValues.mobile.textLg}; - --text-xl: ${textSizingValues.mobile.textXl}; - --text-2xl: ${textSizingValues.mobile.text2xl}; - --text-3xl: ${textSizingValues.mobile.text3xl}; - --text-4xl: ${textSizingValues.mobile.text4xl}; - --text-5xl: ${textSizingValues.mobile.text5xl}; - --text-6xl: ${textSizingValues.mobile.text6xl}; - --text-7xl: ${textSizingValues.mobile.text7xl}; - --text-8xl: ${textSizingValues.mobile.text8xl}; - --text-9xl: ${textSizingValues.mobile.text9xl}; - } - } - .card { - ${cardStyles} - } - ${gradientBorderedPseudo} - .primary-button { - ${primaryButtonStyles} - } - .secondary-button { - ${secondaryButtonStyles} - } - `; + const bgClass = backgroundClasses[background as keyof typeof backgroundClasses] || backgroundClasses.aurora; + const radiusClass = borderRadiusClasses[borderRadius as keyof typeof borderRadiusClasses] || borderRadiusClasses.soft; + const widthClass = contentWidthClasses[contentWidth as keyof typeof contentWidthClasses] || contentWidthClasses.medium; return ( - - - {BackgroundComponent && } - {children} - +
+
+ {children} +
+
); -}; +} + +export function TeamCardGrid({ members }: { members: TeamMember[] }) { + return ( +
+ {members.map((member) => ( + + ))} +
+ ); +} \ No newline at end of file