From 4f1eb2d026da0ab637a3f1c3dd63898a6d8ca0df Mon Sep 17 00:00:00 2001
From: Maxence Lanone <maxence.lanone@etu.uca.fr>
Date: Sun, 5 Mar 2023 15:20:15 +0100
Subject: [PATCH] =?UTF-8?q?page=20d=C3=A9tail=20ajout=20diff=C3=A9rentes?=
 =?UTF-8?q?=20zone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/screen/DetailCity.tsx | 82 +++++++++++++++++++++++++++++----------
 1 file changed, 62 insertions(+), 20 deletions(-)

diff --git a/src/screen/DetailCity.tsx b/src/screen/DetailCity.tsx
index 755d7a1..3147719 100644
--- a/src/screen/DetailCity.tsx
+++ b/src/screen/DetailCity.tsx
@@ -1,16 +1,37 @@
 import { useState } from 'react';
-import { FlatList, Button, StyleSheet, Text, View, TextInput, Image } from 'react-native';
+import { FlatList, Button, StyleSheet, Text, View, TextInput, Image, ScrollView, TabBarIOSItem } from 'react-native';
 
 import { City, Weather, CITIES_DATA, FAVORITE_CITY_DATA, getCurrentWeather } from '../../data/stub';
 import CityListItem from '../components/CityListItem';
+import { Ionicons, AntDesign } from '@expo/vector-icons';
 
-export default function DetailCity({route}) {
+export default function DetailCity({ route }) {
 
     const weather = route.params.weather;
     return (
         <View style={styles.container}>
-            <Text>{weather.temperature}</Text>
+
+            <View style={styles.temperature}>
+                <Text style={styles.weatherText}>{weather.city.name}</Text>
+                <Text style={styles.temperatureText}>{weather.temperature} °</Text>
+            </View>
+            <View style={styles.nexttemp}>
+                <View style={{flexDirection:"row"}}>
+                    <AntDesign name="clockcircleo" size={15} />
+                    <Text style={{ fontSize: 15 }}>HOURLY FORECAST</Text>
+                </View>
+
+            </View>
+            <View style={styles.nextdays}>
+                <View style={{flexDirection:"row"}}>
+                    <AntDesign name="calendar" size={15} />
+                    <Text style={{ fontSize: 15 }}>10-DAY FORECAST</Text>
+                </View>
+            </View>
+
         </View>
+
+
     );
 
 }
@@ -18,30 +39,51 @@ export default function DetailCity({route}) {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        justifyContent: 'center',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+    },
+    temperature: {
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
         alignItems: 'center',
+        borderRadius: 10,
         margin: 10,
     },
-    textInput: {
-        width: "90%"
-
+    nexttemp: {
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        height: 130,
+        borderRadius: 10,
+        margin: 10,
+        width: '90%',
+        backgroundColor: 'rgba(223,223,223,1)',
+        paddingLeft: "3%",
+        paddingTop: "3%",
     },
-    searchBar: {
+    nextdays: {
         flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderWidth: 0.5,
-        borderColor: '#000',
-        height: 40,
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        height: "50%",
         borderRadius: 10,
         margin: 10,
+        width: '90%',
+        backgroundColor: 'rgba(223,223,223,1)',
+        marginBottom: 100,
+        paddingLeft: "3%",
+        paddingTop: "3%",
     },
-    imageLoupe: {
-        padding: 10,
-        margin: 5,
-        height: 15,
-        width: 15,
-        resizeMode: 'stretch',
-        alignItems: 'center',
+    weatherText: {
+        fontSize: 40,
+    },
+    temperatureText: {
+        fontSize: 80,
+    },
+    scrollView: {
+        width: '100%',
+        padding: 0,
     }
 });