windjammer_ui/components/generated/
skeleton.rs

1#![allow(clippy::all)]
2#![allow(noop_method_call)]
3pub struct Skeleton {
4    variant: SkeletonVariant,
5    width: String,
6    height: String,
7    class: String,
8}
9
10pub enum SkeletonVariant {
11    Text,
12    Circle,
13    Rectangle,
14}
15
16impl Skeleton {
17    #[inline]
18    pub fn new() -> Skeleton {
19        Skeleton {
20            variant: SkeletonVariant::Text,
21            width: "100%".to_string(),
22            height: "20px".to_string(),
23            class: String::new(),
24        }
25    }
26    #[inline]
27    pub fn variant(mut self, variant: SkeletonVariant) -> Skeleton {
28        self.variant = variant;
29        self
30    }
31    #[inline]
32    pub fn width(mut self, width: String) -> Skeleton {
33        self.width = width;
34        self
35    }
36    #[inline]
37    pub fn height(mut self, height: String) -> Skeleton {
38        self.height = height;
39        self
40    }
41    #[inline]
42    pub fn class(mut self, class: String) -> Skeleton {
43        self.class = class;
44        self
45    }
46    pub fn render(&self) -> String {
47        let border_radius = match self.variant {
48            SkeletonVariant::Text => "4px",
49            SkeletonVariant::Circle => "50%",
50            SkeletonVariant::Rectangle => "8px",
51        };
52        let mut html = String::new();
53        html.push_str("<div class=\"wj-skeleton ");
54        html.push_str(self.class.as_str());
55        html.push_str("\" style=\"width: ");
56        html.push_str(self.width.as_str());
57        html.push_str("; height: ");
58        html.push_str(self.height.as_str());
59        html.push_str("; border-radius: ");
60        html.push_str(border_radius);
61        html.push_str("; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite;\"></div>");
62        html.push_str("<style>@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }</style>");
63        html
64    }
65}