088cd35ea6
All checks were successful
Deploy to Coolify / deploy (push) Successful in 5s
- Remove TasksCard and SavingsCard from home tab - New grid layout: lights+thermostat row 1, purifier+weather row 2 - Add RoomsRow component with room navigation - Fix HA entity mapping: fan.zhimi_rmb1_9528_air_purifier → fan.air_purifier - Add real entity aliases for HA route - Fix weather route: add timeout, better error handling - Fix BottomNav: use 100dvh + flex-shrink-0 - TopBar: accept isDemo prop, show Demo badge in header - WeatherCard: compact prop, better loading/error states - globals.css: add no-scrollbar utility
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
interface Room {
|
|
id: string;
|
|
emoji: string;
|
|
name: string;
|
|
deviceCount: number;
|
|
color: string;
|
|
}
|
|
|
|
const ROOMS: Room[] = [
|
|
{ id: "living", emoji: "🛋️", name: "Гостиная", deviceCount: 3, color: "#6366f1" },
|
|
{ id: "bedroom", emoji: "🛏️", name: "Спальня", deviceCount: 2, color: "#8b5cf6" },
|
|
{ id: "kitchen", emoji: "🍳", name: "Кухня", deviceCount: 1, color: "#f59e0b" },
|
|
{ id: "bathroom", emoji: "🚿", name: "Ванная", deviceCount: 0, color: "#06b6d4" },
|
|
];
|
|
|
|
interface Props {
|
|
onRoomClick?: (roomId: string) => void;
|
|
}
|
|
|
|
export default function RoomsRow({ onRoomClick }: Props) {
|
|
return (
|
|
<div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
|
|
{ROOMS.map((room, i) => (
|
|
<motion.button
|
|
key={room.id}
|
|
onClick={() => onRoomClick?.(room.id)}
|
|
className="flex-shrink-0 glass-card flex items-center gap-3 px-4 py-3 rounded-2xl cursor-pointer"
|
|
style={{
|
|
minWidth: "140px",
|
|
border: `1px solid ${room.color}22`,
|
|
}}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.3, delay: i * 0.05 }}
|
|
whileTap={{ scale: 0.93 }}
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<div
|
|
className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 text-xl"
|
|
style={{ background: `${room.color}18` }}
|
|
>
|
|
{room.emoji}
|
|
</div>
|
|
<div className="text-left min-w-0">
|
|
<div
|
|
className="text-sm font-semibold truncate"
|
|
style={{ color: "var(--text-primary)" }}
|
|
>
|
|
{room.name}
|
|
</div>
|
|
<div
|
|
className="text-xs"
|
|
style={{ color: "var(--text-secondary)" }}
|
|
>
|
|
{room.deviceCount}{" "}
|
|
{room.deviceCount === 1
|
|
? "устройство"
|
|
: room.deviceCount >= 2 && room.deviceCount <= 4
|
|
? "устройства"
|
|
: "устройств"}
|
|
</div>
|
|
</div>
|
|
{room.deviceCount > 0 && (
|
|
<div
|
|
className="ml-auto w-2 h-2 rounded-full flex-shrink-0"
|
|
style={{ background: room.color }}
|
|
/>
|
|
)}
|
|
</motion.button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|