diff --git a/src/fileserv.rs b/src/fileserv.rs index acc1635..ef68e19 100644 --- a/src/fileserv.rs +++ b/src/fileserv.rs @@ -11,7 +11,7 @@ cfg_if! { if #[cfg(feature = "ssr")] { use tower::ServiceExt; use tower_http::services::ServeDir; use leptos::*; - use crate::app::App; + use crate::ui::Ui; pub async fn file_and_error_handler(uri: Uri, State(options): State, req: Request) -> AxumResponse { let root = options.site_root.clone(); @@ -20,7 +20,7 @@ cfg_if! { if #[cfg(feature = "ssr")] { if res.status() == StatusCode::OK { res.into_response() } else { - let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{}); + let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{}); handler(req).await.into_response() } } diff --git a/src/lib.rs b/src/lib.rs index e5a693a..f3bf785 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,7 +1,7 @@ use cfg_if::cfg_if; #[cfg(feature = "ssr")] pub mod api; -pub mod app; +pub mod ui; pub mod error_template; pub mod fileserv; #[cfg(feature = "ssr")] @@ -10,7 +10,7 @@ pub mod state; cfg_if! { if #[cfg(feature = "hydrate")] { use leptos::*; use wasm_bindgen::prelude::wasm_bindgen; - use crate::app::*; + use crate::ui::*; #[wasm_bindgen] pub fn hydrate() { @@ -18,6 +18,6 @@ cfg_if! { if #[cfg(feature = "hydrate")] { _ = console_log::init_with_level(log::Level::Debug); console_error_panic_hook::set_once(); - leptos::mount_to_body(App); + leptos::mount_to_body(Ui); } }} diff --git a/src/main.rs b/src/main.rs index 2d93b0e..f8489a4 100644 --- a/src/main.rs +++ b/src/main.rs @@ -17,7 +17,7 @@ cfg_if! { use leptos_axum::{generate_route_list_with_exclusions, handle_server_fns_with_context, LeptosRoutes}; use std::env; use supermailer::state::{AppState, MailConfig}; - use supermailer::{app::*, fileserv::file_and_error_handler}; + use supermailer::{ui::*, fileserv::file_and_error_handler}; use api::{list_email, get_email_html}; async fn server_fn_handler( @@ -48,7 +48,7 @@ cfg_if! { // provide_context(auth_session.clone()); provide_context(app_state.clone()); }, - App, + Ui, ); handler(req).await.into_response() } @@ -80,7 +80,7 @@ cfg_if! { // We don't use an address for the lambda function #[allow(unused_variables)] let addr = leptos_options.site_addr; - let routes = generate_route_list_with_exclusions(App, Some(vec!["/api/".to_string(), "/api".to_string()])); + let routes = generate_route_list_with_exclusions(Ui, Some(vec!["/api/".to_string(), "/api".to_string()])); let mail_config = MailConfig { mail_bucket, diff --git a/src/ui/components.rs b/src/ui/components.rs new file mode 100644 index 0000000..3131aa4 --- /dev/null +++ b/src/ui/components.rs @@ -0,0 +1,3 @@ +pub mod badge; +pub mod input; +pub mod switch; diff --git a/src/ui/components/badge.rs b/src/ui/components/badge.rs new file mode 100644 index 0000000..d9d453a --- /dev/null +++ b/src/ui/components/badge.rs @@ -0,0 +1,10 @@ +use leptos::*; + +#[component] +pub fn Badge(children: Children) -> impl IntoView { + view! { +
+ {children()} +
+ } +} diff --git a/src/ui/components/input.rs b/src/ui/components/input.rs new file mode 100644 index 0000000..16da809 --- /dev/null +++ b/src/ui/components/input.rs @@ -0,0 +1,11 @@ +use leptos::*; + +#[component] +pub fn Input() -> impl IntoView { + view! { + + } +} diff --git a/src/ui/components/switch.rs b/src/ui/components/switch.rs new file mode 100644 index 0000000..c9089dd --- /dev/null +++ b/src/ui/components/switch.rs @@ -0,0 +1,20 @@ +use leptos::*; + +#[component] +pub fn Switch() -> impl IntoView { + let (checked, set_checked) = create_signal(false); + let state = create_memo(move |_| if checked() { "checked" } else { "unchecked" }); + + view! { + + } +} diff --git a/src/app.rs b/src/ui/home.rs similarity index 72% rename from src/app.rs rename to src/ui/home.rs index 9572c29..e9c327f 100644 --- a/src/app.rs +++ b/src/ui/home.rs @@ -1,38 +1,9 @@ -use crate::error_template::{AppError, ErrorTemplate}; use leptos::*; use leptos_meta::*; -use leptos_router::*; - -#[component] -pub fn App() -> impl IntoView { - // Provides context that manages stylesheets, titles, meta tags, etc. - provide_meta_context(); - - view! { - - - - // sets the document title - - - // content for this welcome page - <Router fallback=|| { - let mut outside_errors = Errors::default(); - outside_errors.insert_with_default_key(AppError::NotFound); - view! { <ErrorTemplate outside_errors /> }.into_view() - }> - <main> - <Routes> - <Route path="/" view=HomePage /> - </Routes> - </main> - </Router> - } -} /// Renders the home page of your application. #[component] -fn HomePage() -> impl IntoView { +pub fn HomePage() -> impl IntoView { // Creates a reactive value to update the button let (count, set_count) = create_signal(0.00); let on_click = move |_| set_count.update(|count| *count += 1.00); @@ -63,7 +34,7 @@ fn Home() -> impl IntoView { // thanks to https://tailwindcomponents.com/component/blue-buttons-example for the showcase layout view! { - <Title text="Leptos + Tailwindcss" /> + <Title text="c'est un courriel" /> <main> <div class="font-mono text-white bg-gradient-to-tl from-blue-800 to-blue-500"> <div class="flex"> diff --git a/src/ui/mail.rs b/src/ui/mail.rs new file mode 100644 index 0000000..56b2195 --- /dev/null +++ b/src/ui/mail.rs @@ -0,0 +1,84 @@ +use leptos::*; + +use crate::ui::components::badge::Badge; +use crate::ui::components::input::Input; +use crate::ui::components::switch::Switch; + +/// Renders the home page of your application. +#[component] +pub fn MailPage() -> impl IntoView { + // Creates a reactive value to update the button + let (count, _set_count) = create_signal(50.00); + + view! { + <div class="bg-black"> + <ProgressNav progress=count /> + <div class="flex items-center text-white"> + <div class="flex flex-col py-3 ml-5 h-screen border-white w-[600px] border-x"> + <div class="px-3"> + <Input /> + </div> + <div class="relative my-1"> + <div class="absolute left-0 -translate-x-1/2"> + <Badge>8</Badge> + </div> + <div class="absolute right-0 translate-x-1/2"> + <Switch /> + </div> + <hr class="mt-2.5 w-full border-zinc-800 box-border" /> + </div> + <div class="flex overflow-y-auto flex-col gap-y-3 px-3 pt-3 w-full"> + <Card /> + <Card /> + <Card /> + <Card /> + <Card /> + </div> + </div> + <div class="flex flex-col flex-grow py-6 px-8 h-screen"> + <h1 class="text-2xl font-semibold">Teset Smith</h1> + <p>[UPDATED] Need help ASAP</p> + <div class="flex justify-between"> + <Badge>badge</Badge> + <div class="text-zinc-400">01:16 am</div> + </div> + <hr class="my-2.5 w-full border-zinc-800 box-border" /> + <p class="overflow-y-hidden text-base"> + Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click. + </p> + </div> + </div> + </div> + } +} + +#[component] +fn ProgressNav(progress: ReadSignal<f64>) -> impl IntoView { + let percentage = move || progress() / 100.0; + view! { + <div class="fixed top-0 right-0 left-0 h-0.5"> + <div + class="w-full h-px bg-white transition-all origin-left" + style:transform=move || format!("scaleX({})", percentage()) + /> + </div> + } +} + +#[component] +fn Card() -> impl IntoView { + view! { + <div class="flex flex-col gap-y-1.5 p-6 rounded-lg border bg-zinc-950 border-zinc-800"> + <h1 class="text-2xl font-semibold">Teset Smith</h1> + <p>[UPDATED] Need help ASAP</p> + <p class="overflow-y-hidden text-base text-zinc-400 h-[2lh] text-ellipsis line-clamp-2"> + Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click.Deploy your new project in one-click. + </p> + <hr class="my-2.5 w-full border-zinc-800 box-border" /> + <div class="flex justify-between"> + <Badge>badge</Badge> + <div class="text-zinc-400">01:16 am</div> + </div> + </div> + } +} diff --git a/src/ui/mod.rs b/src/ui/mod.rs new file mode 100644 index 0000000..b4e34c7 --- /dev/null +++ b/src/ui/mod.rs @@ -0,0 +1,38 @@ +use crate::error_template::{AppError, ErrorTemplate}; +use leptos::*; +use leptos_meta::*; +use leptos_router::*; + +pub mod home; +use crate::ui::home::HomePage; +pub mod mail; +use crate::ui::mail::MailPage; +pub mod components; + +#[component] +pub fn Ui() -> impl IntoView { + // Provides context that manages stylesheets, titles, meta tags, etc. + provide_meta_context(); + + view! { + <Stylesheet id="leptos" href="/pkg/supermailer.css" /> + <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico" /> + + // sets the document title + <Title text="Welcome to Leptos" /> + + // content for this welcome page + <Router fallback=|| { + let mut outside_errors = Errors::default(); + outside_errors.insert_with_default_key(AppError::NotFound); + view! { <ErrorTemplate outside_errors /> }.into_view() + }> + <main class="font-sans"> + <Routes> + <Route path="/" view=HomePage /> + <Route path="/ui" view=MailPage /> + </Routes> + </main> + </Router> + } +} \ No newline at end of file diff --git a/style/tailwind.css b/style/tailwind.css index 453d529..8aaa4e7 100644 --- a/style/tailwind.css +++ b/style/tailwind.css @@ -2,3 +2,11 @@ @tailwind base; @tailwind components; @tailwind utilities; + +body { + @apply bg-black; + color-scheme: dark; + scrollbar-width: none; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; +}