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

chore: add leptos fmt
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Kasper Juul Hermansen
2025-01-12 15:05:34 +01:00
parent 38e66419bc
commit c5ca5f3612
3 changed files with 100 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,69 +55,72 @@ pub fn App() -> impl IntoView {
}
}
#[component]
pub fn HomePage() -> impl IntoView {
let messages = message::get_messages();
view! {
<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 flex-col h-screen bg-gray-50">
<header class="flex items-center py-4 px-4 bg-white border-b border-gray-200">
<div class="flex justify-between items-center mx-auto w-full max-w-5xl">
<h1 class="text-xl font-semibold text-gray-800">Medical Assistant</h1>
<button class="flex gap-2 items-center py-2 px-4 text-sm text-gray-600 bg-white rounded-sm border border-gray-200 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 class="overflow-y-auto flex-1 px-4">
<div class="py-6 mx-auto space-y-6 max-w-5xl">
{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="py-3 px-4 bg-white rounded-sm border border-gray-200 max-w-[80%]">
"Loading..."
</div>
</div> <div />
</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 class="py-4 px-4 bg-white border-t border-gray-200">
<form class="mx-auto max-w-5xl">
<div class="flex gap-4">
<input
type="text"
placeholder="Type your medical question here..."
class="flex-1 py-2 px-4 rounded-sm border border-gray-200 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
/>
<button
type="submit"
class="flex gap-2 items-center py-2 px-4 text-white bg-blue-500 rounded-sm hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
Send
</button>
</div>
</form>
</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>
}
}