المشروع الختامي: تطبيق أجهزة ذكية متكامل

import { useState } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native';import { useLocation, useBattery, useLight, useTilt } from 'smartdevice'; const TABS = [{ k: 'home', t: '🏠' }, { k: 'level', t: '📐' }, { k: 'power', t: '🔋' }]; export default function App() {  const [tab, setTab] = useState('home');  const loc = useLocation();  const bat = useBattery();  const lux = useLight();  const dark = lux < 50;  const eco = bat.saver || bat.level < 20;  const C = dark    ? { bg: '#14202B', fg: '#E8F0F7', card: '#1E2D3A', muted: '#90A4B8' }    : { bg: '#FFF8F0', fg: '#2A2017', card: '#FFFFFF', muted: '#7A6A58' };   return (    <View style={[styles.app, { backgroundColor: C.bg }]}>      <View style={[styles.header, { borderColor: C.card }]}>        <Text style={[styles.loc, { color: C.fg }]}>📍 {loc.city}</Text>        <Text style={{ color: bat.level < 20 ? '#E57373' : C.muted }}>🔋 {bat.level}%</Text>      </View>      {eco && <Text style={styles.eco}>🍃 وضع التوفير نشط</Text>}       <View style={styles.body}>        {tab === 'home' && <Home C={C} dark={dark} />}        {tab === 'level' && <Level C={C} />}        {tab === 'power' && <Power C={C} bat={bat} eco={eco} />}      </View>       <View style={[styles.tabbar, { backgroundColor: C.card }]}>        {TABS.map((x) => (          <Pressable key={x.k} style={styles.tab} onPress={() => setTab(x.k)} accessibilityRole="button">            <Text style={[styles.ti, { opacity: tab === x.k ? 1 : 0.4 }]}>{x.t}</Text>          </Pressable>        ))}      </View>    </View>  );} function Home({ C, dark }) {  return (    <View style={{ alignItems: 'center', gap: 6 }}>      <Text style={{ color: C.fg, fontSize: 20, fontWeight: 'bold' }}>مساعد الميدان</Text>      <Text style={{ color: C.muted }}>{dark ? '🌙 الوضع الليليّ' : '☀️ الوضع النهاريّ'}</Text>    </View>  );} function Level({ C }) {  const { x, y } = useTilt();  const ok = Math.abs(x) <= 3 && Math.abs(y) <= 3;  return (    <View style={{ alignItems: 'center', gap: 8 }}>      <Text style={{ fontSize: 30 }}>{ok ? '✅' : '↕'}</Text>      <Text style={{ color: C.fg, fontWeight: 'bold' }}>{ok ? 'مستوٍ' : 'مائل'}</Text>      <Text style={{ color: C.muted }}>x={x}°  y={y}°</Text>    </View>  );} function Power({ C, bat, eco }) {  return (    <View style={{ alignItems: 'center', gap: 6 }}>      <Text style={{ color: C.fg, fontSize: 34, fontWeight: 'bold' }}>{bat.level}%</Text>      <Text style={{ color: C.muted }}>{eco ? 'توفيرٌ: تحديثٌ أبطأ وحركاتٌ معطّلة' : 'أداءٌ كامل'}</Text>    </View>  );} const styles = StyleSheet.create({  app: { minHeight: 300, borderRadius: 16, overflow: 'hidden', margin: 8 },  header: { flexDirection: 'row', justifyContent: 'space-between', padding: 12, borderBottomWidth: 1 },  loc: { fontWeight: 'bold' },  eco: { backgroundColor: '#1B5E20', color: '#C8E6C9', textAlign: 'center', paddingVertical: 4 },  body: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24, minHeight: 150 },  tabbar: { flexDirection: 'row', borderTopWidth: 1, borderColor: '#0002' },  tab: { flex: 1, alignItems: 'center', paddingVertical: 12 },  ti: { fontSize: 24 },});