Refactor Weather component and add UVIndex component

Author: codeAbinash

src/screens/Weather/Main/Weather.tsx

@@ -12,16 +12,16 @@ import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanim
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { getWeather } from '../api'
 import type { Weather } from '../types'
+import { calculatePressurePercentage, getVisibilityStatusString } from '../utils'
 import DailyForecast from './components/DailyForecast'
 import FeelsLike, { getFeelsLikeStatusString } from './components/FeelsLike'
 import Header from './components/Header'
 import HourlyForecast from './components/HourlyForecast'
 import Humidity from './components/Humidity'
 import Pressure from './components/Pressure'
-import { calculatePressurePercentage } from '../utils'
 import Visibility from './components/Visibility'
-import { getVisibilityStatusString } from '../utils'
 import WeatherTopInfo from './components/WeatherTopInfo'
+import UVIndex from './components/UVIndex'
 
 export default function WeatherScreen({ navigation }: NavProp) {
   const { currentCity, lastUpdated, currentWeather, setCurrentWeather, setLastUpdated, weatherCacheTime } =
@@ -115,6 +115,7 @@ function Boxes({ w, theme }: { w: Weather; theme: Theme }) {
         visibility={(w?.current.visibility || 0) / 1000 + ' km'}
         visibilityStatus={visibilityStatus}
       />
+      <UVIndex uvIndex={w?.current.uvi || 0} theme={theme} />
     </View>
   )
 }

src/screens/Weather/Main/components/Pressure.tsx

@@ -17,7 +17,9 @@ export default function Pressure({ theme, pressure, percent }: { theme: Theme; p
         <GradientPath theme={theme} percent={percent} />
         <View style={StyleSheet.absoluteFill} className='items-center justify-center'>
           <Medium style={[{ fontSize: 15 }, theme.color]}>{pressure}</Medium>
-          <Regular className='text-xs'>{unit}</Regular>
+          <Regular className='text-xs' style={theme.color}>
+            {unit}
+          </Regular>
         </View>
       </View>
     </View>

src/screens/Weather/Main/components/UVIndex.tsx

@@ -0,0 +1,33 @@
+import { Sun03SolidIcon } from '@assets/icons/icons'
+import { boxSize } from '@screens/Weather/utils'
+import { F, Medium, Regular } from '@utils/fonts'
+import type { Theme } from '@utils/types'
+import React from 'react'
+import { View } from 'react-native'
+import WeatherLabel from './WeatherLabel'
+
+export default function UVIndex({ uvIndex, theme }: { uvIndex: number; theme: Theme }) {
+  let uviPercent = (uvIndex * 100) / 11
+  uviPercent = uviPercent > 100 ? 100 : uviPercent
+
+  return (
+    <View className='aspect-square rounded-3xl bg-black/10' style={boxSize}>
+      <WeatherLabel Icon={Sun03SolidIcon} color={theme.color} label='UV Index' />
+      <View className='flex-1 justify-between px-5 pb-4 pt-0'>
+        <Medium style={[{ fontSize: 35 }, theme.color]}>{uvIndex}</Medium>
+        <View className='w-full rounded-full bg-white/10'>
+          <View className='h-1.5 rounded-full bg-white/70' style={{ width: `${uviPercent}%` }} />
+        </View>
+        <Regular style={[theme.color, F.F12]}>{getUVIndexStatus(uvIndex)}</Regular>
+      </View>
+    </View>
+  )
+}
+
+function getUVIndexStatus(uvIndex: number) {
+  if (uvIndex < 3) return 'Current UV index is low.'
+  if (uvIndex < 6) return 'Current UV index is moderate.'
+  if (uvIndex < 8) return 'Current UV index is high.'
+  if (uvIndex < 11) return 'Current UV index is very high.'
+  return 'Current UV index is extreme.'
+}