181 lines
9.0 KiB
Rust

use yew::{classes, function_component, html, Html};
use yew_router::components::Link;
use crate::router::Route;
#[function_component]
pub fn Clues() -> Html {
html! {
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
<section id="navigation" class="mb-12">
<h3
class="text-primary
hover:bg-text-dark
hover:text-white
hover:-translate-y-1
hover:cursor-pointer
transition duration-150
font-bold text-xl
rounded-md
text-black
absolute
top-4
left-4
"
>
<Link<Route> to={Route::Deceased}>
<div class="flex items-center">
<svg
class="w-8 "
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</svg>
{ "Zurück" }
</div>
</Link<Route>>
</h3>
<img
src="public/digitaler-frieden_logo.jpg"
alt="logo digitaler frieden"
class="absolute top-4 right-4 md:min-w-56 md:w-56 w-0"
/>
</section>
<section class="fade-in w-full max-w-lg" id="content">
<div class="flex flex-col items-center justify-between">
<div class="flex flex-col items-start">
<h3 class="text-3xl font-bold mb-4">{ "Spurhinweise hinzufügen" }</h3>
<p class="mb-6">
{ "Füge alle dir bekannten E-Mail Adressen und Telefonnummern hinzu." }
</p>
<div
class="flex flex-col justify-between items-center w-full mb-10 space-y-4 md:space-y-4"
>
<div class="flex justify-between w-full relative">
<h3 class="font-bold text-2xl ">{ "E-Mail Adressen" }</h3>
<svg
class="text-primary w-10 absolute right-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
</div>
<div class="flex justify-start items-center space-x-4 w-full">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "max.mustermann@example.com" }</p>
</div>
<div class="flex justify-start items-center w-full space-x-4">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "jon.doe@blub.com" }</p>
</div>
</div>
<div
class="flex flex-col justify-center items-center w-full mb-6 space-y-4 md:space-y-4"
>
<div class="flex justify-between w-full relative">
<h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
<svg
class="text-primary w-10 absolute right-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
</div>
<div class="flex justify-start items-center space-x-4 w-full">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "+49 1234 567 890" }</p>
</div>
<div class="flex justify-start items-center w-full space-x-4">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "+49 9876 543 210" }</p>
</div>
</div>
</div>
</div>
</section>
<section id="next" class="fade-in w-full flex justify-center max-w-lg mb-4">
<Link<Route>
to={Route::Relationship}
classes={classes!(
"bg-primary",
"hover:bg-primary-dark",
"hover:text-white",
"hover:-translate-y-1",
"hover:cursor-pointer",
"transition",
"duration-150",
"font-bold",
"text-xl",
"max-w-xl",
"rounded-md",
"text-black",
"text-center",
"w-full",
"min-h-16",
"h-16",
"flex",
"justify-center",
"items-center",
"mb-12",
)}
>
{ "Weiter" }
</Link<Route>>
</section>
</div>
}
}