// Format for day display
const day = time.getDate().toString().padStart(2, "0");
const month = (time.getMonth() + 1).toString().padStart(2, "0");
const colorMap = {
greenClassic: {
dark: {
digits: "text-green-400",
background: "bg-green-950",
glow: "shadow-[0_0_10px_rgba(74,222,128,VAR)]",
border: "border-green-700",
inner: "bg-black"
},
light: {
digits: "text-green-600",
background: "bg-green-100",
glow: "shadow-[0_0_10px_rgba(74,222,128,VAR)]",
border: "border-green-400",
inner: "bg-white"
}
},
purpleTeal: {
dark: {
digits: "text-teal-400",
background: "bg-purple-900",
glow: "shadow-[0_0_10px_rgba(45,212,191,VAR)]",
border: "border-purple-600",
inner: "bg-black"
},
light: {
digits: "text-purple-600",
background: "bg-teal-100",
glow: "shadow-[0_0_10px_rgba(147,51,234,VAR)]",
border: "border-teal-400",
inner: "bg-white"
}
},
pinkTeal: {
dark: {
digits: "text-pink-500",
background: "bg-teal-900",
glow: "shadow-[0_0_10px_rgba(236,72,153,VAR)]",
border: "border-teal-700",
inner: "bg-black"
},
light: {
digits: "text-teal-600",
background: "bg-pink-100",
glow: "shadow-[0_0_10px_rgba(13,148,136,VAR)]",
border: "border-pink-400",
inner: "bg-white"
}
},
pinkPurple: {
dark: {
digits: "text-pink-400",
background: "bg-purple-950",
glow: "shadow-[0_0_10px_rgba(236,72,153,VAR)]",
border: "border-pink-500",
inner: "bg-black"
},
light: {
digits: "text-purple-600",
background: "bg-pink-100",
glow: "shadow-[0_0_10px_rgba(147,51,234,VAR)]",
border: "border-pink-400",
inner: "bg-white"
}
},
yellowPink: {
dark: {
digits: "text-yellow-300",
background: "bg-gray-900",
glow: "shadow-[0_0_10px_rgba(250,204,21,VAR)]",
border: "border-pink-500",
inner: "bg-black"
},
light: {
digits: "text-gray-800",
background: "bg-yellow-100",
glow: "shadow-[0_0_10px_rgba(31,41,55,VAR)]",
border: "border-pink-400",
inner: "bg-white"
}
},
neonGreen: {
dark: {
digits: "text-[#0CFF0C]",
background: "bg-black",
glow: "shadow-[0_0_10px_rgba(12,255,12,VAR)]",
border: "border-[#FF7F7F]",
inner: "bg-black"
},
light: {
digits: "text-[#00AA00]",
background: "bg-gray-100",
glow: "shadow-[0_0_10px_rgba(0,170,0,VAR)]",
border: "border-[#FFA3A3]",
inner: "bg-white"
}
}
};
const colors = colorMap[settings.colorScheme]?.[settings.theme] || colorMap.pinkTeal.dark;
const glowValue = colors.glow.replace("VAR", settings.glowIntensity.toString());
// Function to update a single setting
const updateSetting = (key, value) = {
setSettings(prev = ({
...prev,
[key]: value
}));
};