From 64b8426d95e28416486e47c833d678c3764e5812 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com> Date: Thu, 13 Mar 2025 13:57:35 +0700 Subject: [PATCH] fix: contact and form components styling --- package.json | 4 +- src/app/(payload)/admin/importMap.js | 4 +- src/components/Blocks/Contact/index.tsx | 132 ++------------ src/components/Blocks/Form/index.tsx | 4 +- src/components/Blocks/RenderBlocks.tsx | 2 +- src/components/Contacts/Contact.tsx | 233 ------------------------ src/components/Contacts/ContactForm.tsx | 17 -- src/components/Homepage.tsx | 6 +- 8 files changed, 26 insertions(+), 376 deletions(-) delete mode 100644 src/components/Contacts/Contact.tsx delete mode 100644 src/components/Contacts/ContactForm.tsx diff --git a/package.json b/package.json index a4c6bef..02396c4 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload", "payload:generate:types": "payload generate:types", + "payload:generate:importMap": "payload generate:importMap", "tsc": "tsc" }, "dependencies": { @@ -69,4 +69,4 @@ "typescript": "^5" }, "packageManager": "yarn@4.6.0" -} +} \ No newline at end of file diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js index 2172f9e..f9eae4d 100644 --- a/src/app/(payload)/admin/importMap.js +++ b/src/app/(payload)/admin/importMap.js @@ -22,6 +22,7 @@ import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { FixedToolbarFeatureClient as FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { default as default_382980007b1adf7b8e8832707f1169fb } from '@/components/Logo/AdminLogo' +import { S3ClientUploadHandler as S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } from '@payloadcms/storage-s3/client' export const importMap = { "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e, @@ -47,5 +48,6 @@ export const importMap = { "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#FixedToolbarFeatureClient": FixedToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, - "/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb + "/components/Logo/AdminLogo#default": default_382980007b1adf7b8e8832707f1169fb, + "@payloadcms/storage-s3/client#S3ClientUploadHandler": S3ClientUploadHandler_f97aa6c64367fa259c5bc0567239ef24 } diff --git a/src/components/Blocks/Contact/index.tsx b/src/components/Blocks/Contact/index.tsx index 85069be..95f869a 100644 --- a/src/components/Blocks/Contact/index.tsx +++ b/src/components/Blocks/Contact/index.tsx @@ -1,5 +1,7 @@ import { fetchContact } from "@/services/payload/contact"; import { Suspense } from "react"; +import { FaClock, FaFax, FaMapMarkerAlt } from "react-icons/fa"; +import { GiRotaryPhone } from "react-icons/gi"; export default function ContactBlock() { return ( @@ -31,22 +33,8 @@ async function ContactWithData() { <div className="row mb-60 mb-sm-50"> {/* Contact Item */} <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" /> - </svg> - </div> - + <div className="alt-features-item border-left mt-0 fadeScaleIn"> + <FaMapMarkerAlt className="text-4xl m-5" /> <h4 className="alt-features-title">Location</h4> <div className="alt-features-descr clearlinks"> <div> @@ -60,21 +48,8 @@ async function ContactWithData() { {/* End Contact Item */} {/* Contact Item */} <div className="col-sm-6 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" /> - </svg> - </div> + <div className="alt-features-item border-left mt-0 fadeScaleIn"> + <GiRotaryPhone className="text-4xl m-5" /> <h4 className="alt-features-title">Phone</h4> <div className="alt-features-descr clearlinks"> <div> @@ -88,21 +63,8 @@ async function ContactWithData() { <div className="row mb-60 mb-sm-50"> {/* Contact Item */} <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" /> - </svg> - </div> + <div className="alt-features-item border-left mt-0 fadeScaleIn"> + <FaClock className="text-4xl m-5" /> <h4 className="alt-features-title">Hours</h4> <div className="alt-features-descr clearlinks"> {Array.isArray(contact?.hours) && @@ -117,21 +79,8 @@ async function ContactWithData() { {/* End Contact Item */} {/* Contact Item */} <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" /> - </svg> - </div> + <div className="alt-features-item border-left mt-0 fadeScaleIn"> + <FaFax className="text-4xl m-5" /> <h4 className="alt-features-title">Fax</h4> <div className="alt-features-descr clearlinks"> <div> @@ -182,21 +131,7 @@ function ContactSkeleton() { {/* Contact Item */} <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" /> - </svg> - </div> - + <FaMapMarkerAlt className="text-4xl m-5" /> <h4 className="alt-features-title">Location</h4> <div className="h-3 bg-gray-300 rounded flex-1"></div> </div> @@ -205,20 +140,7 @@ function ContactSkeleton() { {/* Contact Item */} <div className="col-sm-6 d-flex align-items-stretch"> <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" /> - </svg> - </div> + <GiRotaryPhone className="text-4xl m-5" /> <h4 className="alt-features-title">Phone</h4> <div className="h-3 bg-gray-300 rounded flex-1"></div> </div> @@ -229,20 +151,7 @@ function ContactSkeleton() { {/* Contact Item */} <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" /> - </svg> - </div> + <FaClock className="text-4xl m-5" /> <h4 className="alt-features-title">Hours</h4> <div className="h-3 bg-gray-300 rounded flex-1"></div> </div> @@ -251,20 +160,7 @@ function ContactSkeleton() { {/* Contact Item */} <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" /> - </svg> - </div> + <FaFax className="text-4xl m-5" /> <h4 className="alt-features-title">Fax</h4> <div className="h-3 bg-gray-300 rounded flex-1"></div> </div> diff --git a/src/components/Blocks/Form/index.tsx b/src/components/Blocks/Form/index.tsx index 52c28e4..9abc227 100644 --- a/src/components/Blocks/Form/index.tsx +++ b/src/components/Blocks/Form/index.tsx @@ -89,7 +89,7 @@ export const FormBlock: React.FC< }, 250); try { - const req = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/form-submissions`, { + const req = await fetch(`/api/form-submissions`, { body: JSON.stringify({ form: formID, submissionData: dataToSend, @@ -140,7 +140,7 @@ export const FormBlock: React.FC< ); return ( - <div> + <div className="container"> <div> {!!enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />} {!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />} diff --git a/src/components/Blocks/RenderBlocks.tsx b/src/components/Blocks/RenderBlocks.tsx index 277a987..f6052d8 100644 --- a/src/components/Blocks/RenderBlocks.tsx +++ b/src/components/Blocks/RenderBlocks.tsx @@ -51,7 +51,7 @@ export const RenderBlocks: React.FC<{ ); } else if (blockType === "formBlock") { return ( - <div className="my-10 px-8" key={index}> + <div className="my-10" key={index}> <FormBlock id={block.id} enableIntro={block.enableIntro} diff --git a/src/components/Contacts/Contact.tsx b/src/components/Contacts/Contact.tsx deleted file mode 100644 index 637abe0..0000000 --- a/src/components/Contacts/Contact.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import { fetchContact } from "@/services/payload/contact"; -import { FaClock, FaFax, FaMapMarkerAlt } from "react-icons/fa"; -import { GiRotaryPhone } from "react-icons/gi"; -import { Suspense } from "react"; - -export default function Contact() { - return ( - <> - <Suspense fallback={<ContactSkeleton />}> - <ContactWithData /> - </Suspense> - </> - ); -} - -async function ContactWithData() { - const contact = await fetchContact(); - - return ( - <div className="container position-relative"> - <div className="row"> - <div className="col-lg-6"> - <div className="row mb-50"> - <div className="col-lg-10"> - <h2 className="section-caption-slick mb-xs-10">Contact Us</h2> - </div> - </div> - </div> - </div> - <div className="row" data-wow-delay="0.5s"> - <div className="col-md-6 mb-sm-10"> - {/* Contact Form */} - <div className="row mb-60 mb-sm-50"> - {/* Contact Item */} - <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s"> - <FaMapMarkerAlt className="text-4xl m-5" /> - <h4 className="alt-features-title">Location</h4> - <div className="alt-features-descr clearlinks"> - <div> - <a target="_blank" href={contact?.location?.href ?? "#"}> - {contact?.fullLocation ?? ""} - </a> - </div> - </div> - </div> - </div> - {/* End Contact Item */} - {/* Contact Item */} - <div className="col-sm-6 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".5s"> - <GiRotaryPhone className="text-4xl m-5" /> - <h4 className="alt-features-title">Phone</h4> - <div className="alt-features-descr clearlinks"> - <div> - <a href={`tel:${contact?.phone ?? "#"}`}>{contact?.phone ?? ""}</a> - </div> - </div> - </div> - </div> - {/* End Contact Item */} - </div> - <div className="row mb-60 mb-sm-50"> - {/* Contact Item */} - <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s"> - <FaClock className="text-4xl m-5" /> - <h4 className="alt-features-title">Hours</h4> - <div className="alt-features-descr clearlinks"> - {Array.isArray(contact?.hours) && - contact.hours.map((h) => ( - <p key={h.id} className="text-wrap"> - {h.hour ?? ""} - </p> - ))} - </div> - </div> - </div> - {/* End Contact Item */} - {/* Contact Item */} - <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="alt-features-item border-left mt-0 wow fadeScaleIn" data-wow-delay=".3s"> - <FaFax className="text-4xl m-5" /> - <h4 className="alt-features-title">Fax</h4> - <div className="alt-features-descr clearlinks"> - <div> - <a href={`tel:${contact?.fax ?? "#"}`}>{contact?.fax ?? ""}</a> - </div> - </div> - </div> - </div> - {/* End Contact Item */} - </div> - {/* End Contact Form */} - </div> - <div className="col-md-6 d-flex align-items-stretch"> - {/* Google Map */} - <div className="map-boxed"> - <iframe - src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d108795.7060636289!2d-110.242613!3d31.555297!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86d7292e9b858975%3A0xc2519e5d827cd79c!2sCochise%20Oncology!5e0!3m2!1sen!2sus!4v1740412623968!5m2!1sen!2sus" - width={600} - height={450} - style={{ border: 0 }} - loading="lazy" - referrerPolicy="no-referrer-when-downgrade" - /> - </div> - {/* End Google Map */} - </div> - </div> - </div> - ); -} - -function ContactSkeleton() { - return ( - <div className="container position-relative animate-pulse"> - <div className="row"> - <div className="col-lg-6"> - <div className="row mb-50"> - <div className="col-lg-10"> - <h2 className="section-caption-slick mb-xs-10">Contact Us</h2> - </div> - </div> - </div> - </div> - <div className="row"> - <div className="col-md-6 mb-sm-10"> - {/* Contact Form */} - <div className="row mb-60 mb-sm-50"> - {/* Contact Item */} - <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z" /> - </svg> - </div> - - <h4 className="alt-features-title">Location</h4> - <div className="h-3 bg-gray-300 rounded flex-1"></div> - </div> - </div> - {/* End Contact Item */} - {/* Contact Item */} - <div className="col-sm-6 d-flex align-items-stretch"> - <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 17H7V5h10v14zM12 16c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z" /> - </svg> - </div> - <h4 className="alt-features-title">Phone</h4> - <div className="h-3 bg-gray-300 rounded flex-1"></div> - </div> - </div> - {/* End Contact Item */} - </div> - <div className="row mb-60 mb-sm-50"> - {/* Contact Item */} - <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-8h4v2h-6V7h2v5z" /> - </svg> - </div> - <h4 className="alt-features-title">Hours</h4> - <div className="h-3 bg-gray-300 rounded flex-1"></div> - </div> - </div> - {/* End Contact Item */} - {/* Contact Item */} - <div className="col-sm-6 mb-xs-30 d-flex align-items-stretch"> - <div className="flex-1 alt-features-item border-left mt-0"> - <div className="alt-features-icon"> - <svg - width={24} - height={24} - viewBox="0 0 24 24" - fill="currentColor" - aria-hidden="true" - xmlns="http://www.w3.org/2000/svg" - fillRule="evenodd" - clipRule="evenodd" - > - <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm1-12h-2v2h2V8zm0 4h-2v6h2v-6zm-4-2H7v2h2v-2zm6 0h-2v2h2v-2z" /> - </svg> - </div> - <h4 className="alt-features-title">Fax</h4> - <div className="h-3 bg-gray-300 rounded flex-1"></div> - </div> - </div> - {/* End Contact Item */} - </div> - {/* End Contact Form */} - </div> - <div className="col-md-6 d-flex align-items-stretch"> - {/* Google Map */} - <div className="h-80 bg-gray-300 rounded flex-1"></div> - {/* End Google Map */} - </div> - </div> - </div> - ); -} diff --git a/src/components/Contacts/ContactForm.tsx b/src/components/Contacts/ContactForm.tsx deleted file mode 100644 index 183ca32..0000000 --- a/src/components/Contacts/ContactForm.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { fetchForm } from "@/services/payload/form"; -import { FormBlock } from "@/components/Blocks/Form"; - -export default async function ContactForm() { - const form = await fetchForm(1); - - if (!form) return <></>; - - return ( - <div className="box-shadow bg-white round p-4 p-sm-5 position-relative z-index-1"> - <h4 className="h3 mb-40 mb-sm-30">{form?.title ?? ""}</h4> - <div> - <FormBlock enableIntro={true} form={form} /> - </div> - </div> - ); -} diff --git a/src/components/Homepage.tsx b/src/components/Homepage.tsx index bfd74e9..7519501 100644 --- a/src/components/Homepage.tsx +++ b/src/components/Homepage.tsx @@ -1,8 +1,8 @@ import Image from "next/image"; import Link from "next/link"; import About from "./About"; -import Contact from "./Contacts/Contact"; import Testimonials from "./Testimonials"; +import ContactBlock from "./Blocks/Contact"; export default function homepage({ dark = false }) { return ( @@ -179,7 +179,9 @@ export default function homepage({ dark = false }) { </section> <section className={`mb-5 scrollSpysection ${dark ? "bg-dark-1 light-content" : ""}`} id="contact"> - <Contact /> + <div className="wow fadeInUp"> + <ContactBlock /> + </div> </section> </> );