147 lines
7.7 KiB
Rust
147 lines
7.7 KiB
Rust
use maud::{PreEscaped, html};
|
|
|
|
#[allow(non_snake_case)]
|
|
pub fn Placeholder() -> PreEscaped<String> {
|
|
html! {
|
|
div role="status" class="max-w-sm animate-pulse" {
|
|
div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]" {};
|
|
span class="sr-only" { "Loading..." };
|
|
};
|
|
}
|
|
}
|
|
|
|
#[allow(non_snake_case)]
|
|
pub fn ImagePlaceholder() -> PreEscaped<String> {
|
|
html! {
|
|
div class="flex items-center justify-center w-full h-48 animate-pulse bg-gray-300 rounded-sm sm:w-96 dark:bg-gray-700" {
|
|
svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18" {
|
|
path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" {};
|
|
};
|
|
};
|
|
}
|
|
}
|
|
|
|
#[allow(non_snake_case)]
|
|
pub fn VideoPlaceholder() -> PreEscaped<String> {
|
|
html! {
|
|
div role="status" class="flex items-center justify-center h-56 max-w-sm bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700" {
|
|
svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20" {
|
|
path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" {}
|
|
path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM9 13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2Zm4 .382a1 1 0 0 1-1.447.894L10 13v-2l1.553-1.276a1 1 0 0 1 1.447.894v2.764Z" {};
|
|
};
|
|
span class="sr-only" { "Loading..." }
|
|
};
|
|
}
|
|
}
|
|
|
|
#[allow(non_snake_case)]
|
|
pub fn TextPlaceholder() -> PreEscaped<String> {
|
|
html! {
|
|
div role="status" class="space-y-2.5 animate-pulse max-w-lg" {
|
|
div class="flex items-center w-full" {
|
|
div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-24" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
};
|
|
|
|
div class="flex items-center w-full max-w-[480px]" {
|
|
div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-24" {};
|
|
};
|
|
|
|
div class="flex items-center w-full max-w-[400px]" {
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
div class="h-2.5 ms-2 bg-gray-200 rounded-full dark:bg-gray-700 w-80" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
};
|
|
|
|
div class="flex items-center w-full max-w-[480px]" {
|
|
div class="h-2.5 ms-2 bg-gray-200 rounded-full dark:bg-gray-700 w-full" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-24" {};
|
|
};
|
|
|
|
div class="flex items-center w-full max-w-[440px]" {
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-32" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-24" {};
|
|
div class="h-2.5 ms-2 bg-gray-200 rounded-full dark:bg-gray-700 w-full" {};
|
|
};
|
|
|
|
div class="flex items-center w-full max-w-[360px]" {
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
div class="h-2.5 ms-2 bg-gray-200 rounded-full dark:bg-gray-700 w-80" {};
|
|
div class="h-2.5 ms-2 bg-gray-300 rounded-full dark:bg-gray-600 w-full" {};
|
|
};
|
|
span class="sr-only" { "Loading..." };
|
|
};
|
|
}
|
|
}
|
|
|
|
#[allow(non_snake_case)]
|
|
pub fn CardPlaceholder() -> PreEscaped<String> {
|
|
html! {
|
|
div role="status" class="max-w-sm p-4 border border-gray-200 rounded-sm shadow-sm animate-pulse md:p-6 dark:border-gray-700" {
|
|
div class="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded-sm dark:bg-gray-700" {
|
|
svg class="w-10 h-10 text-gray-200 dark:text-gray-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20" {
|
|
path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" {};
|
|
path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" {};
|
|
}
|
|
}
|
|
div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" {};
|
|
div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" {};
|
|
span class="sr-only" { "Loading..." };
|
|
};
|
|
}
|
|
}
|
|
|
|
#[allow(non_snake_case)]
|
|
pub fn ListPlaceholder() -> PreEscaped<String> {
|
|
html! {
|
|
div role="status" class="max-w-md p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700" {
|
|
div class="flex items-center justify-between" {
|
|
div {
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" {};
|
|
div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" {};
|
|
}
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" {};
|
|
}
|
|
div class="flex items-center justify-between pt-4" {
|
|
div {
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" {};
|
|
div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" {};
|
|
};
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" {};
|
|
}
|
|
div class="flex items-center justify-between pt-4" {
|
|
div {
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" {};
|
|
div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" {};
|
|
}
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" {};
|
|
}
|
|
div class="flex items-center justify-between pt-4" {
|
|
div {
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" {};
|
|
div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" {};
|
|
};
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" {};
|
|
}
|
|
div class="flex items-center justify-between pt-4" {
|
|
div {
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5" {};
|
|
div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700" {};
|
|
};
|
|
div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12" {};
|
|
}
|
|
span class="sr-only" { "Loading..." };
|
|
}
|
|
}
|
|
}
|