plul/ascend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Asger Juul Brunshøj
2025-02-27 16:06:46 +01:00
parent 54bf4ddaec
commit 4ebd49a31e
2 changed files with 52 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
crates/ascend/src/components/icons.rs
View File

@@ -49,3 +49,21 @@ pub fn Forward() -> impl IntoView {
</svg> </svg>
} }
} }
#[component]
pub fn Check() -> impl IntoView {
view! {
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-6"
>
<path
fill-rule="evenodd"
d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd"
/>
</svg>
}
}

41
crates/ascend/src/pages/wall.rs
View File

@@ -97,6 +97,7 @@ pub fn Wall() -> impl IntoView {
}; };
let foo = RwSignal::new(false); let foo = RwSignal::new(false);
let bar = RwSignal::new(false);
leptos::view! { leptos::view! {
<div class="min-w-screen min-h-screen bg-neutral-950"> <div class="min-w-screen min-h-screen bg-neutral-950">
@@ -132,7 +133,7 @@ pub fn Wall() -> impl IntoView {
<div class="m-4" /> <div class="m-4" />
<div> <div class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 text-white hover:brightness-125">
<input <input
type="checkbox" type="checkbox"
id="flash-option" id="flash-option"
@@ -141,19 +142,45 @@ pub fn Wall() -> impl IntoView {
required="" required=""
bind:checked=foo bind:checked=foo
/> />
<label <label for="flash-option" class="cursor-pointer">
for="flash-option"
class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 text-white cursor-pointer hover:brightness-125"
>
<div <div
class="flex items-center gap-0.5 relative px-5 py-2.5 transition-all ease-in duration-75 bg-gray-900 rounded-md " class="flex items-center gap-2 relative px-5 py-3.5 transition-all ease-in duration-75 bg-gray-900 rounded-md"
class:bg-transparent=move || foo.get() class:bg-transparent=move || foo.get()
> >
<icons::Bolt /> <div class="aspect-square rounded-sm ring-offset-gray-700 bg-white border-gray-500 text-white">
<span class=("text-cyan-500", move || foo.get())>
<icons::Check />
</span>
</div>
// <icons::Bolt />
<div class="w-full text-lg font-semibold">Flash!</div> <div class="w-full text-lg font-semibold">Flash!</div>
</div> </div>
</label> </label>
</div> </div>
<div class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium rounded-lg group bg-gradient-to-br from-teal-300 to-lime-300 text-white hover:brightness-125">
<input
type="checkbox"
id="climbed-option"
value=""
class="hidden peer"
required=""
bind:checked=bar
/>
<label for="climbed-option" class="cursor-pointer">
<div
class="flex items-center gap-2 relative px-5 py-3.5 transition-all ease-in duration-75 bg-gray-900 rounded-md"
class:bg-transparent=move || bar.get()
>
<div class="aspect-square rounded-sm ring-offset-gray-700 bg-white border-gray-500 text-white">
<span class=("text-teal-300", move || bar.get())>
<icons::Check />
</span>
</div>
<div class="w-full text-lg font-semibold">Climbed!</div>
</div>
</label>
</div>
</div> </div>
</div> </div>
}; };