diff --git a/components/Current/Aside.tsx b/components/Current/Aside.tsx index fc0b3a9c4..5462c5da2 100644 --- a/components/Current/Aside.tsx +++ b/components/Current/Aside.tsx @@ -1,5 +1,5 @@ import Puffs from "./Asides/Puffs" -import Contact from "./Asides/Contacts" +import Contacts from "./Asides/Contacts" import { AsideTypenameEnum } from "@/types/requests/utils/typename" import type { AsideProps } from "@/types/components/current/aside" @@ -15,9 +15,7 @@ export default function Aside({ blocks }: AsideProps) { const type = block.__typename switch (type) { case AsideTypenameEnum.CurrentBlocksPageAsideContact: - return block.contact.contactConnection.edges.map((contact) => ( - - )) + return case AsideTypenameEnum.CurrentBlocksPageAsidePuff: return default: diff --git a/components/Current/Asides/Contacts/Contact.tsx b/components/Current/Asides/Contacts/Contact.tsx new file mode 100644 index 000000000..6adc1f17a --- /dev/null +++ b/components/Current/Asides/Contacts/Contact.tsx @@ -0,0 +1,57 @@ +import styles from "./contacts.module.css" + +import { ContactNode } from "@/types/requests/asides/contact" + +export default function Contact({ + title, + mailing_address, + visiting_address, + phone, +}: ContactNode) { + return ( + + ) +} diff --git a/components/Current/Asides/Contacts/contacts.module.css b/components/Current/Asides/Contacts/contacts.module.css new file mode 100644 index 000000000..7d9f1d5f1 --- /dev/null +++ b/components/Current/Asides/Contacts/contacts.module.css @@ -0,0 +1,80 @@ +.wrapper { + margin-top: 2rem; + } + + .link { + display: inline-block; + transition: 200ms ease; + } + + .link:hover { + text-decoration: none; + transform: scale(1.01); + } + + .image { + height: auto; + object-fit: contain; + object-position: center; + } + + .content { + padding: 20px 0px; + } + + .heading { + font-family: BrandonText-Bold,Arial,Helvetica,sans-serif; + font-size: 1.375rem; + line-height: 1.1em; + text-transform: uppercase; + font-weight: 400; + color: #483729; + margin-bottom: 1rem; + } + + .link:hover .heading { + text-decoration: underline; + } + + .phoneContainer { + display: flex; + gap: 10px; + align-items: center; + } + + .phoneNumberLink { + line-height: 1.1em; + font-family: Helvetica,Arial,sans-serif; + font-weight: 400; + text-transform: none; + font-size: 1.125rem; + color: #00838e; + text-decoration: none; + cursor: pointer; + } + + + .p { + color: #333; + line-height: 1.3; + margin-bottom: 1em; + padding-top: 7px; + text-decoration: none; + } + + .phoneNumberLink:active, + .phoneNumberLink:hover { + outline: 0; + text-decoration: underline; + } + + @media screen and (min-width: 950px) { + .heading { + font-size: 1.625rem; + } + + .phoneNumberLink { + line-height: 1.1em; + font-size: 1.375rem; + } + } \ No newline at end of file diff --git a/components/Current/Asides/Contacts/index.tsx b/components/Current/Asides/Contacts/index.tsx new file mode 100644 index 000000000..76abe48b3 --- /dev/null +++ b/components/Current/Asides/Contacts/index.tsx @@ -0,0 +1,8 @@ +import type { ContactsProps } from "@/types/components/current/asides/contact" +import Contact from "./Contact" + +export default function Contacts({ contacts }: ContactsProps) { + return contacts.map((contact) => ( + + )) +} diff --git a/lib/graphql/Fragments/Contact.graphql b/lib/graphql/Fragments/Contact.graphql index 2f320a1b8..49c4326d7 100644 --- a/lib/graphql/Fragments/Contact.graphql +++ b/lib/graphql/Fragments/Contact.graphql @@ -6,6 +6,9 @@ fragment Contact on ContactBlock { street zip } + system { + uid + } phone title visiting_address { diff --git a/types/components/current/asides/contact.ts b/types/components/current/asides/contact.ts index 1f0ea7b5f..37f06ed0f 100644 --- a/types/components/current/asides/contact.ts +++ b/types/components/current/asides/contact.ts @@ -1,3 +1,4 @@ import type { ContactNode } from "@/types/requests/asides/contact" +import type { Node } from "@/types/requests/utils/edges" -export type ContactProps = ContactNode +export type ContactsProps = { contacts: Node[] } diff --git a/types/requests/asides/contact.ts b/types/requests/asides/contact.ts index a32e8545a..4a33c1457 100644 --- a/types/requests/asides/contact.ts +++ b/types/requests/asides/contact.ts @@ -8,6 +8,9 @@ export type ContactNode = { street: string zip: string } + system: { + uid: string + } phone: string title: string visiting_address: {