From 85c66e704828e01ef1d22198b994666223c4d04e Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 18:19:26 -0600 Subject: [PATCH 01/18] Adding a responsive but non-functional event sign up form to the homepage. --- app/(website)/home.js | 13 +++-- components/event-signup.js | 112 +++++++++++++++++++++++++++++++++++++ 2 files changed, 120 insertions(+), 5 deletions(-) create mode 100644 components/event-signup.js diff --git a/app/(website)/home.js b/app/(website)/home.js index 746d659..b01688a 100644 --- a/app/(website)/home.js +++ b/app/(website)/home.js @@ -1,14 +1,16 @@ import Link from "next/link"; import Container from "@/components/container"; import EventList from "@/components/eventlist"; - +import EventSignup from "@/components/event-signup"; export default function Event({ events }) { return ( <> {events && ( -
- {events.slice(0, 2).map(event => ( + +

Previous Events

+
+ {events.slice(1, 3).map((event) => (
- {events.slice(2, 14).map(event => ( + {events.slice(3, 14).map((event) => ( ))}
+ className="relative inline-flex items-center gap-1 rounded-md border border-gray-300 bg-white px-3 py-2 pl-4 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 disabled:pointer-events-none disabled:opacity-40 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300" + > View all Events
diff --git a/components/event-signup.js b/components/event-signup.js new file mode 100644 index 0000000..6f872da --- /dev/null +++ b/components/event-signup.js @@ -0,0 +1,112 @@ +"use client"; + +import { useForm } from "react-hook-form"; +import EventList from "@/components/eventlist"; + +function EventSignup(eventProps) { + const { + formState: { errors, isSubmitSuccessful, isSubmitting }, + } = useForm({ + mode: "onTouched", + }); + + return ( +
+
+ +
+
+
+

+ Join us downtown and online for our next event +

+ +
+ + {errors.name && ( +
+ {errors.name.message} +
+ )} +
+
+ + +
+
+
+ + +
+
+ + +
+
+ +
+
+
+ ); +} + +export default EventSignup; From 41a2543f1ba1f5ca06e572533574fbabfd46dc87 Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 25 Aug 2023 18:30:44 -0600 Subject: [PATCH 02/18] Made some alignment changes to the form and made the featured event slightly larger. --- components/event-signup.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/event-signup.js b/components/event-signup.js index 6f872da..ecc4ccc 100644 --- a/components/event-signup.js +++ b/components/event-signup.js @@ -11,15 +11,15 @@ function EventSignup(eventProps) { }); return ( -
-
+
+
-
+

Join us downtown and online for our next event From 9ea994406faecaee24745cf1065f5d3e6c1678a1 Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 29 Aug 2023 14:37:58 -0600 Subject: [PATCH 03/18] Moved event signup form into event page and adjusted the styles for that layout. --- app/(website)/contact/contact.js | 71 ++++++++++++++------------- app/(website)/event/[slug]/default.js | 2 + app/(website)/home.js | 4 +- components/event-signup.js | 29 +++++------ 4 files changed, 53 insertions(+), 53 deletions(-) diff --git a/app/(website)/contact/contact.js b/app/(website)/contact/contact.js index 17dc99d..d40d010 100644 --- a/app/(website)/contact/contact.js +++ b/app/(website)/contact/contact.js @@ -7,7 +7,7 @@ import useWeb3Forms from "@web3forms/react"; import { MapPinIcon, EnvelopeIcon, - PhoneIcon + PhoneIcon, } from "@heroicons/react/24/outline"; export default function Contact({ settings }) { const { @@ -17,9 +17,9 @@ export default function Contact({ settings }) { watch, control, setValue, - formState: { errors, isSubmitSuccessful, isSubmitting } + formState: { errors, isSubmitSuccessful, isSubmitting }, } = useForm({ - mode: "onTouched" + mode: "onTouched", }); const [isSuccess, setIsSuccess] = useState(false); const [message, setMessage] = useState(false); @@ -30,7 +30,7 @@ export default function Contact({ settings }) { access_key: apiKey, settings: { from_name: "React Denver", - subject: "New Contact Message from React Denver Website" + subject: "New Contact Message from React Denver Website", }, onSuccess: (msg, data) => { setIsSuccess(true); @@ -40,34 +40,32 @@ export default function Contact({ settings }) { onError: (msg, data) => { setIsSuccess(false); setMessage(msg); - } + }, }); return ( -

+

Contact

We are a here to help.

-
+

Contact React Denver

-

+

Have something to say? We are here to help.

{settings?.email && ( - @@ -79,21 +77,22 @@ export default function Contact({ settings }) { id="" className="hidden" style={{ display: "none" }} - {...register("botcheck")}> + {...register("botcheck")} + >
{errors.name && ( @@ -113,17 +112,17 @@ export default function Contact({ settings }) { placeholder="Email Address" name="email" autoComplete="false" - className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white rounded-md outline-none dark:placeholder:text-gray-200 dark:bg-gray-900 focus:ring-4 ${ + className={`w-full rounded-md border-2 px-4 py-3 outline-none placeholder:text-gray-800 focus:ring-4 dark:bg-gray-900 dark:text-white dark:placeholder:text-gray-200 ${ errors.email - ? "border-red-600 focus:border-red-600 ring-red-100 dark:ring-0" - : "border-gray-300 focus:border-gray-600 ring-gray-100 dark:border-gray-600 dark:focus:border-white dark:ring-0" + ? "border-red-600 ring-red-100 focus:border-red-600 dark:ring-0" + : "border-gray-300 ring-gray-100 focus:border-gray-600 dark:border-gray-600 dark:ring-0 dark:focus:border-white" }`} {...register("email", { required: "Enter your email", pattern: { value: /^\S+@\S+$/i, - message: "Please enter a valid email" - } + message: "Please enter a valid email", + }, })} /> {errors.email && ( @@ -137,13 +136,13 @@ export default function Contact({ settings }) {