9044869fa4
All checks were successful
Deploy to Coolify / deploy (push) Successful in 44s
- Next.js 14 + TypeScript + Tailwind CSS - Glassmorphism design with ambient orbs - Cards: Light x2, Temperature, AirPurifier, Tasks, Weather, Savings - Home Assistant integration (demo mode if no token) - Vikunja tasks API - Pulse savings API - wttr.in weather - Framer Motion animations - Dark/light theme toggle - Bottom navigation - Dockerfile for deployment
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Sun, Moon } from "lucide-react";
|
|
|
|
interface Props {
|
|
isDark: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export default function ThemeToggle({ isDark, onToggle }: Props) {
|
|
return (
|
|
<motion.button
|
|
onClick={onToggle}
|
|
className="relative w-14 h-7 rounded-full flex items-center cursor-pointer no-select"
|
|
style={{
|
|
background: isDark
|
|
? "rgba(99,102,241,0.3)"
|
|
: "rgba(245,158,11,0.3)",
|
|
border: `1px solid ${isDark ? "rgba(99,102,241,0.5)" : "rgba(245,158,11,0.5)"}`,
|
|
}}
|
|
whileTap={{ scale: 0.9 }}
|
|
>
|
|
<motion.div
|
|
className="absolute w-5 h-5 rounded-full flex items-center justify-center"
|
|
style={{
|
|
background: isDark ? "#6366f1" : "#f59e0b",
|
|
boxShadow: isDark
|
|
? "0 0 8px rgba(99,102,241,0.8)"
|
|
: "0 0 8px rgba(245,158,11,0.8)",
|
|
}}
|
|
animate={{ x: isDark ? 2 : 28 }}
|
|
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
|
>
|
|
{isDark ? (
|
|
<Moon size={10} color="white" />
|
|
) : (
|
|
<Sun size={10} color="white" />
|
|
)}
|
|
</motion.div>
|
|
</motion.button>
|
|
);
|
|
}
|