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
|
// rocie - An enterprise grocery management system - Web app
//
// Copyright (C) 2026 Benedikt Peetz <benedikt.peetz@b-peetz.de>
// SPDX-License-Identifier: GPL-3.0-or-later
//
// This file is part of Rocie.
//
// You should have received a copy of the License along with this program.
// If not, see <https://www.gnu.org/licenses/gpl-3.0.txt>.
use leptos::{
IntoView, component,
html::Textarea,
prelude::{ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute},
view,
};
use crate::components::get_id;
#[component]
pub fn TextareaPlaceholder(
label: &'static str,
node_ref: NodeRef<Textarea>,
#[prop(default = None)] initial_value: Option<String>,
) -> impl IntoView {
let id = get_id();
view! {
<div class="relative h-80">
<textarea
id=id.to_string()
class="\
absolute \
bottom-0 \
bg-gray-200 \
border-2 \
border-b-2 \
border-b-trasparent \
border-gray-200 \
focus:border-indigo-600 \
focus:border-b-transparent \
focus:outline-none \
h-[300px] \
placeholder-transparent \
rounded-t-lg \
text-gray-900 \
w-full \
"
placeholder="sentinel value"
node_ref=node_ref
>
{initial_value}
</textarea>
<label
for=id.to_string()
class="\
absolute \
transition-all \
text-sm \
text-gray-700 \
top-0 \
left-0 \
"
>
{label}
</label>
</div>
}
}
|
