35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { createContext, useContext, useMemo } from 'react';
|
|
|
|
// A curated palette of visually appealing accent colors from Tailwind's palette
|
|
const ACCENT_COLORS = [
|
|
'#f43f5e', // rose-500
|
|
'#3b82f6', // blue-500
|
|
'#16a34a', // green-600
|
|
'#8b5cf6', // violet-500
|
|
'#f97316', // orange-500
|
|
'#06b6d4', // cyan-500
|
|
'#d946ef', // fuchsia-500
|
|
];
|
|
|
|
const AccentColorContext = createContext<string>(ACCENT_COLORS[0]);
|
|
|
|
export function AccentColorProvider({ children }: { children: React.ReactNode }) {
|
|
const accentColor = useMemo(() => {
|
|
// This calculation ensures the color is stable for the duration
|
|
const interval = 180 * 60 * 1000; // 180 minutes in milliseconds
|
|
const timeBucket = Math.floor(Date.now() / interval);
|
|
return ACCENT_COLORS[timeBucket % ACCENT_COLORS.length];
|
|
}, []); // Empty dependency array means this runs only once on mount
|
|
|
|
return (
|
|
<AccentColorContext.Provider value={accentColor}>
|
|
{children}
|
|
</AccentColorContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAccentColor() {
|
|
return useContext(AccentColorContext);
|
|
} |