86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|