84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import { HaEntity } from '@/types/types';
|
|
import { Lightbulb, Power, Cpu, Lock, Zap, Fan, Cctv, CloudSun } from 'lucide-react-native';
|
|
import React from 'react';
|
|
import { Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
const DeviceCard = ({ device, onToggle }: { device: HaEntity; onToggle: (entityId: string) => void; }) => {
|
|
const getIcon = () => {
|
|
const domain = device.entity_id.split('.')[0];
|
|
|
|
switch (domain) {
|
|
case 'light':
|
|
return <Lightbulb size={32} color="#f59e0b" />;
|
|
case 'switch':
|
|
return <Power size={32} color="#3b82f6" />;
|
|
case 'sensor':
|
|
return <Cpu size={32} color="#ef4444" />;
|
|
case 'lock':
|
|
return <Lock size={32} color="#10b981" />;
|
|
case 'fan':
|
|
return <Fan size={32} color="#6b7280" />;
|
|
case 'camera':
|
|
return <Cctv size={32} color="#8b5cf6" />;
|
|
case 'weather':
|
|
return <CloudSun size={32} color="#3b82f6" />;
|
|
default:
|
|
return <Zap size={32} color="#8b5cf6" />;
|
|
}
|
|
};
|
|
|
|
const isToggleable = ['light', 'switch', 'fan', 'input_boolean'].includes(device.entity_id.split('.')[0]);
|
|
const isOn = device.state === 'on';
|
|
|
|
const getDeviceState = (state: string) => {
|
|
switch (state) {
|
|
case 'on':
|
|
return 'Acceso';
|
|
case 'off':
|
|
return 'Spento';
|
|
case 'idle':
|
|
return 'Inattivo';
|
|
case 'locked':
|
|
return 'Bloccato';
|
|
case 'unlocked':
|
|
return 'Sbloccato';
|
|
case 'unavailable':
|
|
return 'Non disponibile';
|
|
case 'unknown':
|
|
return 'Sconosciuto';
|
|
default:
|
|
return state;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View
|
|
className={`bg-white rounded-3xl p-5 shadow-sm border border-gray-100 w-[48%] mb-4`}
|
|
style={{ aspectRatio: 1 }}
|
|
>
|
|
<View className="flex-1 justify-between">
|
|
<View className="flex-row justify-between items-start">
|
|
{getIcon()}
|
|
{isToggleable && (
|
|
<TouchableOpacity
|
|
onPress={() => onToggle(device.entity_id)}
|
|
className={`w-12 h-7 rounded-full p-1 ${isOn ? 'bg-[#099499]' : 'bg-gray-200'} active:scale-[0.9]`}
|
|
>
|
|
<View className={`bg-white w-5 h-5 rounded-full shadow-sm ${isOn ? 'translate-x-5' : 'translate-x-0'}`} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
<View>
|
|
<Text className="text-lg font-bold text-gray-800" numberOfLines={2}>{device.name}</Text>
|
|
<Text className="text-base text-gray-500 font-medium mt-1">
|
|
{getDeviceState(device.state)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default DeviceCard;
|