weather.razor

<PageTitle>Weather</PageTitle>
<style>
    /* Main page background */
    body {
        background-color: #1A1A3D; /* Navy-bluish violet */
        color: #E5E5E5; /* Light gray text color */
    }

    /* Header styling */
    .header {
        text-align: center;
        color: #FFD700; /* Gold color */
        margin-bottom: 20px;
        font-size: 2rem;
    }

    /* Loading text */
    .loading {
        color: #FFD700; /* Gold color for loading text */
        text-align: center;
        font-size: 1.2rem;
    }

    /* Table styling */
    .table {
        width: 100%;
        margin-top: 20px;
        border-collapse: collapse;
        color: #E5E5E5; /* Light text color */
    }

        .table th, .table td {
            padding: 10px;
            text-align: center;
            border: 1px solid #FFD700; /* Gold border for table cells */
        }

        .table th {
            background-color: #2A2A55; /* Darker navy violet for header */
            color: #FFD700; /* Gold text in header */
        }

        .table tr:nth-child(even) {
            background-color: #2A2A55; /* Alternate row background */
        }

        .table tr:nth-child(odd) {
            background-color: #1A1A3D; /* Main background color for odd rows */
        }

</style>
<h1>Puttur Weather Report</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(22, 36),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).ToArray();
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}