1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
use leptos::{
IntoView,
attr::{AttributeValue, IntoAttributeValue},
component,
html::Select,
prelude::{
ClassAttribute, CollectView, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute,
},
view,
};
use crate::components::get_id;
#[component]
pub fn SelectPlaceholder<T>(
label: &'static str,
node_ref: NodeRef<Select>,
options: Vec<(&'static str, T)>,
) -> impl IntoView
where
T: IntoAttributeValue,
<T as IntoAttributeValue>::Output: Send + AttributeValue,
{
let id = get_id();
let options = options
.into_iter()
.map(|(label, value)| {
view! {
<option value=value>{label}</option>
}
})
.collect_view();
view! {
<div class="relative h-14">
<select
id=id.to_string()
class="\
absolute \
bottom-0 \
bg-gray-200 \
border-8 \
border-b-2 \
border-b-trasparent \
border-gray-200 \
focus:outline-none \
h-10 \
peer \
placeholder-transparent \
rounded-t-lg \
text-gray-900 \
w-full \
"
node_ref=node_ref
>
{options}
</select>
// TODO: Reference `var(--tw-border-2)` instead of the `2 px` <2025-10-01>
<div class="
absolute \
bottom-0 \
h-[2px] \
w-full \
bg-gray-300 \
peer-focus:bg-indigo-600 \
" />
<label
for=id.to_string()
class="\
bottom-10 \
absolute \
left-0 \
text-gray-700 \
text-sm \
transition-all \
peer-focus:bottom-10 \
peer-focus:left-0 \
peer-focus:text-gray-700 \
peer-focus:text-sm \
peer-placeholder-shown:text-base \
peer-placeholder-shown:text-gray-400 \
peer-placeholder-shown:bottom-2 \
peer-placeholder-shown:left-2 \
"
>
{label}
</label>
</div>
}
}
|
