add contact entity portrait placeholder + icons
This commit is contained in:
22
web/public/assets/graphics/portrait-pig.svg
Normal file
22
web/public/assets/graphics/portrait-pig.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 18 KiB |
@ -1,6 +1,7 @@
|
||||
import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql";
|
||||
import styles from "./contactEntityBlock.module.scss";
|
||||
import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common";
|
||||
import Icon from "../general/Icon";
|
||||
|
||||
export const ContactEntityBlock = ({
|
||||
block,
|
||||
@ -20,7 +21,9 @@ export const ContactEntityBlock = ({
|
||||
|
||||
return (
|
||||
<li className={styles.contactItem}>
|
||||
<div className={styles.image}></div>
|
||||
<div className={styles.image}>
|
||||
<img src="/assets/graphics/portrait-pig.svg" className={styles.portraitPlaceholder} />
|
||||
</div>
|
||||
<div className={styles.text}>
|
||||
<h1 className={styles.name}>{contact.name}</h1>
|
||||
{contact.title && <p className={styles.role}>{contact.title}</p>}
|
||||
@ -28,7 +31,7 @@ export const ContactEntityBlock = ({
|
||||
<ul className={styles.contact}>
|
||||
{contact.email && (
|
||||
<li>
|
||||
<span className={styles.icon}>✉ </span>
|
||||
<span className={styles.icon}><Icon type="email" /></span>
|
||||
<a href={`mailto:${contact.email}`} target="_blank">
|
||||
{contact.email}
|
||||
</a>
|
||||
@ -36,7 +39,7 @@ export const ContactEntityBlock = ({
|
||||
)}
|
||||
{phoneE164 && (
|
||||
<li>
|
||||
<span className={styles.icon}>☎ </span>
|
||||
<span className={styles.icon}><Icon type="phone" /></span>
|
||||
<a href={`tel:${phoneE164}`} target="_blank">
|
||||
{phoneFormatted}
|
||||
</a>
|
||||
|
@ -12,6 +12,12 @@
|
||||
height: 7rem;
|
||||
background: var(--color-placeholder);
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portraitPlaceholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
|
@ -3,7 +3,7 @@ import styles from "./icon.module.scss";
|
||||
export default function Icon({
|
||||
type,
|
||||
}: {
|
||||
type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
|
||||
type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "email" | "phone" | "instagram" | "facebook" | "flickr";
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.icon}>
|
||||
@ -53,6 +53,14 @@ export default function Icon({
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M585.5-481 532-534.5 675-716H350.5l-75-75H750q24 0 34.75 21T781-730L585.5-481Zm201 413.5L555-299v91q0 16-11.5 27.5T516-169h-72q-16 0-27.5-11.5T405-208v-241L67-787l53-53.5 720 720-53.5 53ZM532-534.5Z"/></svg>
|
||||
)}
|
||||
|
||||
{type === "email" && (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
|
||||
)}
|
||||
|
||||
{type === "phone" && (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z"/></svg>
|
||||
)}
|
||||
|
||||
{type === "instagram" && (
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 4.32187C30.4125 4.32187 31.1719 4.35 33.6938 4.4625C36.0375 4.56562 37.3031 4.95938 38.1469 5.2875C39.2625 5.71875 40.0688 6.24375 40.9031 7.07812C41.7469 7.92188 42.2625 8.71875 42.6938 9.83438C43.0219 10.6781 43.4156 11.9531 43.5188 14.2875C43.6313 16.8187 43.6594 17.5781 43.6594 23.9813C43.6594 30.3938 43.6313 31.1531 43.5188 33.675C43.4156 36.0188 43.0219 37.2844 42.6938 38.1281C42.2625 39.2438 41.7375 40.05 40.9031 40.8844C40.0594 41.7281 39.2625 42.2438 38.1469 42.675C37.3031 43.0031 36.0281 43.3969 33.6938 43.5C31.1625 43.6125 30.4031 43.6406 24 43.6406C17.5875 43.6406 16.8281 43.6125 14.3063 43.5C11.9625 43.3969 10.6969 43.0031 9.85313 42.675C8.7375 42.2438 7.93125 41.7188 7.09688 40.8844C6.25313 40.0406 5.7375 39.2438 5.30625 38.1281C4.97813 37.2844 4.58438 36.0094 4.48125 33.675C4.36875 31.1438 4.34063 30.3844 4.34063 23.9813C4.34063 17.5688 4.36875 16.8094 4.48125 14.2875C4.58438 11.9437 4.97813 10.6781 5.30625 9.83438C5.7375 8.71875 6.2625 7.9125 7.09688 7.07812C7.94063 6.23438 8.7375 5.71875 9.85313 5.2875C10.6969 4.95938 11.9719 4.56562 14.3063 4.4625C16.8281 4.35 17.5875 4.32187 24 4.32187ZM24 0C17.4844 0 16.6688 0.028125 14.1094 0.140625C11.5594 0.253125 9.80625 0.665625 8.2875 1.25625C6.70312 1.875 5.3625 2.69062 4.03125 4.03125C2.69063 5.3625 1.875 6.70313 1.25625 8.27813C0.665625 9.80625 0.253125 11.55 0.140625 14.1C0.028125 16.6687 0 17.4844 0 24C0 30.5156 0.028125 31.3312 0.140625 33.8906C0.253125 36.4406 0.665625 38.1938 1.25625 39.7125C1.875 41.2969 2.69063 42.6375 4.03125 43.9688C5.3625 45.3 6.70313 46.125 8.27813 46.7344C9.80625 47.325 11.55 47.7375 14.1 47.85C16.6594 47.9625 17.475 47.9906 23.9906 47.9906C30.5063 47.9906 31.3219 47.9625 33.8813 47.85C36.4313 47.7375 38.1844 47.325 39.7031 46.7344C41.2781 46.125 42.6188 45.3 43.95 43.9688C45.2812 42.6375 46.1063 41.2969 46.7156 39.7219C47.3063 38.1938 47.7188 36.45 47.8313 33.9C47.9438 31.3406 47.9719 30.525 47.9719 24.0094C47.9719 17.4938 47.9438 16.6781 47.8313 14.1188C47.7188 11.5688 47.3063 9.81563 46.7156 8.29688C46.125 6.70312 45.3094 5.3625 43.9688 4.03125C42.6375 2.7 41.2969 1.875 39.7219 1.26562C38.1938 0.675 36.45 0.2625 33.9 0.15C31.3313 0.028125 30.5156 0 24 0Z" fill="currentColor"/>
|
||||
|
Reference in New Issue
Block a user