kjuulh/lebusiness-client
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat: add basic mockup
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Kasper Juul Hermansen
2025-01-11 23:18:04 +01:00
parent 8df6403618
commit a78437ec7b
2 changed files with 104 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
crates/app/src/lib.rs
View File

@@ -9,6 +9,8 @@ pub mod error_template;
#[cfg(feature = "ssr")]
pub mod state;
mod message;
pub fn shell(options: LeptosOptions) -> impl IntoView {
view! {
<!DOCTYPE html>
@@ -53,9 +55,69 @@ pub fn App() -> impl IntoView {
}
}
#[component]
pub fn HomePage() -> impl IntoView {
let messages = message::get_messages();
view! {
<h1> "client" </h1>
<div class="flex flex-col h-screen bg-gray-50">
<header class="bg-white border-b border-gray-200 px-4 py-4 flex items-center">
<div class="max-w-5xl mx-auto w-full flex items-center justify-between">
<h1 class="text-xl font-semibold text-gray-800">Medical Assistant</h1>
<button class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 bg-white border border-gray-200 rounded-sm hover:bg-gray-50">
New Chat
</button>
</div>
</header>
<div class="flex-1 overflow-y-auto px-4">
<div class="max-w-5xl mx-auto py-6 space-y-6">
{
messages.iter().map(|message| view!{
<div
class={format!("flex {}", if message.role == "assistant" { "justify-start"} else {"justify-end"})}
>
<div
class=format!("max-w-[80%] rounded-sm px-4 py-3 {}", if message.role == "assistant" {
"bg-white border border-gray-200"
} else {
"bg-blue-500 text-white"
})
>
{message.content.clone()}
</div>
</div>
}).collect_view()
}
<div class="flex justify-start">
<div class="max-w-[80%] rounded-sm px-4 py-3 bg-white border border-gray-200">
"Loading..."
</div>
</div>
<div />
</div>
</div>
<div class="border-t border-gray-200 bg-white px-4 py-4">
<form class="max-w-5xl mx-auto">
<div class="flex gap-4">
<input
type="text"
placeholder="Type your medical question here..."
class="flex-1 rounded-sm border border-gray-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<button
type="submit"
class="px-4 py-2 bg-blue-500 text-white rounded-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
>
Send
</button>
</div>
</form>
</div>
</div>
}
}