AppDev/20250327/my-app/app/index.jsx

import { useEffect, useState } from "react";
import { View, Text, TextInput, StyleSheet, Image, ScrollView, SafeAreaView, StatusBar, TouchableOpacity} from "react-native";
import { Droplets, Droplet, Wind, Gauge, Eye, ThermometerSunIcon } from 'lucide-react';

const baseUrl = "http://api.weatherapi.com/v1/current.json?key=1232eaa82978466da1f81125252703&q=";

const WeatherScreen = ({ weatherData }) => {
  if (!weatherData){
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.locationContainer}>
          <Text style={styles.loading}>
            Adatok betöltése
          </Text>
        </View>
      </SafeAreaView>
    )
  }

  const formatDateTime = (dateTimeStr) => {
    const date = new Date(dateTimeStr)
    const options = {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }
    return date.toLocaleDateString("hu-HU", options)
  }

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar/>
      <ScrollView contentContainerStyle={styles.scrollContainer}>
        <View style={styles.locationContainer}>
          <Text style={styles.locationName}>{weatherData.location.name}</Text>
          <Text style={styles.locationDetail}>{weatherData.location.country}</Text>
          <Text style={styles.dateTime}>{formatDateTime(weatherData.location.localtime)}</Text>
        </View>

        <View style={styles.mainWeatherContainer}>
          <Image
            source={{ uri: `https:${weatherData.current.condition.icon}`.replace("64x64", "128x128") }}
            style={styles.weatherIcon}
          />
          <Text style={styles.temperature}>{weatherData.current.temp_c}°C</Text>
          <Text style={styles.weatherCondition}>{weatherData.current.condition.text}</Text>
          <Text style={styles.feelsLike}>Hőérzet: {weatherData.current.feelslike_c}°C</Text>
        </View>

        <View style={styles.detailsContainer}>
          <View style={styles.detailRow}>
            <View style={styles.detailItem}>
              <Droplet style={styles.icon}/>
              <Text style={styles.detailTitle}>Páratartalom</Text>
              <Text style={styles.detailValue}>{weatherData.current.humidity}%</Text>
            </View>
            <View style={styles.detailItem}>
              <Wind style={styles.icon} />
              <Text style={styles.detailTitle}>Szél</Text>
              <Text style={styles.detailValue}>{weatherData.current.wind_kph} km/h</Text>
              <Text style={styles.detailSubValue}>{weatherData.current.wind_dir}</Text>
            </View>
          </View>

          <View style={styles.detailRow}>
            <View style={styles.detailItem}>
              <Gauge style={styles.icon} />
              <Text style={styles.detailTitle}>Légnyomás</Text>
              <Text style={styles.detailValue}>{weatherData.current.pressure_mb} mb</Text>
            </View>
            <View style={styles.detailItem}>
              <Eye style={styles.icon} />
              <Text style={styles.detailTitle}>Látótávolság</Text>
              <Text style={styles.detailValue}>{weatherData.current.vis_km} km</Text>
            </View>
          </View>

          <View style={styles.detailRow}>
            <View style={styles.detailItem}>
              <ThermometerSunIcon style={styles.icon} />
              <Text style={styles.detailTitle}>UV Index</Text>
              <Text style={styles.detailValue}>{weatherData.current.uv}</Text>
            </View>
            <View style={styles.detailItem}>
              <Droplets style={styles.icon}/>
              <Text style={styles.detailTitle}>Csapadék</Text>
              <Text style={styles.detailValue}>{weatherData.current.precip_mm} mm</Text>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}


const styles = StyleSheet.create({
  body: {
    backgroundColor: "#1F2937",
  },
  icon: {
    color: "#8CBBF1"
  },
  loading: {
    color: "#FFFFFF",
    fontSize: 25
  },
  container: {
    flex: 1,
    backgroundColor: "#1F2937",
  },
  scrollContainer: {
    padding: 20,
  },
  locationContainer: {
    alignItems: "center",
    marginBottom: 20,
  },
  locationName: {
    fontSize: 32,
    fontWeight: "bold",
    color: "#FFFFFF",
  },
  locationDetail: {
    fontSize: 18,
    color: "#E5E7EB",
    marginTop: 4,
  },
  dateTime: {
    fontSize: 14,
    color: "#9CA3AF",
    marginTop: 8,
  },
  mainWeatherContainer: {
    alignItems: "center",
    marginBottom: 30,
  },
  weatherIcon: {
    width: 128,
    height: 128,
    marginBottom: 10,
  },
  temperature: {
    fontSize: 64,
    fontWeight: "bold",
    color: "#FFFFFF",
  },
  weatherCondition: {
    fontSize: 24,
    color: "#E5E7EB",
    marginTop: 4,
  },
  feelsLike: {
    fontSize: 16,
    color: "#9CA3AF",
    marginTop: 8,
  },
  detailsContainer: {
    backgroundColor: "#374151",
    borderRadius: 20,
    padding: 20,
    marginBottom: 20,
  },
  detailRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 20,
  },
  detailItem: {
    flex: 1,
    alignItems: "center",
    padding: 10,
  },
  detailTitle: {
    fontSize: 14,
    color: "#9CA3AF",
    marginTop: 8,
  },
  detailValue: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#FFFFFF",
    marginTop: 4,
  },
  detailSubValue: {
    fontSize: 14,
    color: "#E5E7EB",
  },
  headerContainer: {
    backgroundColor: "#111827",
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#374151",
    marginBottom: 10,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#FFFFFF",
    textAlign: "center",
    marginBottom: 20,
    textShadowColor: "rgba(0, 0, 0, 0.75)",
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 10,
  },
  searchInput: {
    flex: 1,
    backgroundColor: "#374151",
    borderRadius: 10,
    padding: 12,
    color: "#FFFFFF",
    marginRight: 10,
    fontSize: 16,
  },
  searchButton: {
    backgroundColor: "#3B82F6",
    borderRadius: 10,
    paddingVertical: 12,
    paddingHorizontal: 20,
    elevation: 2,
  },
  searchButtonText: {
    color: "#FFFFFF",
    fontWeight: "bold",
    fontSize: 16,
  },
})



// Example usage
export default function App() {

async function fetchData(city) {
  try {
    const response = await fetch(`${baseUrl}${city}`);
    const data = await response.json();
    if (response.status == 200){
      setWeatherData(data);
      console.log(data);
    }
    
  } catch (error) {
    console.error(error);
  }
}
// Sample data based on the provided object
  const [weatherData, setWeatherData] = useState(null);
  
  const [city, setCity] = useState("Békéscsaba");

  const handlePress = () => {
    if (city){
      try {
        fetchData(city);
      } catch (error){
        console.error(error);
      }
    }
  }

  useEffect(() => {
    fetchData(city);
  }, []);


  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.headerContainer}>
        <Text style={styles.headerTitle}>Időjárás app</Text>

        <View style={styles.searchContainer}>
          <TextInput
            style={styles.searchInput}
            placeholder="Város"
            placeholderTextColor="#9CA3AF"
            value={city}
            onChangeText={setCity}
          />
          <TouchableOpacity style={styles.searchButton} onPress={handlePress}>
            <Text style={styles.searchButtonText}>Keresés</Text>
          </TouchableOpacity>
        </View>
      </View>

      <WeatherScreen weatherData={weatherData} />
    </SafeAreaView>
  )
}