redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs

2026-04-22 10:23:57 +00:00
parent 7e1e2cfd4d
commit ecf69400f6
11 changed files with 789 additions and 532 deletions
--- a/components/cards/WeatherSavingsCard.tsx
+++ b/components/cards/WeatherSavingsCard.tsx
@@ -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>
+  );
+}