diff --git a/src/Layout/NavMenu.razor b/src/Layout/NavMenu.razor index 07f5f17..c44e7b1 100644 --- a/src/Layout/NavMenu.razor +++ b/src/Layout/NavMenu.razor @@ -1,6 +1,6 @@ 
- TphBlazorSpotlightExample + TPH Blazor Spotlight @@ -15,13 +15,13 @@
- - Counter + + Discord Statistics
- - Weather + + New Year Countdown
diff --git a/src/Layout/NavMenu.razor.css b/src/Layout/NavMenu.razor.css index 881d128..a5075af 100644 --- a/src/Layout/NavMenu.razor.css +++ b/src/Layout/NavMenu.razor.css @@ -33,6 +33,14 @@ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); } +.bi-clock-nav-menu { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiIGNsYXNzPSJiaSBiaS1jbG9jayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAzLjVhLjUuNSAwIDAgMC0xIDBWOWEuNS41IDAgMCAwIC4yNTIuNDM0bDMuNSAyYS41LjUgMCAwIDAgLjQ5Ni0uODY4TDggOC43MXoiLz4KICA8cGF0aCBkPSJNOCAxNkE4IDggMCAxIDAgOCAwYTggOCAwIDAgMCAwIDE2bTctOEE3IDcgMCAxIDEgMSA4YTcgNyAwIDAgMSAxNCAwIi8+Cjwvc3ZnPg=="); +} + +.bi-graph-up-nav-menu { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiIGNsYXNzPSJiaSBiaS1ncmFwaC11cCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDBoMXYxNWgxNXYxSDB6bTE0LjgxNyAzLjExM2EuNS41IDAgMCAxIC4wNy43MDRsLTQuNSA1LjVhLjUuNSAwIDAgMS0uNzQuMDM3TDcuMDYgNi43NjdsLTMuNjU2IDUuMDI3YS41LjUgMCAwIDEtLjgwOC0uNTg4bDQtNS41YS41LjUgMCAwIDEgLjc1OC0uMDZsMi42MDkgMi42MSA0LjE1LTUuMDczYS41LjUgMCAwIDEgLjcwNC0uMDciLz4KPC9zdmc+ "); +} + .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; @@ -55,15 +63,15 @@ line-height: 3rem; } -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} + .nav-item ::deep a.active { + background-color: rgba(255,255,255,0.37); + color: white; + } -.nav-item ::deep a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} + .nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; + } @media (min-width: 641px) { .navbar-toggler { @@ -74,10 +82,10 @@ /* Never collapse the sidebar for wide screens */ display: block; } - + .nav-scrollable { /* Allow sidebar to scroll for tall menus */ height: calc(100vh - 3.5rem); overflow-y: auto; } -} +} \ No newline at end of file diff --git a/src/Models/DiscordInvite.cs b/src/Models/DiscordInvite.cs new file mode 100644 index 0000000..7d13720 --- /dev/null +++ b/src/Models/DiscordInvite.cs @@ -0,0 +1,30 @@ +using System.Text.Json.Serialization; + +namespace TphBlazorSpotlightExample.Models; + +public class DiscordInvite +{ + [JsonPropertyName("type")] + public int Type { get; set; } + + [JsonPropertyName("code")] + public string Code { get; set; } + + [JsonPropertyName("expires_at")] + public object ExpiresAt { get; set; } + + [JsonPropertyName("flags")] + public int Flags { get; set; } + + [JsonPropertyName("guild")] + public Guild Guild { get; set; } + + [JsonPropertyName("guild_id")] + public string GuildId { get; set; } + + [JsonPropertyName("approximate_member_count")] + public int ApproximateMemberCount { get; set; } + + [JsonPropertyName("approximate_presence_count")] + public int ApproximatePresenceCount { get; set; } +} \ No newline at end of file diff --git a/src/Models/Guild.cs b/src/Models/Guild.cs new file mode 100644 index 0000000..6590900 --- /dev/null +++ b/src/Models/Guild.cs @@ -0,0 +1,42 @@ +using System.Text.Json.Serialization; + +namespace TphBlazorSpotlightExample.Models; + +public class Guild +{ + [JsonPropertyName("id")] + public string Id { get; set; } + + [JsonPropertyName("name")] + public string Name { get; set; } + + [JsonPropertyName("splash")] + public string Splash { get; set; } + + [JsonPropertyName("banner")] + public string Banner { get; set; } + + [JsonPropertyName("description")] + public string Description { get; set; } + + [JsonPropertyName("icon")] + public string Icon { get; set; } + + [JsonPropertyName("features")] + public List Features { get; set; } + + [JsonPropertyName("verification_level")] + public int VerificationLevel { get; set; } + + [JsonPropertyName("vanity_url_code")] + public string VanityUrlCode { get; set; } + + [JsonPropertyName("nsfw_level")] + public int NsfwLevel { get; set; } + + [JsonPropertyName("nsfw")] + public bool Nsfw { get; set; } + + [JsonPropertyName("premium_subscription_count")] + public int PremiumSubscriptionCount { get; set; } +} \ No newline at end of file diff --git a/src/Pages/Counter.razor b/src/Pages/Counter.razor deleted file mode 100644 index ef23cb3..0000000 --- a/src/Pages/Counter.razor +++ /dev/null @@ -1,18 +0,0 @@ -@page "/counter" - -Counter - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} diff --git a/src/Pages/DiscordStatistics.razor b/src/Pages/DiscordStatistics.razor new file mode 100644 index 0000000..f02c8df --- /dev/null +++ b/src/Pages/DiscordStatistics.razor @@ -0,0 +1,61 @@ +@page "/statistics" + +@inject HttpClient HttpClient + +Discord Statistics + +

Discord Statistics

+ +

Discord invite link

+ + + + + +

+ @errorMessage +

+ +@if (discordInvite != null) +{ +
+
+
+
+ @discordInvite.Guild.Name +
+
+ @discordInvite.Guild.Description +
+

Invite Code: discord.gg/@discordInvite.Code

+

Total Members: @discordInvite.ApproximateMemberCount

+

Total Online Members: @discordInvite.ApproximatePresenceCount

+

Boosts: @discordInvite.Guild.PremiumSubscriptionCount

+
+
+
+} + + +@code { + private string discordInviteLink = "https://discord.gg/programming"; + + private string errorMessage = string.Empty; + private DiscordInvite? discordInvite = null; + + private async Task Fetch() + { + var response = await HttpClient.GetAsync($"https://discord.com/api/invites/{discordInviteLink.Split("/").LastOrDefault()}?with_counts=true"); + + if (response.IsSuccessStatusCode) + { + discordInvite = await response.Content.ReadFromJsonAsync(); + + errorMessage = string.Empty; + } + else + { + errorMessage = await response.Content.ReadAsStringAsync(); + } + } +} diff --git a/src/Pages/NewYearCountdown.razor b/src/Pages/NewYearCountdown.razor new file mode 100644 index 0000000..760de35 --- /dev/null +++ b/src/Pages/NewYearCountdown.razor @@ -0,0 +1,27 @@ +@page "/new-year-countdown" + +New Year Countdown + +

New Year Countdown

+ +

Time left until the new year @newYear.Year

+ +

@GetTimeLeft()

+ +@code { + private DateTime newYear = new DateTime(DateTime.Now.Year + 1, 1, 1, 0, 0, 0); + + override protected void OnInitialized() + { + System.Timers.Timer timer = new(1000); + timer.Elapsed += (sender, e) => InvokeAsync(StateHasChanged); + timer.Start(); + } + + private string GetTimeLeft() + { + var timeLeft = newYear - DateTime.Now; + + return $"{timeLeft.Days} days, {timeLeft.Hours} hours, {timeLeft.Minutes} minutes, {timeLeft.Seconds} seconds"; + } +} diff --git a/src/Pages/Weather.razor b/src/Pages/Weather.razor deleted file mode 100644 index 8a083fc..0000000 --- a/src/Pages/Weather.razor +++ /dev/null @@ -1,57 +0,0 @@ -@page "/weather" -@inject HttpClient Http - -Weather - -

Weather

- -

This component demonstrates fetching data from the server.

- -@if (forecasts == null) -{ -

Loading...

-} -else -{ - - - - - - - - - - - @foreach (var forecast in forecasts) - { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@code { - private WeatherForecast[]? forecasts; - - protected override async Task OnInitializedAsync() - { - forecasts = await Http.GetFromJsonAsync("sample-data/weather.json"); - } - - public 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); - } -}