Including base location getter

MAUI_Weather/MVVM/ViewModels/WeatherViewModel.cs

@@ -3,10 +3,28 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using System.Windows.Input;
 
 namespace MAUI_Weather.MVVM.ViewModels
 {
     public class WeatherViewModel
     {
+
+        public ICommand SearchCommand => new Command(async (searchText) =>
+        {
+            var location = await GetCoordinatesAsync(searchText.ToString());
+        });
+        private async Task<Location> GetCoordinatesAsync(string address)
+        {
+            IEnumerable<Location> locations = await Geocoding.Default.GetLocationsAsync(address);
+
+            Location location = locations?.FirstOrDefault();
+
+            if (location != null)
+            {
+                Console.WriteLine($"Latitude: {location.Latitude}, Longitude: {location.Longitude}, Altitude: {location.Altitude}");
+            }
+            return location;
+        }
     }
 }

MAUI_Weather/MVVM/Views/WeatherView.xaml

@@ -9,17 +9,61 @@
         <!--Search Bar-->
         <Grid>
             <Frame/>
-            <SearchBar Placeholder="Search" VerticalOptions="Center"/>
+            <SearchBar Placeholder="Search" VerticalOptions="Center" SearchCommand="{Binding SearchCommand}" SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"/>
         </Grid>
-        <!--  -->
+        <!-- Title -->
         <VerticalStackLayout Grid.Row="1" Style="{StaticResource MainStackLayout}">
             <Label Text="Rome" Style="{StaticResource Title}"/>
             <Label Text="November 2077"/>
         </VerticalStackLayout>
+        <!-- Weather Preview Anim -->
         <skia:SKLottieView
             Grid.Row="2"
             RepeatCount="-1"
             Source="storm.json"/>
+        <!-- Weather Information -->
+        <Grid Grid.Row="3" ColumnDefinitions="*,*,*">
+            <VerticalStackLayout HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Temp" />
+                <Label Style="{StaticResource WeatherValue}" Text="60" />
+            </VerticalStackLayout>
+            <VerticalStackLayout Grid.Column="1" HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Wind" />
+                <Label Style="{StaticResource WeatherValue}" Text="10mph" />
+            </VerticalStackLayout>
+            <VerticalStackLayout Grid.Column="2" HorizontalOptions="Center" Spacing="10">
+                <Label Style="{StaticResource WeatherTitle}" Text="Weather" />
+                <Label Style="{StaticResource WeatherValue}" Text="Sunny" />
+            </VerticalStackLayout>
+        </Grid>
+        <!-- Weather Forecast -->
+        <CollectionView Grid.Row="4" HorizontalOptions="Center">
+            <CollectionView.ItemsSource>
+                <x:Array Type="{x:Type x:String}">
+                    <x:String>1</x:String>
+                    <x:String>2</x:String>
+                    <x:String>3</x:String>
+                    <x:String>4</x:String>
+                    <x:String>5</x:String>
+                </x:Array>
+            </CollectionView.ItemsSource>
+            <CollectionView.ItemsLayout>
+                <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal"/>
+            </CollectionView.ItemsLayout>
+            <CollectionView.ItemTemplate>
+                <DataTemplate>
+                    <Frame Style="{StaticResource Card}">
+                        <VerticalStackLayout Spacing="5" VerticalOptions="Center">
+                            <skia:SKLottieView IsAnimationEnabled="False" HeightRequest="50" WidthRequest="50" Source="mist.json"/>
+                            <Label Text="Date" TextColor="{StaticResource Yellow100Accent}"/>
+                            <Label Text="Temp"/>
+                            <Label Text="Sunny"/>
+                        </VerticalStackLayout>
+                    </Frame>
+                </DataTemplate>
+            </CollectionView.ItemTemplate>
+        </CollectionView>
+        
 
     </Grid>
 </ContentPage>

MAUI_Weather/Resources/Styles/AppStyles.xaml

@@ -23,4 +23,22 @@
         <Setter Property="FontSize" Value="Large"/>
     </Style>
 
+    <Style x:Key="WeatherTitle" TargetType="Label">
+        <Setter Property="FontFamily" Value="RubikLight"/>
+    </Style>
+
+    <Style x:Key="WeatherValue" TargetType="Label">
+        <Setter Property="FontAttributes" Value="Bold"/>
+    </Style>
+
+    <Style x:Key="Card" TargetType="Frame">
+        <Setter Property="Padding" Value="0"/>
+        <Setter Property="BackgroundColor" Value="{StaticResource Cardblue}"/>
+        <Setter Property="BorderColor" Value="Transparent"/>
+        <Setter Property="CornerRadius" Value="25"/>
+        <Setter Property="HeightRequest" Value="150"/>
+        <Setter Property="WidthRequest" Value="150"/>
+        <Setter Property="Opacity" Value=".1"/>
+    </Style>
+
 </ResourceDictionary>

MAUI_Weather/Resources/Styles/Colors.xaml

@@ -8,6 +8,7 @@
     https://colorhunt.co/palette/0c134f1d267d5c469cd4adfc
     -->
     <Color x:Key="Darkblue">#0c134f</Color>
+    <Color x:Key="Cardblue">#1d267d</Color>
     <Color x:Key="Lightpurple">#d4adfc</Color>
     
     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->