leptos_struct_table/class_providers/
tailwind.rs

1use crate::{ColumnSort, TableClassesProvider};
2
3#[derive(Clone, Copy)]
4pub struct TailwindClassesPreset;
5
6impl TableClassesProvider for TailwindClassesPreset {
7    fn new() -> Self {
8        Self
9    }
10
11    fn thead_row(&self, template_classes: &str) -> String {
12        format!(
13            "{} {}",
14            "text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-300",
15            template_classes
16        )
17    }
18
19    fn thead_cell(&self, sort: ColumnSort, template_classes: &str) -> String {
20        let sort_class = match sort {
21            ColumnSort::None => "",
22            _ => "text-black dark:text-white",
23        };
24
25        format!(
26            "cursor-pointer px-5 py-2 {} {}",
27            sort_class, template_classes
28        )
29    }
30
31    fn thead_cell_inner(&self) -> String {
32        "flex items-center after:content-[--sort-icon] after:pl-1 after:opacity-40 before:content-[--sort-priority] before:order-last before:pl-0.5 before:font-light before:opacity-40".to_string()
33    }
34
35    fn row(&self, row_index: usize, selected: bool, template_classes: &str) -> String {
36        let bg_color = if row_index % 2 == 0 {
37            if selected {
38                "bg-sky-300 text-gray-700 dark:bg-sky-700 dark:text-gray-400"
39            } else {
40                "bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800"
41            }
42        } else if selected {
43            "bg-sky-300 text-gray-700 dark:bg-sky-700 dark:text-gray-400"
44        } else {
45            "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"
46        };
47
48        format!(
49            "{} {} {}",
50            "border-b dark:border-gray-700", bg_color, template_classes
51        )
52    }
53
54    fn loading_cell(&self, _row_index: usize, _col_index: usize, prop_class: &str) -> String {
55        format!("{} {}", "px-5 py-2", prop_class)
56    }
57
58    fn loading_cell_inner(&self, row_index: usize, _col_index: usize, prop_class: &str) -> String {
59        let width = match row_index % 4 {
60            0 => "w-[calc(85%-2.5rem)]",
61            1 => "w-[calc(90%-2.5rem)]",
62            2 => "w-[calc(75%-2.5rem)]",
63            _ => "w-[calc(60%-2.5rem)]",
64        };
65        format!(
66            "animate-pulse h-2 bg-gray-200 rounded-full dark:bg-gray-700 inline-block align-middle {} {}",
67            width, prop_class
68        )
69    }
70
71    fn cell(&self, template_classes: &str) -> String {
72        format!("{} {}", "px-5 py-2", template_classes)
73    }
74}