Add profile and login screen + first api logic draft
This commit is contained in:
71
app/(protected)/automation/index.tsx
Normal file
71
app/(protected)/automation/index.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { OFFICES_DATA } from '@/data/data';
|
||||
import type { OfficeItem } from '@/types/types';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
|
||||
import React, { useState } from 'react';
|
||||
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
export default function AutomationScreen() {
|
||||
const router = useRouter();
|
||||
const [selectedOffice, setSelectedOffice] = useState<OfficeItem | null>(null);
|
||||
|
||||
// --- LIST VIEW (INGRANDITA) ---
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
|
||||
<View>
|
||||
<Text className="text-3xl font-bold text-gray-800 mb-1">Domotica</Text>
|
||||
<Text className="text-base text-gray-500">Controlla gli ambienti</Text>
|
||||
</View>
|
||||
<View className="bg-green-100 px-4 py-2 rounded-xl border border-green-200 mt-1">
|
||||
<Text className="text-xs font-bold text-green-700 tracking-wide">ONLINE</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={{ padding: 20, gap: 20 }} showsVerticalScrollIndicator={false}>
|
||||
{OFFICES_DATA.map((office) => (
|
||||
<TouchableOpacity
|
||||
key={office.id}
|
||||
onPress={() => router.push(`/automation/${office.id}`)}
|
||||
className="bg-white rounded-3xl p-6 shadow-sm flex-row items-center justify-between border border-gray-100 active:border-[#099499]/30 active:scale-[0.98]"
|
||||
>
|
||||
<View className="flex-row items-center gap-5">
|
||||
<View className={`p-5 rounded-2xl ${office.status === 'online' ? 'bg-teal-50' : 'bg-gray-100'}`}>
|
||||
{office.status === 'online' ?
|
||||
<Wifi size={32} color="#099499" /> :
|
||||
<WifiOff size={32} color="#9ca3af" />
|
||||
}
|
||||
</View>
|
||||
<View>
|
||||
<Text className="font-bold text-gray-800 text-xl mb-2">{office.name}</Text>
|
||||
<View className="flex-row items-center gap-4">
|
||||
<View className="flex-row items-center gap-1.5">
|
||||
<Thermometer size={16} color="#6b7280" />
|
||||
<Text className="text-sm font-medium text-gray-600">{office.temp}°C</Text>
|
||||
</View>
|
||||
<View className="w-1 h-1 rounded-full bg-gray-300" />
|
||||
<View className="flex-row items-center gap-1.5">
|
||||
<Zap size={16} color="#eab308" />
|
||||
<Text className="text-sm font-medium text-gray-600">{office.power}W</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Status Dot */}
|
||||
<View className={`w-4 h-4 rounded-full border-2 border-white shadow-sm ${office.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
{/* Spacer finale per la navbar */}
|
||||
<View className="h-20" />
|
||||
</ScrollView>
|
||||
|
||||
{/* FAB */}
|
||||
<TouchableOpacity
|
||||
onPress={() => alert('Aggiungi nuovo collegamento')}
|
||||
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
|
||||
>
|
||||
<Plus size={32} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user