redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs
All checks were successful
Deploy to Coolify / deploy (push) Successful in 4s
All checks were successful
Deploy to Coolify / deploy (push) Successful in 4s
This commit is contained in:
Cosmo
115
app/globals.css
115
app/globals.css
@@ -1,24 +1,24 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--card-bg: rgba(255, 255, 255, 0.05);
|
||||
--bg: #090912;
|
||||
--card-bg: rgba(255, 255, 255, 0.04);
|
||||
--card-border: rgba(255, 255, 255, 0.08);
|
||||
--text-primary: rgba(255, 255, 255, 0.95);
|
||||
--text-secondary: rgba(255, 255, 255, 0.5);
|
||||
--text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--accent: #6366f1;
|
||||
--accent-2: #8b5cf6;
|
||||
}
|
||||
|
||||
.light {
|
||||
--bg: #f0f0f8;
|
||||
--card-bg: rgba(255, 255, 255, 0.8);
|
||||
--card-border: rgba(0, 0, 0, 0.08);
|
||||
--card-bg: rgba(255, 255, 255, 0.75);
|
||||
--card-border: rgba(0, 0, 0, 0.07);
|
||||
--text-primary: rgba(15, 15, 30, 0.95);
|
||||
--text-secondary: rgba(15, 15, 30, 0.5);
|
||||
--text-secondary: rgba(15, 15, 30, 0.45);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -49,7 +49,7 @@ body {
|
||||
border: 1px solid var(--card-border);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
border-radius: 24px;
|
||||
transition: background 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -61,34 +61,35 @@ body {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(99, 102, 241, 0.4);
|
||||
background: rgba(99, 102, 241, 0.35);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Custom toggle switch */
|
||||
/* Big toggle switch (60×32) */
|
||||
.toggle-track {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
border-radius: 14px;
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-thumb {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.toggle-on .toggle-thumb {
|
||||
transform: translateX(24px);
|
||||
transform: translateX(28px);
|
||||
}
|
||||
|
||||
/* Custom range slider */
|
||||
@@ -113,9 +114,9 @@ input[type='range']::-webkit-slider-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #6366f1;
|
||||
background: #f59e0b;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
|
||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
@@ -127,10 +128,10 @@ input[type='range']::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #6366f1;
|
||||
background: #f59e0b;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
|
||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
|
||||
}
|
||||
|
||||
/* Ambient orbs */
|
||||
@@ -150,48 +151,78 @@ input[type='range']::-moz-range-thumb {
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light .progress-bar {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
background: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(90deg, #6366f1, #8b5cf6);
|
||||
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* Glow effects */
|
||||
.glow-indigo {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
|
||||
}
|
||||
|
||||
.glow-emerald {
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.glow-rose {
|
||||
box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
|
||||
}
|
||||
|
||||
.glow-amber {
|
||||
box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
|
||||
box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.glow-blue {
|
||||
box-shadow: 0 0 24px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.glow-green {
|
||||
box-shadow: 0 0 24px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.glow-purple {
|
||||
box-shadow: 0 0 24px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Modal backdrop */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Spin animation for air purifier */
|
||||
@keyframes spin-slow {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.spin-slow {
|
||||
animation: spin-slow 4s linear infinite;
|
||||
}
|
||||
|
||||
/* Orb animations */
|
||||
@keyframes orbMove1 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(40px, -30px) scale(1.05); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.97); }
|
||||
}
|
||||
@keyframes orbMove2 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(-50px, 30px) scale(1.08); }
|
||||
66% { transform: translate(30px, -20px) scale(0.95); }
|
||||
}
|
||||
@keyframes orbMove3 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(20px, 40px) scale(1.04); }
|
||||
}
|
||||
@keyframes orbMove4 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
50% { transform: translate(-30px, -20px) scale(1.06); }
|
||||
}
|
||||
|
||||
191
app/page.tsx
191
app/page.tsx
@@ -10,8 +10,20 @@ import AirPurifierCard from "@/components/cards/AirPurifierCard";
|
||||
import TasksCard from "@/components/cards/TasksCard";
|
||||
import WeatherCard from "@/components/cards/WeatherCard";
|
||||
import SavingsCard from "@/components/cards/SavingsCard";
|
||||
import WeatherSavingsCard from "@/components/cards/WeatherSavingsCard";
|
||||
import { useHA, useWeather, useTasks, useSavings } from "@/hooks/useHA";
|
||||
|
||||
// Stagger container variants
|
||||
const containerVariants = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.07 } },
|
||||
};
|
||||
|
||||
const cardVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
const [isDark, setIsDark] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState("home");
|
||||
@@ -54,39 +66,47 @@ export default function Home() {
|
||||
>
|
||||
{/* Ambient orbs */}
|
||||
<div
|
||||
className="orb animate-[orbMove1_20s_ease-in-out_infinite]"
|
||||
className="orb"
|
||||
style={{
|
||||
width: 400,
|
||||
height: 400,
|
||||
top: "-10%",
|
||||
left: "-5%",
|
||||
background: isDark
|
||||
? "rgba(99,102,241,0.12)"
|
||||
: "rgba(99,102,241,0.08)",
|
||||
width: 480,
|
||||
height: 480,
|
||||
top: "-12%",
|
||||
left: "-8%",
|
||||
background: isDark ? "rgba(245,158,11,0.09)" : "rgba(245,158,11,0.06)",
|
||||
animation: "orbMove1 22s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="orb animate-[orbMove2_25s_ease-in-out_infinite]"
|
||||
className="orb"
|
||||
style={{
|
||||
width: 350,
|
||||
height: 350,
|
||||
bottom: "5%",
|
||||
right: "-5%",
|
||||
background: isDark
|
||||
? "rgba(139,92,246,0.1)"
|
||||
: "rgba(139,92,246,0.06)",
|
||||
width: 420,
|
||||
height: 420,
|
||||
bottom: "0%",
|
||||
right: "-8%",
|
||||
background: isDark ? "rgba(139,92,246,0.1)" : "rgba(139,92,246,0.06)",
|
||||
animation: "orbMove2 28s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="orb animate-[orbMove3_30s_ease-in-out_infinite]"
|
||||
className="orb"
|
||||
style={{
|
||||
width: 280,
|
||||
height: 280,
|
||||
top: "40%",
|
||||
left: "40%",
|
||||
background: isDark
|
||||
? "rgba(6,182,212,0.06)"
|
||||
: "rgba(6,182,212,0.04)",
|
||||
width: 360,
|
||||
height: 360,
|
||||
top: "30%",
|
||||
left: "35%",
|
||||
background: isDark ? "rgba(59,130,246,0.07)" : "rgba(59,130,246,0.04)",
|
||||
animation: "orbMove3 34s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="orb"
|
||||
style={{
|
||||
width: 300,
|
||||
height: 300,
|
||||
top: "55%",
|
||||
right: "25%",
|
||||
background: isDark ? "rgba(16,185,129,0.06)" : "rgba(16,185,129,0.04)",
|
||||
animation: "orbMove4 26s ease-in-out infinite",
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -109,7 +129,7 @@ export default function Home() {
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<span
|
||||
className="text-xs px-3 py-1 rounded-full"
|
||||
className="text-xs px-3 py-1 rounded-full font-semibold"
|
||||
style={{
|
||||
background: "rgba(245,158,11,0.12)",
|
||||
color: "#f59e0b",
|
||||
@@ -125,37 +145,41 @@ export default function Home() {
|
||||
{/* Content area */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
{/* ═══════════════ HOME TAB ═══════════════ */}
|
||||
{activeTab === "home" && (
|
||||
<motion.div
|
||||
key="home"
|
||||
className="h-full grid grid-cols-4 grid-rows-2 gap-3"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="h-full"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{/* 3-col grid:
|
||||
Row 1: [Свет] [Климат] [Задачи]
|
||||
Row 2: [Воздух ×2] [Погода+Накопления]
|
||||
*/}
|
||||
<div
|
||||
className="h-full grid gap-3"
|
||||
style={{
|
||||
gridTemplateColumns: "1fr 1fr 1fr",
|
||||
gridTemplateRows: "1fr 1fr",
|
||||
}}
|
||||
>
|
||||
{/* Row 1 */}
|
||||
{/* Свет Гостиная */}
|
||||
<motion.div variants={cardVariants}>
|
||||
<LightCard
|
||||
entityId="light.living_room"
|
||||
name="Свет Гостиная"
|
||||
name="Гостиная"
|
||||
state={livingRoom?.state || "off"}
|
||||
brightness={livingRoom?.attributes?.brightness}
|
||||
showSlider={true}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Свет Спальня */}
|
||||
<LightCard
|
||||
entityId="light.bedroom"
|
||||
name="Свет Спальня"
|
||||
state={bedroom?.state || "off"}
|
||||
brightness={bedroom?.attributes?.brightness}
|
||||
showSlider={false}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
|
||||
{/* Температура */}
|
||||
{/* Термостат */}
|
||||
<motion.div variants={cardVariants}>
|
||||
<TemperatureCard
|
||||
entityId="climate.thermostat"
|
||||
currentTemp={thermostat?.attributes?.current_temperature}
|
||||
@@ -163,64 +187,77 @@ export default function Home() {
|
||||
state={thermostat?.state || "off"}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Очиститель воздуха */}
|
||||
{/* Задачи */}
|
||||
<motion.div variants={cardVariants}>
|
||||
<TasksCard tasks={tasks} onUpdate={refreshTasks} />
|
||||
</motion.div>
|
||||
|
||||
{/* Очиститель воздуха — 2 колонки */}
|
||||
<motion.div
|
||||
variants={cardVariants}
|
||||
style={{ gridColumn: "span 2" }}
|
||||
>
|
||||
<AirPurifierCard
|
||||
entityId="fan.air_purifier"
|
||||
state={airPurifier?.state || "off"}
|
||||
presetMode={airPurifier?.attributes?.preset_mode}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Row 2 */}
|
||||
{/* Задачи — 2 колонки */}
|
||||
<div className="col-span-2">
|
||||
<TasksCard
|
||||
tasks={tasks}
|
||||
onUpdate={refreshTasks}
|
||||
/>
|
||||
{/* Погода + Накопления — правый нижний */}
|
||||
<motion.div variants={cardVariants}>
|
||||
<WeatherSavingsCard weather={weather} savings={savings} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Погода */}
|
||||
<WeatherCard weather={weather} />
|
||||
|
||||
{/* Накопления */}
|
||||
<SavingsCard savings={savings} />
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ═══════════════ DEVICES TAB ═══════════════ */}
|
||||
{activeTab === "devices" && (
|
||||
<motion.div
|
||||
key="devices"
|
||||
className="h-full grid grid-cols-3 gap-3"
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
className="h-full grid gap-3"
|
||||
style={{
|
||||
gridTemplateColumns: "1fr 1fr 1fr",
|
||||
gridTemplateRows: "1fr 1fr",
|
||||
}}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<motion.div variants={cardVariants}>
|
||||
<LightCard
|
||||
entityId="light.living_room"
|
||||
name="Свет Гостиная"
|
||||
name="Гостиная"
|
||||
state={livingRoom?.state || "off"}
|
||||
brightness={livingRoom?.attributes?.brightness}
|
||||
showSlider={true}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div variants={cardVariants}>
|
||||
<LightCard
|
||||
entityId="light.bedroom"
|
||||
name="Свет Спальня"
|
||||
name="Спальня"
|
||||
state={bedroom?.state || "off"}
|
||||
brightness={bedroom?.attributes?.brightness}
|
||||
showSlider={false}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div variants={cardVariants}>
|
||||
<AirPurifierCard
|
||||
entityId="fan.air_purifier"
|
||||
state={airPurifier?.state || "off"}
|
||||
presetMode={airPurifier?.attributes?.preset_mode}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
<div className="col-span-2">
|
||||
</motion.div>
|
||||
<motion.div variants={cardVariants} style={{ gridColumn: "span 2" }}>
|
||||
<TemperatureCard
|
||||
entityId="climate.thermostat"
|
||||
currentTemp={thermostat?.attributes?.current_temperature}
|
||||
@@ -228,10 +265,11 @@ export default function Home() {
|
||||
state={thermostat?.state || "off"}
|
||||
onUpdate={handleHAUpdate}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ═══════════════ TASKS TAB ═══════════════ */}
|
||||
{activeTab === "tasks" && (
|
||||
<motion.div
|
||||
key="tasks"
|
||||
@@ -245,6 +283,7 @@ export default function Home() {
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* ═══════════════ SETTINGS TAB ═══════════════ */}
|
||||
{activeTab === "settings" && (
|
||||
<motion.div
|
||||
key="settings"
|
||||
@@ -271,35 +310,23 @@ export default function Home() {
|
||||
|
||||
<div className="space-y-3 text-left">
|
||||
{[
|
||||
{
|
||||
label: "HA URL",
|
||||
value:
|
||||
process.env.NEXT_PUBLIC_APP_URL
|
||||
? "Настроен"
|
||||
: "http://192.168.31.110:8123",
|
||||
},
|
||||
{ label: "HA URL", value: "Настроен" },
|
||||
{ label: "HA Token", value: isDemo ? "❌ Не настроен" : "✅ Настроен" },
|
||||
{ label: "Vikunja", value: "✅ Подключён" },
|
||||
{ label: "Pulse API", value: "✅ Подключён" },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex justify-between items-center px-4 py-3 rounded-xl"
|
||||
className="flex justify-between items-center px-4 py-3 rounded-2xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.06)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-sm"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
{item.label}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -9,16 +9,17 @@ interface Props {
|
||||
}
|
||||
|
||||
const TABS = [
|
||||
{ id: "home", label: "Главная", icon: Home },
|
||||
{ id: "devices", label: "Устройства", icon: Cpu },
|
||||
{ id: "tasks", label: "Задачи", icon: CheckSquare },
|
||||
{ id: "settings", label: "Настройки", icon: Settings },
|
||||
{ id: "home", label: "Главная", icon: Home, color: "#6366f1" },
|
||||
{ id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
|
||||
{ id: "tasks", label: "Задачи", icon: CheckSquare, color: "#8b5cf6" },
|
||||
{ id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
|
||||
];
|
||||
|
||||
export default function BottomNav({ active, onChange }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card px-4 py-2 flex items-center justify-around no-select"
|
||||
className="glass-card px-3 py-2 flex items-center justify-around no-select"
|
||||
style={{ borderRadius: "20px" }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
@@ -30,33 +31,29 @@ export default function BottomNav({ active, onChange }: Props) {
|
||||
<motion.button
|
||||
key={tab.id}
|
||||
onClick={() => onChange(tab.id)}
|
||||
className="flex flex-col items-center gap-1 px-6 py-2 rounded-xl relative"
|
||||
whileTap={{ scale: 0.88 }}
|
||||
style={{
|
||||
background: isActive
|
||||
? "rgba(99,102,241,0.15)"
|
||||
: "transparent",
|
||||
}}
|
||||
className="flex flex-col items-center gap-1.5 px-8 py-2 rounded-2xl relative"
|
||||
whileTap={{ scale: 0.85 }}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-xl"
|
||||
className="absolute inset-0 rounded-2xl"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1))",
|
||||
border: "1px solid rgba(99,102,241,0.3)",
|
||||
background: `${tab.color}15`,
|
||||
border: `1px solid ${tab.color}30`,
|
||||
boxShadow: `0 0 16px ${tab.color}20`,
|
||||
}}
|
||||
layoutId="navActive"
|
||||
transition={{ type: "spring", stiffness: 400, damping: 30 }}
|
||||
transition={{ type: "spring", stiffness: 450, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
<Icon
|
||||
size={22}
|
||||
color={isActive ? "#6366f1" : "var(--text-secondary)"}
|
||||
color={isActive ? tab.color : "var(--text-secondary)"}
|
||||
strokeWidth={isActive ? 2 : 1.5}
|
||||
/>
|
||||
<span
|
||||
className="text-xs font-medium"
|
||||
style={{ color: isActive ? "#6366f1" : "var(--text-secondary)" }}
|
||||
className="text-xs font-semibold"
|
||||
style={{ color: isActive ? tab.color : "var(--text-secondary)" }}
|
||||
>
|
||||
{tab.label}
|
||||
</span>
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
||||
);
|
||||
setDate(
|
||||
now.toLocaleDateString("ru-RU", {
|
||||
weekday: "long",
|
||||
weekday: "short",
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
})
|
||||
@@ -50,6 +50,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card px-6 py-3 flex items-center justify-between no-select"
|
||||
style={{ borderRadius: "20px" }}
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
@@ -57,8 +58,8 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
||||
{/* Time & Date */}
|
||||
<div className="flex items-baseline gap-4">
|
||||
<span
|
||||
className="text-5xl font-bold tracking-tight"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
className="font-black tracking-tight leading-none"
|
||||
style={{ fontSize: "42px", color: "var(--text-primary)" }}
|
||||
>
|
||||
{time}
|
||||
</span>
|
||||
@@ -70,41 +71,35 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Weather */}
|
||||
{/* Weather pill */}
|
||||
{weather && (
|
||||
<motion.div
|
||||
className="flex items-center gap-3 px-4 py-2 rounded-xl"
|
||||
className="flex items-center gap-3 px-5 py-2 rounded-2xl"
|
||||
style={{
|
||||
background: "rgba(99,102,241,0.1)",
|
||||
border: "1px solid rgba(99,102,241,0.2)",
|
||||
background: "rgba(59,130,246,0.1)",
|
||||
border: "1px solid rgba(59,130,246,0.22)",
|
||||
}}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<span className="text-2xl">
|
||||
<span className="text-2xl leading-none">
|
||||
{getWeatherEmoji(weather.weatherCode)}
|
||||
</span>
|
||||
<div>
|
||||
<div
|
||||
className="text-xl font-bold"
|
||||
className="text-xl font-black leading-tight"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{weather.temp}°C
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Ощущается {weather.feelsLike}°
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-xs ml-2 max-w-[80px] text-center leading-tight"
|
||||
className="text-xs leading-tight"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{weather.desc}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -112,7 +107,7 @@ export default function TopBar({ isDark, onToggleTheme, weather }: Props) {
|
||||
<div className="flex items-center gap-3">
|
||||
{weather?.demo && (
|
||||
<span
|
||||
className="text-xs px-2 py-1 rounded-full"
|
||||
className="text-xs px-2.5 py-1 rounded-full font-semibold"
|
||||
style={{
|
||||
background: "rgba(245,158,11,0.15)",
|
||||
color: "#f59e0b",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Wind } from "lucide-react";
|
||||
import { toggleFan, setFanPreset } from "@/lib/api";
|
||||
|
||||
@@ -13,9 +13,9 @@ interface Props {
|
||||
}
|
||||
|
||||
const MODES = [
|
||||
{ id: "Auto", label: "Авто", color: "#06b6d4" },
|
||||
{ id: "Auto", label: "Авто", color: "#10b981" },
|
||||
{ id: "Night", label: "Ночь", color: "#6366f1" },
|
||||
{ id: "High", label: "Макс", color: "#f43f5e" },
|
||||
{ id: "High", label: "Турбо", color: "#f59e0b" },
|
||||
];
|
||||
|
||||
export default function AirPurifierCard({
|
||||
@@ -45,103 +45,138 @@ export default function AirPurifierCard({
|
||||
[entityId, onUpdate]
|
||||
);
|
||||
|
||||
const activeColor =
|
||||
MODES.find((m) => m.id === currentMode)?.color || "#06b6d4";
|
||||
const activeMode = MODES.find((m) => m.id === currentMode) || MODES[0];
|
||||
const accentColor = isOn ? activeMode.color : "rgba(255,255,255,0.3)";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex flex-col justify-between"
|
||||
className="glass-card p-6 h-full flex flex-col"
|
||||
style={
|
||||
isOn
|
||||
? {
|
||||
background: `rgba(6,182,212,0.06)`,
|
||||
border: `1px solid rgba(6,182,212,0.2)`,
|
||||
background: `${activeMode.color}08`,
|
||||
border: `1px solid ${activeMode.color}25`,
|
||||
boxShadow: `0 0 40px ${activeMode.color}10`,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.14 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
{/* Top row: icon + name + toggle */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Animated icon */}
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center flex-shrink-0"
|
||||
style={{
|
||||
background: isOn
|
||||
? "rgba(6,182,212,0.15)"
|
||||
: "rgba(255,255,255,0.06)",
|
||||
background: isOn ? `${activeMode.color}20` : "rgba(255,255,255,0.06)",
|
||||
boxShadow: isOn ? `0 0 28px ${activeMode.color}40` : "none",
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
animate={isOn ? { rotate: 360 } : { rotate: 0 }}
|
||||
transition={
|
||||
isOn
|
||||
? { duration: 3, repeat: Infinity, ease: "linear" }
|
||||
: {}
|
||||
isOn ? { duration: 4, repeat: Infinity, ease: "linear" } : {}
|
||||
}
|
||||
>
|
||||
<Wind
|
||||
size={20}
|
||||
color={isOn ? "#06b6d4" : "var(--text-secondary)"}
|
||||
size={32}
|
||||
color={isOn ? activeMode.color : "rgba(255,255,255,0.3)"}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div
|
||||
className="text-sm font-semibold"
|
||||
className="text-xl font-bold truncate"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Очиститель воздуха
|
||||
</div>
|
||||
<div
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: isOn ? activeColor : "var(--text-secondary)" }}
|
||||
className="text-sm mt-0.5 font-medium"
|
||||
style={{ color: isOn ? activeMode.color : "var(--text-secondary)" }}
|
||||
>
|
||||
{isOn ? currentMode : "Выключен"}
|
||||
{isOn ? activeMode.label : "Выключен"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle */}
|
||||
<motion.div
|
||||
className={`toggle-track ${isOn ? "toggle-on" : ""}`}
|
||||
style={{ background: isOn ? "#06b6d4" : "rgba(255,255,255,0.1)" }}
|
||||
style={{
|
||||
background: isOn ? activeMode.color : "rgba(255,255,255,0.1)",
|
||||
boxShadow: isOn ? `0 0 16px ${activeMode.color}60` : "none",
|
||||
}}
|
||||
onClick={handleToggle}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
whileTap={{ scale: 0.88 }}
|
||||
>
|
||||
<div className="toggle-thumb" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Mode buttons */}
|
||||
<AnimatePresence>
|
||||
{isOn && (
|
||||
<motion.div
|
||||
className="flex gap-2 mt-4"
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
className="flex gap-3 mt-auto pt-4"
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 8 }}
|
||||
transition={{ duration: 0.22 }}
|
||||
>
|
||||
{MODES.map((mode) => (
|
||||
{MODES.map((mode) => {
|
||||
const isActive = currentMode === mode.id;
|
||||
return (
|
||||
<motion.button
|
||||
key={mode.id}
|
||||
onClick={() => handleMode(mode.id)}
|
||||
className="flex-1 py-2 rounded-xl text-xs font-medium"
|
||||
className="flex-1 py-2.5 rounded-2xl text-sm font-semibold"
|
||||
style={
|
||||
currentMode === mode.id
|
||||
isActive
|
||||
? {
|
||||
background: `${mode.color}25`,
|
||||
border: `1px solid ${mode.color}60`,
|
||||
background: `${mode.color}22`,
|
||||
border: `1.5px solid ${mode.color}60`,
|
||||
color: mode.color,
|
||||
boxShadow: `0 0 14px ${mode.color}30`,
|
||||
}
|
||||
: {
|
||||
background: "rgba(255,255,255,0.06)",
|
||||
background: "rgba(255,255,255,0.05)",
|
||||
border: "1px solid rgba(255,255,255,0.08)",
|
||||
color: "var(--text-secondary)",
|
||||
}
|
||||
}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
whileTap={{ scale: 0.88 }}
|
||||
>
|
||||
{mode.label}
|
||||
</motion.button>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Offline state bottom fill */}
|
||||
{!isOn && (
|
||||
<div className="mt-auto flex gap-3 pt-4">
|
||||
{MODES.map((mode) => (
|
||||
<div
|
||||
key={mode.id}
|
||||
className="flex-1 py-2.5 rounded-2xl text-sm font-semibold text-center"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.03)",
|
||||
border: "1px solid rgba(255,255,255,0.05)",
|
||||
color: "rgba(255,255,255,0.15)",
|
||||
}}
|
||||
>
|
||||
{mode.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Lightbulb } from "lucide-react";
|
||||
import { toggleLight, setLightBrightness } from "@/lib/api";
|
||||
import { getBrightnessPct, pctToBrightness } from "@/lib/ha";
|
||||
@@ -47,50 +47,42 @@ export default function LightCard({
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex flex-col justify-between"
|
||||
className="glass-card p-6 h-full flex flex-col justify-between"
|
||||
style={
|
||||
isOn
|
||||
? {
|
||||
background: "rgba(245,158,11,0.08)",
|
||||
border: "1px solid rgba(245,158,11,0.2)",
|
||||
boxShadow: "0 0 30px rgba(245,158,11,0.1)",
|
||||
background: "rgba(245,158,11,0.07)",
|
||||
border: "1px solid rgba(245,158,11,0.22)",
|
||||
boxShadow: "0 0 40px rgba(245,158,11,0.08), inset 0 1px 0 rgba(245,158,11,0.1)",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Top row: icon + toggle */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
|
||||
{/* Icon */}
|
||||
<motion.div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{
|
||||
background: isOn
|
||||
? "rgba(245,158,11,0.2)"
|
||||
? "rgba(245,158,11,0.18)"
|
||||
: "rgba(255,255,255,0.06)",
|
||||
boxShadow: isOn ? "0 0 28px rgba(245,158,11,0.35)" : "none",
|
||||
}}
|
||||
animate={{ scale: isOn ? 1 : 0.97 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Lightbulb
|
||||
size={20}
|
||||
color={isOn ? "#f59e0b" : "var(--text-secondary)"}
|
||||
size={32}
|
||||
color={isOn ? "#f59e0b" : "rgba(255,255,255,0.35)"}
|
||||
fill={isOn ? "#f59e0b" : "none"}
|
||||
strokeWidth={isOn ? 1.5 : 2}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: isOn ? "#f59e0b" : "var(--text-secondary)" }}
|
||||
>
|
||||
{isOn ? (showSlider ? `${localBrightness}%` : "Включён") : "Выключен"}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Toggle */}
|
||||
<motion.div
|
||||
@@ -99,36 +91,48 @@ export default function LightCard({
|
||||
background: isOn
|
||||
? "#f59e0b"
|
||||
: "rgba(255,255,255,0.1)",
|
||||
boxShadow: isOn ? "0 0 16px rgba(245,158,11,0.5)" : "none",
|
||||
}}
|
||||
onClick={handleToggle}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
whileTap={{ scale: 0.88 }}
|
||||
>
|
||||
<div className="toggle-thumb" />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Name + state */}
|
||||
<div className="mt-auto">
|
||||
<div
|
||||
className="text-xl font-bold leading-tight"
|
||||
style={{ color: isOn ? "#f59e0b" : "var(--text-primary)" }}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
className="text-sm mt-1 font-medium"
|
||||
style={{ color: isOn ? "rgba(245,158,11,0.7)" : "var(--text-secondary)" }}
|
||||
>
|
||||
{isOn ? (showSlider ? `Яркость ${localBrightness}%` : "Включён") : "Выключен"}
|
||||
</div>
|
||||
|
||||
{/* Brightness slider */}
|
||||
<AnimatePresence>
|
||||
{showSlider && isOn && (
|
||||
<motion.div
|
||||
className="mt-4"
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<div className="relative pt-1">
|
||||
<div
|
||||
className="text-xs mb-2 flex justify-between"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
<span>Яркость</span>
|
||||
<span>{localBrightness}%</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-l-full pointer-events-none"
|
||||
className="absolute left-0 rounded-full pointer-events-none"
|
||||
style={{
|
||||
width: `${localBrightness}%`,
|
||||
background: "linear-gradient(90deg, rgba(245,158,11,0.4), rgba(245,158,11,0.8))",
|
||||
height: "6px",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
top: "calc(50% + 4px)",
|
||||
background: "linear-gradient(90deg, rgba(245,158,11,0.5), rgba(245,158,11,0.9))",
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
@@ -137,14 +141,20 @@ export default function LightCard({
|
||||
max={100}
|
||||
value={localBrightness}
|
||||
onChange={(e) => setLocalBrightness(parseInt(e.target.value))}
|
||||
onMouseUp={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
||||
onTouchEnd={(e) => handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))}
|
||||
onMouseUp={(e) =>
|
||||
handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))
|
||||
}
|
||||
onTouchEnd={(e) =>
|
||||
handleBrightnessChange(parseInt((e.target as HTMLInputElement).value))
|
||||
}
|
||||
className="w-full relative z-10"
|
||||
style={{ background: "transparent" }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { PiggyBank } from "lucide-react";
|
||||
import { Target } from "lucide-react";
|
||||
|
||||
interface Saving {
|
||||
id: number;
|
||||
@@ -17,31 +17,51 @@ interface Props {
|
||||
}
|
||||
|
||||
function formatAmount(n: number): string {
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
||||
if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
|
||||
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}М`;
|
||||
if (n >= 1_000) return `${Math.round(n / 1_000)}К`;
|
||||
return String(n);
|
||||
}
|
||||
|
||||
const COLORS = ["#f59e0b", "#3b82f6", "#10b981", "#8b5cf6", "#f43f5e"];
|
||||
|
||||
export default function SavingsCard({ savings }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex flex-col"
|
||||
className="glass-card p-6 h-full flex flex-col"
|
||||
style={{
|
||||
background: "rgba(99,102,241,0.04)",
|
||||
border: "1px solid rgba(99,102,241,0.12)",
|
||||
background: "rgba(245,158,11,0.04)",
|
||||
border: "1px solid rgba(245,158,11,0.15)",
|
||||
}}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.21 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<PiggyBank size={18} color="#6366f1" />
|
||||
<span
|
||||
className="text-sm font-semibold"
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(245,158,11,0.2)",
|
||||
boxShadow: "0 0 16px rgba(245,158,11,0.3)",
|
||||
}}
|
||||
>
|
||||
<Target size={20} color="#f59e0b" />
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-base font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Накопления
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{savings.length} {savings.length === 1 ? "цель" : "целей"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-4">
|
||||
@@ -50,56 +70,57 @@ export default function SavingsCard({ savings }: Props) {
|
||||
100,
|
||||
Math.round((s.current_amount / s.target_amount) * 100)
|
||||
);
|
||||
const color = s.color || "#6366f1";
|
||||
const color = s.color || COLORS[i % COLORS.length];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={s.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
transition={{ delay: 0.1 + i * 0.1 }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{s.icon && <span className="text-base">{s.icon}</span>}
|
||||
<span
|
||||
className="text-xs font-medium"
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{s.name}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className="text-xs font-semibold"
|
||||
className="text-sm font-black"
|
||||
style={{ color }}
|
||||
>
|
||||
{pct}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar with glow */}
|
||||
<div className="progress-bar">
|
||||
<motion.div
|
||||
className="progress-fill"
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${color}aa, ${color})`,
|
||||
width: `${pct}%`,
|
||||
background: `linear-gradient(90deg, ${color}80, ${color})`,
|
||||
boxShadow: `0 0 12px ${color}60`,
|
||||
}}
|
||||
initial={{ width: "0%" }}
|
||||
animate={{ width: `${pct}%` }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
delay: i * 0.2,
|
||||
duration: 1.2,
|
||||
delay: 0.2 + i * 0.15,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex justify-between text-xs mt-1"
|
||||
className="flex justify-between text-xs mt-1.5"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
<span>{formatAmount(s.current_amount)} ₽</span>
|
||||
<span>цель: {formatAmount(s.target_amount)} ₽</span>
|
||||
<span>из {formatAmount(s.target_amount)} ₽</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { CheckSquare, Square, Plus } from "lucide-react";
|
||||
import { CheckCircle2, Circle, Plus, ListTodo } from "lucide-react";
|
||||
import { createTask, toggleTask } from "@/lib/api";
|
||||
import AddTaskModal from "../AddTaskModal";
|
||||
|
||||
@@ -49,57 +49,84 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex flex-col"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="glass-card p-6 h-full flex flex-col"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.14 }}
|
||||
whileHover={{ scale: 1.005 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(139,92,246,0.18)",
|
||||
boxShadow: "0 0 18px rgba(139,92,246,0.3)",
|
||||
}}
|
||||
>
|
||||
<ListTodo size={20} color="#8b5cf6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckSquare size={18} color="#6366f1" />
|
||||
<span
|
||||
className="text-sm font-semibold"
|
||||
<div
|
||||
className="text-base font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Задачи сегодня
|
||||
</span>
|
||||
Задачи
|
||||
</div>
|
||||
<div
|
||||
className="text-xs mt-0.5"
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{pending.length} осталось из {localTasks.length}
|
||||
{pending.length > 0
|
||||
? `${pending.length} из ${localTasks.length} осталось`
|
||||
: "Всё готово!"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add button */}
|
||||
<motion.button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
|
||||
boxShadow: "0 0 12px rgba(99,102,241,0.4)",
|
||||
background: "linear-gradient(135deg, #8b5cf6, #6366f1)",
|
||||
boxShadow: "0 0 18px rgba(139,92,246,0.45)",
|
||||
}}
|
||||
whileTap={{ scale: 0.85 }}
|
||||
whileTap={{ scale: 0.82 }}
|
||||
>
|
||||
<Plus size={16} color="white" />
|
||||
<Plus size={20} color="white" strokeWidth={2.5} />
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-2 pr-1">
|
||||
<AnimatePresence>
|
||||
{/* Task list */}
|
||||
<div className="flex-1 overflow-y-auto space-y-2 pr-0.5">
|
||||
<AnimatePresence initial={false}>
|
||||
{localTasks.length === 0 && (
|
||||
<motion.div
|
||||
className="text-center py-8"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="flex flex-col items-center justify-center h-full py-8 gap-3"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
>
|
||||
<div className="text-3xl mb-2">🎉</div>
|
||||
<div className="text-4xl">🎉</div>
|
||||
<div
|
||||
className="text-sm"
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Всё сделано!
|
||||
Всё сделано на сегодня!
|
||||
</div>
|
||||
<motion.button
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="mt-2 px-5 py-2.5 rounded-xl text-sm font-semibold"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2))",
|
||||
border: "1px solid rgba(139,92,246,0.35)",
|
||||
color: "#8b5cf6",
|
||||
}}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
+ Добавить задачу
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@@ -107,32 +134,36 @@ export default function TasksCard({ tasks, onUpdate }: Props) {
|
||||
<motion.div
|
||||
key={task.id}
|
||||
layout
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10, height: 0 }}
|
||||
className="flex items-center gap-3 px-3 py-2.5 rounded-xl cursor-pointer"
|
||||
initial={{ opacity: 0, x: -12, height: 0 }}
|
||||
animate={{ opacity: 1, x: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, x: 12, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
|
||||
style={{
|
||||
background: task.done
|
||||
? "rgba(16,185,129,0.06)"
|
||||
? "rgba(139,92,246,0.05)"
|
||||
: "rgba(255,255,255,0.04)",
|
||||
border: task.done
|
||||
? "1px solid rgba(16,185,129,0.15)"
|
||||
? "1px solid rgba(139,92,246,0.15)"
|
||||
: "1px solid rgba(255,255,255,0.06)",
|
||||
}}
|
||||
onClick={() => handleToggle(task)}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.8 }}
|
||||
animate={{ scale: 1 }}
|
||||
>
|
||||
{task.done ? (
|
||||
<CheckSquare size={16} color="#10b981" />
|
||||
<CheckCircle2 size={20} color="#8b5cf6" strokeWidth={2} />
|
||||
) : (
|
||||
<Square size={16} color="var(--text-secondary)" />
|
||||
<Circle size={20} color="rgba(255,255,255,0.3)" strokeWidth={1.5} />
|
||||
)}
|
||||
</motion.div>
|
||||
<span
|
||||
className="text-xs font-medium flex-1 leading-snug"
|
||||
className="text-sm font-medium flex-1 leading-snug"
|
||||
style={{
|
||||
color: task.done
|
||||
? "var(--text-secondary)"
|
||||
: "var(--text-primary)",
|
||||
color: task.done ? "var(--text-secondary)" : "var(--text-primary)",
|
||||
textDecoration: task.done ? "line-through" : "none",
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -22,6 +22,7 @@ export default function TemperatureCard({
|
||||
}: Props) {
|
||||
const [target, setTarget] = useState(targetTemp || 22);
|
||||
const isHeating = state === "heat";
|
||||
const isActive = state !== "off";
|
||||
|
||||
const adjust = useCallback(
|
||||
async (delta: number) => {
|
||||
@@ -33,97 +34,122 @@ export default function TemperatureCard({
|
||||
[target, entityId, onUpdate]
|
||||
);
|
||||
|
||||
const tempDiff = currentTemp ? currentTemp - target : 0;
|
||||
const accentColor = isHeating ? "#f43f5e" : "#3b82f6";
|
||||
const accentBg = isHeating ? "rgba(244,63,94,0.08)" : "rgba(59,130,246,0.08)";
|
||||
const accentBorder = isHeating ? "rgba(244,63,94,0.2)" : "rgba(59,130,246,0.2)";
|
||||
const accentGlow = isHeating ? "rgba(244,63,94,0.25)" : "rgba(59,130,246,0.2)";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex flex-col justify-between"
|
||||
className="glass-card p-6 h-full flex flex-col justify-between"
|
||||
style={
|
||||
isHeating
|
||||
isActive
|
||||
? {
|
||||
background: "rgba(244,63,94,0.06)",
|
||||
border: "1px solid rgba(244,63,94,0.15)",
|
||||
background: accentBg,
|
||||
border: `1px solid ${accentBorder}`,
|
||||
boxShadow: `0 0 40px ${accentGlow}`,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.07 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
{/* Icon row */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center mb-3"
|
||||
<motion.div
|
||||
className="w-16 h-16 rounded-2xl flex items-center justify-center"
|
||||
style={{
|
||||
background: isHeating
|
||||
? "rgba(244,63,94,0.15)"
|
||||
: "rgba(255,255,255,0.06)",
|
||||
background: isActive ? `${accentColor}22` : "rgba(255,255,255,0.06)",
|
||||
boxShadow: isActive ? `0 0 28px ${accentGlow}` : "none",
|
||||
}}
|
||||
>
|
||||
<Thermometer
|
||||
size={20}
|
||||
color={isHeating ? "#f43f5e" : "var(--text-secondary)"}
|
||||
size={32}
|
||||
color={isActive ? accentColor : "rgba(255,255,255,0.35)"}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Status badge */}
|
||||
<div
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
className="px-3 py-1 rounded-full text-xs font-semibold"
|
||||
style={{
|
||||
background: isActive ? `${accentColor}18` : "rgba(255,255,255,0.06)",
|
||||
color: isActive ? accentColor : "var(--text-secondary)",
|
||||
border: `1px solid ${isActive ? accentColor + "40" : "rgba(255,255,255,0.08)"}`,
|
||||
}}
|
||||
>
|
||||
Термостат
|
||||
</div>
|
||||
<div
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: isHeating ? "#f43f5e" : "var(--text-secondary)" }}
|
||||
>
|
||||
{isHeating ? "Нагрев" : "Ожидание"}
|
||||
{isHeating ? "Нагрев" : isActive ? "Охлаждение" : "Выкл"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
{/* Current temperature — BIG */}
|
||||
<div className="my-4">
|
||||
<div
|
||||
className="text-3xl font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
className="font-black leading-none tracking-tight"
|
||||
style={{
|
||||
fontSize: "56px",
|
||||
color: isActive ? accentColor : "var(--text-primary)",
|
||||
textShadow: isActive ? `0 0 40px ${accentColor}60` : "none",
|
||||
}}
|
||||
>
|
||||
{currentTemp?.toFixed(1) ?? "—"}°
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
className="text-sm mt-1"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
текущая
|
||||
</div>
|
||||
текущая температура
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
{/* Target temperature controls */}
|
||||
<div
|
||||
className="text-xs"
|
||||
className="flex items-center justify-between px-4 py-3 rounded-2xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.07)",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="text-sm font-medium"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Целевая температура
|
||||
</div>
|
||||
Цель
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<motion.button
|
||||
onClick={() => adjust(-0.5)}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
||||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||||
whileTap={{ scale: 0.85 }}
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
}}
|
||||
whileTap={{ scale: 0.82 }}
|
||||
>
|
||||
<Minus size={14} color="var(--text-primary)" />
|
||||
<Minus size={16} color="var(--text-primary)" />
|
||||
</motion.button>
|
||||
|
||||
<span
|
||||
className="text-lg font-bold min-w-[48px] text-center"
|
||||
style={{ color: "#6366f1" }}
|
||||
className="text-2xl font-bold min-w-[56px] text-center"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{target}°
|
||||
</span>
|
||||
|
||||
<motion.button
|
||||
onClick={() => adjust(0.5)}
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center"
|
||||
style={{ background: "rgba(99,102,241,0.2)" }}
|
||||
whileTap={{ scale: 0.85 }}
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{
|
||||
background: `${accentColor}22`,
|
||||
border: `1px solid ${accentColor}50`,
|
||||
}}
|
||||
whileTap={{ scale: 0.82 }}
|
||||
>
|
||||
<Plus size={14} color="#6366f1" />
|
||||
<Plus size={16} color={accentColor} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,14 +30,11 @@ export default function WeatherCard({ weather }: Props) {
|
||||
if (!weather) {
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex items-center justify-center"
|
||||
className="glass-card p-6 h-full flex items-center justify-center"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
>
|
||||
<div
|
||||
className="text-sm"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
<div className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
Загрузка погоды...
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -46,88 +43,90 @@ export default function WeatherCard({ weather }: Props) {
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="glass-card p-5 h-full flex flex-col"
|
||||
className="glass-card p-6 h-full flex flex-col"
|
||||
style={{
|
||||
background: "rgba(6,182,212,0.04)",
|
||||
border: "1px solid rgba(6,182,212,0.12)",
|
||||
background: "rgba(59,130,246,0.05)",
|
||||
border: "1px solid rgba(59,130,246,0.15)",
|
||||
}}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.35, delay: 0.21 }}
|
||||
whileHover={{ scale: 1.01 }}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
{/* Location */}
|
||||
<div
|
||||
className="text-sm font-semibold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
className="text-sm font-medium mb-3"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
🌍 Санкт-Петербург
|
||||
📍 Санкт-Петербург
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<span className="text-3xl font-bold" style={{ color: "var(--text-primary)" }}>
|
||||
|
||||
{/* Current weather */}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="text-5xl leading-none">
|
||||
{getWeatherEmoji(weather.weatherCode)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
className="text-2xl font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
className="font-black leading-none"
|
||||
style={{ fontSize: "44px", color: "var(--text-primary)" }}
|
||||
>
|
||||
{weather.temp}°C
|
||||
{weather.temp}°
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
className="text-sm mt-1"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{weather.desc}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right space-y-1">
|
||||
<div className="flex items-center gap-1 justify-end">
|
||||
<Droplets size={12} color="#06b6d4" />
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Droplets size={14} color="#3b82f6" />
|
||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||||
{weather.humidity}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 justify-end">
|
||||
<Wind size={12} color="#8b5cf6" />
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Wind size={14} color="#8b5cf6" />
|
||||
<span className="text-xs" style={{ color: "var(--text-secondary)" }}>
|
||||
{weather.windSpeed} км/ч
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="text-xs"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
Ощущается {weather.feelsLike}°
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Forecast */}
|
||||
<div className="flex gap-2 mt-auto">
|
||||
{(weather.forecast || []).map((day: any, i: number) => (
|
||||
{(weather.forecast || []).slice(0, 3).map((day: any, i: number) => (
|
||||
<motion.div
|
||||
key={day.date}
|
||||
className="flex-1 rounded-xl p-3 text-center"
|
||||
className="flex-1 rounded-2xl p-2.5 text-center"
|
||||
style={{
|
||||
background: i === 0
|
||||
? "rgba(99,102,241,0.12)"
|
||||
: "rgba(255,255,255,0.04)",
|
||||
border: i === 0
|
||||
? "1px solid rgba(99,102,241,0.25)"
|
||||
: "1px solid rgba(255,255,255,0.06)",
|
||||
background: i === 0 ? "rgba(59,130,246,0.14)" : "rgba(255,255,255,0.04)",
|
||||
border: i === 0 ? "1px solid rgba(59,130,246,0.28)" : "1px solid rgba(255,255,255,0.06)",
|
||||
}}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
transition={{ delay: 0.3 + i * 0.08 }}
|
||||
>
|
||||
<div
|
||||
className="text-xs mb-1 font-medium"
|
||||
style={{ color: "var(--text-secondary)" }}
|
||||
>
|
||||
{i === 0 ? "Сегодня" : formatDate(day.date)}
|
||||
</div>
|
||||
<div className="text-lg mb-1">
|
||||
{getWeatherEmoji(day.weatherCode)}
|
||||
{i === 0 ? "Сег." : formatDate(day.date)}
|
||||
</div>
|
||||
<div className="text-lg mb-1">{getWeatherEmoji(day.weatherCode)}</div>
|
||||
<div
|
||||
className="text-xs font-semibold"
|
||||
className="text-xs font-bold"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{day.maxTemp}°/{day.minTemp}°
|
||||
|
||||
85
components/cards/WeatherSavingsCard.tsx
Normal file
85
components/cards/WeatherSavingsCard.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import WeatherCard from "./WeatherCard";
|
||||
import SavingsCard from "./SavingsCard";
|
||||
|
||||
interface Props {
|
||||
weather: any;
|
||||
savings: any[];
|
||||
}
|
||||
|
||||
export default function WeatherSavingsCard({ weather, savings }: Props) {
|
||||
const [view, setView] = useState<"weather" | "savings">("weather");
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col gap-2">
|
||||
{/* Toggle pills */}
|
||||
<div
|
||||
className="flex rounded-2xl p-1 gap-1"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.04)",
|
||||
border: "1px solid rgba(255,255,255,0.07)",
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ id: "weather", label: "🌤 Погода" },
|
||||
{ id: "savings", label: "💰 Цели" },
|
||||
].map((tab) => (
|
||||
<motion.button
|
||||
key={tab.id}
|
||||
onClick={() => setView(tab.id as "weather" | "savings")}
|
||||
className="flex-1 py-1.5 rounded-xl text-xs font-semibold relative"
|
||||
style={{
|
||||
color: view === tab.id ? "var(--text-primary)" : "var(--text-secondary)",
|
||||
}}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{view === tab.id && (
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.08)",
|
||||
border: "1px solid rgba(255,255,255,0.12)",
|
||||
}}
|
||||
layoutId="wsToggle"
|
||||
transition={{ type: "spring", stiffness: 500, damping: 35 }}
|
||||
/>
|
||||
)}
|
||||
<span className="relative z-10">{tab.label}</span>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-h-0">
|
||||
<AnimatePresence mode="wait">
|
||||
{view === "weather" ? (
|
||||
<motion.div
|
||||
key="weather"
|
||||
className="h-full"
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<WeatherCard weather={weather} />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="savings"
|
||||
className="h-full"
|
||||
initial={{ opacity: 0, x: 10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -10 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<SavingsCard savings={savings} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user