Add additional contact information display on printing

vadim-su · Jan 7, 2025 · d54f31f · d54f31f
1 parent 03d4b05
commit d54f31f
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/header.rs b/src/header.rs
@@ -48,12 +48,19 @@ pub struct ContactsProps {
 pub fn Contacts(props: &ContactsProps) -> Html {
     let ContactsProps { contact } = props;
     html! {
-        <div class="flex gap-x-1 pt-1 font-mono text-sm text-foreground/80 print:hidden">
-            <Button icon="mail" href={format!("mailto:{}", contact.email)}></Button>
-            <Button icon="phone" href={format!("tel:{}", contact.tel)}></Button>
-            { for contact.social.iter().map(|social| html! {
-                <Button icon={social.icon.clone()} href={social.url.clone()}></Button>
-            }) }
-        </div>
+        <>
+            <div class="flex gap-x-1 pt-1 font-mono text-sm text-foreground/80 print:hidden">
+                <Button icon="mail" href={format!("mailto:{}", contact.email)}></Button>
+                <Button icon="phone" href={format!("tel:{}", contact.tel)}></Button>
+                { for contact.social.iter().map(|social| html! {
+                    <Button icon={social.icon.clone()} href={social.url.clone()}></Button>
+                }) }
+            </div>
+            <div class="hidden gap-x-2 font-mono text-sm text-foreground/80 print:flex print:text-[12px]">
+                <a class="hover:text-foreground/70">{contact.email.clone()}</a>
+                <span>{"|"}</span>
+                <a class="hover:text-foreground/70">{contact.tel.clone()}</a>
+            </div>
+        </>
     }
 }