diff --git a/PancakesWeb/Components/Pages/Home.razor b/PancakesWeb/Components/Pages/Home.razor index ff9b1c8..c4731fc 100644 --- a/PancakesWeb/Components/Pages/Home.razor +++ b/PancakesWeb/Components/Pages/Home.razor @@ -60,7 +60,7 @@

Contributions

Projects that I do not maintain but have contributed to

- + + +

Buttons

+

Click my buttons

+ + +
+ Add my button + 
<a href="@Buttons.Pancakes.Href" target="_blank">
+    <img src="@Buttons.Pancakes.Href@Assets[$"imgs/buttons/{Buttons.Pancakes.Image}"]" alt"@Buttons.Pancakes.Title">
+</a>
+

The image URL may change in the future. Instead of hotlinking it you should download the image manually.

+
+ + + + \ No newline at end of file diff --git a/PancakesWeb/Components/Pages/Home.razor.css b/PancakesWeb/Components/Pages/Home.razor.css index 368a3d3..550b455 100644 --- a/PancakesWeb/Components/Pages/Home.razor.css +++ b/PancakesWeb/Components/Pages/Home.razor.css @@ -50,6 +50,18 @@ font-weight: bold; } +.buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem; + list-style: none; +} + +.button { + display: inline-flex; +} + @media screen and (max-width: 768px) { .accounts { flex-direction: column; diff --git a/PancakesWeb/Components/UI/ImageButton.razor b/PancakesWeb/Components/UI/ImageButton.razor new file mode 100644 index 0000000..94ab1b5 --- /dev/null +++ b/PancakesWeb/Components/UI/ImageButton.razor @@ -0,0 +1,18 @@ +@using PancakesWeb.Data + +@if (Data.Href != null) +{ + @Image +} +else +{ + @Image +} + +@code { + [Parameter, EditorRequired] public required Button Data { get; set; } + + private RenderFragment Image => + @@Data.Title; + +} \ No newline at end of file diff --git a/PancakesWeb/Components/UI/ImageButton.razor.css b/PancakesWeb/Components/UI/ImageButton.razor.css new file mode 100644 index 0000000..fd225ba --- /dev/null +++ b/PancakesWeb/Components/UI/ImageButton.razor.css @@ -0,0 +1,15 @@ +.button-link { + text-decoration: none; +} + +.button-link::after { + display: none; + content: none; +} + +.button-img { + width: 88px; + height: 31px; + object-fit: contain; + image-rendering: crisp-edges; +} \ No newline at end of file diff --git a/PancakesWeb/Data/Button.cs b/PancakesWeb/Data/Button.cs new file mode 100644 index 0000000..fe50183 --- /dev/null +++ b/PancakesWeb/Data/Button.cs @@ -0,0 +1,192 @@ +namespace PancakesWeb.Data; + +public class Button +{ + public required string Image { get; set; } + public required string Title { get; set; } + public string? Href { get; set; } +} + +public static class Buttons +{ + public static readonly Button Pancakes = new Button + { + Image = "pancakes.png", + Title = "pancakes", + Href = "https://pancakes.gay/" + }; + + public static readonly List