From bcd8e2ac786769723bf37fa9c557613558eb1dcf Mon Sep 17 00:00:00 2001 From: elise Date: Thu, 8 Aug 2024 23:23:13 +0200 Subject: [PATCH] add contact entity portrait placeholder + icons --- web/public/assets/graphics/portrait-pig.svg | 22 +++++++++++++++++++ .../components/blocks/ContactEntityBlock.tsx | 9 +++++--- .../blocks/contactEntityBlock.module.scss | 6 +++++ web/src/components/general/Icon.tsx | 10 ++++++++- 4 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 web/public/assets/graphics/portrait-pig.svg diff --git a/web/public/assets/graphics/portrait-pig.svg b/web/public/assets/graphics/portrait-pig.svg new file mode 100644 index 0000000..e885e20 --- /dev/null +++ b/web/public/assets/graphics/portrait-pig.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/blocks/ContactEntityBlock.tsx b/web/src/components/blocks/ContactEntityBlock.tsx index 4e4e5b2..ff6a254 100644 --- a/web/src/components/blocks/ContactEntityBlock.tsx +++ b/web/src/components/blocks/ContactEntityBlock.tsx @@ -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 (
  • -
    +
    + +

    {contact.name}

    {contact.title &&

    {contact.title}

    } @@ -28,7 +31,7 @@ export const ContactEntityBlock = ({
      {contact.email && (
    • - ✉  + {contact.email} @@ -36,7 +39,7 @@ export const ContactEntityBlock = ({ )} {phoneE164 && (
    • - ☎  + {phoneFormatted} diff --git a/web/src/components/blocks/contactEntityBlock.module.scss b/web/src/components/blocks/contactEntityBlock.module.scss index a0f104e..a1a2022 100644 --- a/web/src/components/blocks/contactEntityBlock.module.scss +++ b/web/src/components/blocks/contactEntityBlock.module.scss @@ -12,6 +12,12 @@ height: 7rem; background: var(--color-placeholder); border-radius: 100%; + overflow: hidden; + } + + .portraitPlaceholder { + width: 100%; + height: 100%; } .text { diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx index eda7f1d..b874385 100644 --- a/web/src/components/general/Icon.tsx +++ b/web/src/components/general/Icon.tsx @@ -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 (
      @@ -53,6 +53,14 @@ export default function Icon({ )} + {type === "email" && ( + + )} + + {type === "phone" && ( + + )} + {type === "instagram" && (