feat: skeleton for mail ui

jumping-dragon · Sep 16, 2024 · d4e6da8 · d4e6da8
1 parent b3001fd
commit d4e6da8
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 39 deletions.
diff --git 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<LeptosOptions>, req: Request<Body>) -> 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!{<App/>});
+            let handler = leptos_axum::render_app_to_stream(options.to_owned(), move || view!{<Ui/>});
             handler(req).await.into_response()
         }
     }

diff --git 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,14 +10,14 @@ 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() {
         // initializes logging using the `log` crate
         _ = 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
@@ -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
@@ -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
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Badge(children: Children) -> impl IntoView {
+    view! {
+        <div class="inline-flex items-center py-0.5 px-2.5 text-xs font-semibold text-black bg-white rounded-full border transition-colors hover:bg-gray-300 focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-ring">
+            {children()}
+        </div>
+    }
+}
diff --git a/src/ui/components/input.rs b/src/ui/components/input.rs
@@ -0,0 +1,11 @@
+use leptos::*;
+
+#[component]
+pub fn Input() -> impl IntoView {
+    view! {
+        <input
+            class="flex py-2 px-3 w-full h-10 text-sm rounded-md border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed border-zinc-800 bg-zinc-950 ring-offset-zinc-950 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-white placeholder:text-muted-white focus-visible:ring-ring"
+            placeholder="placeholder"
+        />
+    }
+}
diff --git a/src/ui/components/switch.rs 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! {
+        <button
+            data-state=state
+            class="inline-flex items-center w-11 h-6 rounded-full border-2 border-transparent transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-50 disabled:cursor-not-allowed peer shrink-0 data-[state=checked]:bg-white data-[state=unchecked]:bg-zinc-800 focus-visible:ring-ring focus-visible:ring-offset-background"
+            on:click=move |_| set_checked.set(!checked())
+        >
+            <span
+                data-state=state
+                class="block w-5 h-5 bg-black rounded-full ring-0 shadow-lg transition-transform pointer-events-none data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+            />
+        </button>
+    }
+}
diff --git a/src/app.rs → src/ui/home.rs b/src/app.rs → 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! {
-        <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>
-                <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
@@ -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
@@ -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>
+    }
+}
diff --git 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;
+}