src/components/checkbox_placeholder.rs


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

// 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::Input,
    prelude::{ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute},
    view,
};

use crate::components::get_id;

#[component]
pub fn CheckboxPlaceholder(
    label: &'static str,
    node_ref: NodeRef<Input>,
) -> impl IntoView {
    let id = get_id();

    view! {
        <div class="relative h-14">
            <input
                id=id.to_string()
                type="checkbox"
                autocomplete="off"
                class="\
                absolute \
                bottom-0 \
                right-5 \
                bg-gray-200 \
                border-8 \
                border-b-2 \
                border-b-trasparent \
                border-gray-200 \
                focus:outline-none \
                h-10 \
                rounded-t-lg \
                text-gray-900 \
                "
                node_ref=node_ref
            />

            <label
                for=id.to_string()
                class="\
                bottom-10 \
                absolute \
                left-0 \
                text-gray-700 \
                text-sm \
                "
            >
                {label}
            </label>
        </div>
    }
}