add contact page with dynamic details (#633)

* add contact page with dynamic details

* update metadata

* update styling and add details to footer

* add divider

* add unique key

* update border

client/sanity.config.ts

@@ -43,7 +43,8 @@ export default defineConfig({
             ),
 
             // Regular document types
-            S.documentTypeListItem("about-item").title("About Item")
+            S.documentTypeListItem("about-item").title("About Item"),
+            S.documentTypeListItem("contact-detail").title("Contact Detail")
           ])
     }),
     // Vision is a tool that lets you query your content with GROQ in the studio

client/sanity/schema.ts

@@ -1,7 +1,8 @@
 import { AboutItemSchema } from "@/models/sanity/AboutItem/Schema"
+import { ContactDetailSchema } from "@/models/sanity/ContactDetail/Schema"
 import { HomePageSchema } from "@/models/sanity/HomePage/Schema"
 import { type SchemaTypeDefinition } from "sanity"
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [AboutItemSchema, HomePageSchema]
+  types: [AboutItemSchema, HomePageSchema, ContactDetailSchema]
 }

client/src/app/contact/page.tsx

@@ -0,0 +1,21 @@
+import Contact from "@/components/composite/Contact/Contact"
+import { sanityQuery } from "../../../sanity/lib/utils"
+import {
+  CONTACT_DETAIL_GROQ_QUERY,
+  ContactDetailItem
+} from "@/models/sanity/ContactDetail/Utils"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Contact UASC",
+  description: "Information about how to reach UASC"
+}
+
+const Page = async () => {
+  const contactDetails = await sanityQuery<ContactDetailItem[]>(
+    CONTACT_DETAIL_GROQ_QUERY
+  )
+  return <Contact items={contactDetails} />
+}
+
+export default Page

client/src/components/composite/Contact/Contact.story.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Contact from "./Contact"
+
+const meta: Meta<typeof Contact> = {
+  component: Contact
+}
+
+export default meta
+
+type Story = StoryObj<typeof Contact>
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        title: "bookings",
+        email: "[email protected]"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "[email protected]"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "[email protected]"
+      }
+    ]
+  }
+}

client/src/components/composite/Contact/Contact.tsx

@@ -0,0 +1,23 @@
+import FullPageBackgroundImage from "@/components/generic/FullPageBackgroundImage/FullPageBackgroundImage"
+import ContactDetailPanel, {
+  IContactDetailPanel
+} from "./ContactDetailPanel/ContactDetailPanel"
+import { Footer } from "@/components/generic/Footer/Footer"
+
+interface IContact extends IContactDetailPanel {}
+
+const Contact = ({ items }: IContact) => {
+  return (
+    <>
+      <FullPageBackgroundImage>
+        <div className="flex w-full max-w-[800px] flex-col gap-4 py-4">
+          <h2 className="text-dark-blue-100 italic">Contact Us</h2>
+          <ContactDetailPanel items={items} />
+        </div>
+      </FullPageBackgroundImage>
+      <Footer />
+    </>
+  )
+}
+
+export default Contact

client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.story.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ContactDetailPanel from "./ContactDetailPanel"
+
+const meta: Meta<typeof ContactDetailPanel> = {
+  component: ContactDetailPanel
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContactDetailPanel>
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="bg-gray-2 p-4">
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    items: [
+      {
+        title: "bookings",
+        email: "[email protected]"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "[email protected]"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "[email protected]"
+      }
+    ]
+  }
+}

client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.tsx

@@ -0,0 +1,27 @@
+import ContactDetail, {
+  IContactDetail
+} from "@/components/generic/ContactDetail/ContactDetail"
+
+export interface IContactDetailPanel {
+  items: IContactDetail[]
+}
+
+const ContactDetailPanel = ({ items }: IContactDetailPanel) => {
+  return (
+    <div className="flex w-full flex-col gap-2 rounded-md border border-black bg-white p-4">
+      {items.map((item) => {
+        return (
+          <span key={item.email}>
+            <ContactDetail
+              title={item.title}
+              description={item.description}
+              email={item.email}
+            />
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ContactDetailPanel

client/src/components/generic/ContactDetail/ContactDetail.story.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ContactDetail from "./ContactDetail"
+
+const meta: Meta<typeof ContactDetail> = {
+  component: ContactDetail
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContactDetail>
+
+export const Default: Story = {
+  args: {
+    title: "bookings",
+    description: "for guest bookings, reservations etc",
+    email: "[email protected]"
+  }
+}

client/src/components/generic/ContactDetail/ContactDetail.tsx

@@ -0,0 +1,19 @@
+export interface IContactDetail {
+  title: string
+  description?: string
+  email?: string
+}
+
+const ContactDetail = ({ title, description, email }: IContactDetail) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <h3>{title}</h3>
+      <h5 className="opacity-90">{description}</h5>
+      <h5 className="text-light-blue-100 font-bold">
+        <a href={`mailto:${email}`}>{email}</a>
+      </h5>
+    </div>
+  )
+}
+
+export default ContactDetail

client/src/components/generic/Footer/Footer.tsx

@@ -48,6 +48,12 @@ export const Footer = () => {
         <Link href="/about">
           <h5 className="uppercase">about</h5>
         </Link>
+
+        <HorizontalDivider />
+
+        <Link href="/contact">
+          <h5 className="uppercase">contact</h5>
+        </Link>
       </div>
 
       <div className="flex items-center justify-center gap-6 px-4 lg:ml-auto">

client/src/models/sanity/ContactDetail/Schema.ts

@@ -0,0 +1,27 @@
+import { SchemaTypeDefinition, defineField } from "sanity"
+
+export const ContactDetailSchema: SchemaTypeDefinition = {
+  name: "contact-detail",
+  title: "Contact Detail",
+  description:
+    "Who users should contact for additional queries - Will be displayed on a contact page",
+  type: "document",
+  fields: [
+    defineField({
+      name: "title",
+      description: "what the contact details are for - i.e bookings",
+      type: "string",
+      validation: (v) => v.required()
+    }),
+    defineField({
+      name: "description",
+      description:
+        "Extra information that the users may need to know - i.e For guest bookings",
+      type: "text"
+    }),
+    defineField({
+      name: "email",
+      type: "email"
+    })
+  ]
+}

client/src/models/sanity/ContactDetail/Utils.ts

@@ -0,0 +1,7 @@
+export const CONTACT_DETAIL_GROQ_QUERY = `*[_type == "contact-detail"]` as const
+
+export type ContactDetailItem = {
+  title: string
+  description?: string
+  email?: string
+}