Event signup form

.prettierrc

@@ -0,0 +1 @@
+{}

app/(website)/contact/contact.js

@@ -7,7 +7,7 @@ import useWeb3Forms from "@web3forms/react";
 import {
   EnvelopeIcon,
   PhoneIcon,
-  ChatBubbleLeftRightIcon
+  ChatBubbleLeftRightIcon,
 } 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);
@@ -40,7 +40,7 @@ export default function Contact({ settings }) {
     onError: (msg, data) => {
       setIsSuccess(false);
       setMessage(msg);
-    }
+    },
   });
 
   return (
@@ -52,22 +52,20 @@ export default function Contact({ settings }) {
         <p className="text-lg">Sign-up here to become a speaker.</p>
       </div>
 
-      <div className="grid my-10 md:grid-cols-2">
+      <div className="my-10 grid md:grid-cols-2">
         <div className="my-10">
           <h2 className="text-2xl font-semibold dark:text-white">
             Contact React Denver
           </h2>
-          <p className="max-w-sm mt-5">
+          <p className="mt-5 max-w-sm">
             Have something to say? We are here to help.
           </p>
 
           <div className="mt-5">
             {settings?.email && (
-              <div className="flex items-center mt-2 space-x-2 text-dark-600 dark:text-gray-400">
-                <EnvelopeIcon className="w-4 h-4" />
-                <a href={`mailto:${settings.email}`}>
-                  {settings.email}
-                </a>
+              <div className="text-dark-600 mt-2 flex items-center space-x-2 dark:text-gray-400">
+                <EnvelopeIcon className="h-4 w-4" />
+                <a href={`mailto:${settings.email}`}>{settings.email}</a>
               </div>
             )}
             <div className="flex items-center mt-2 space-x-2 text-dark-600 dark:text-gray-400">
@@ -83,21 +81,22 @@ export default function Contact({ settings }) {
               id=""
               className="hidden"
               style={{ display: "none" }}
-              {...register("botcheck")}></input>
+              {...register("botcheck")}
+            ></input>
 
             <div className="mb-5">
               <input
                 type="text"
                 placeholder="Full Name"
                 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.name
-                    ? "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("name", {
                   required: "Full name is required",
-                  maxLength: 80
+                  maxLength: 80,
                 })}
               />
               {errors.name && (
@@ -117,17 +116,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 && (
@@ -165,9 +164,10 @@ export default function Contact({ settings }) {
                 name="message"
                 placeholder="Your Talk Description"
                 className={`w-full px-4 py-3 border-2 placeholder:text-gray-800 dark:text-white dark:placeholder:text-gray-200 dark:bg-gray-900   rounded-md outline-none  h-36 focus:ring-4  ${
+
                   errors.message
-                    ? "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("message", {
                   required: "Enter your talk description"
@@ -242,23 +242,27 @@ export default function Contact({ settings }) {
             <button
               type="submit"
               className="w-full py-4 my-5 font-semibold text-white transition-colors bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-offset-2 focus:ring focus:ring-gray-200 px-7 dark:bg-white dark:text-black ">
+
               {isSubmitting ? (
                 <svg
-                  className="w-5 h-5 mx-auto text-white dark:text-black animate-spin"
+                  className="mx-auto h-5 w-5 animate-spin text-white dark:text-black"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
-                  viewBox="0 0 24 24">
+                  viewBox="0 0 24 24"
+                >
                   <circle
                     className="opacity-25"
                     cx="12"
                     cy="12"
                     r="10"
                     stroke="currentColor"
-                    strokeWidth="4"></circle>
+                    strokeWidth="4"
+                  ></circle>
                   <path
                     className="opacity-75"
                     fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
                 </svg>
               ) : (
                 "Sign-Up"
@@ -267,12 +271,12 @@ export default function Contact({ settings }) {
           </form>
 
           {isSubmitSuccessful && isSuccess && (
-            <div className="mt-3 text-sm text-center text-green-500">
+            <div className="mt-3 text-center text-sm text-green-500">
               {message || "Success. Message sent successfully"}
             </div>
           )}
           {isSubmitSuccessful && !isSuccess && (
-            <div className="mt-3 text-sm text-center text-red-500">
+            <div className="mt-3 text-center text-sm text-red-500">
               {message || "Something went wrong. Please try later."}
             </div>
           )}

app/(website)/event/[slug]/default.js

@@ -1,15 +1,23 @@
 import Image from "next/image";
 import Link from "next/link";
 import Container from "@/components/container";
+import EventSignup from "@/components/event-signup";
 import { notFound } from "next/navigation";
 import { PortableText } from "@/lib/sanity/plugins/portabletext";
 import { urlForImage } from "@/lib/sanity/image";
 import { parseISO, format } from "date-fns";
-
 import SpeakerCard from "@/components/blog/speakerCard";
 
 export default function Event(props) {
-  const { loading, event } = props;
+  const { loading, event, nextEventData } = props;
+
+  const checkEventDatePast = (eventDate) => {
+    const today = new Date();
+    const event = new Date(eventDate);
+    return event.setHours(0, 0, 0, 0) <= today.setHours(0, 0, 0, 0);
+  };
+
+  const dateInPast = checkEventDatePast(event.eventAt);
 
   const slug = event?.slug;
 
@@ -84,6 +92,7 @@ export default function Event(props) {
 
       <Container>
         <article className="mx-auto max-w-screen-md ">
+          {!dateInPast && <EventSignup event={event} nextEventData={nextEventData}/>}
           <div className="prose mx-auto my-3 dark:prose-invert prose-a:text-blue-600">
             {event.body && <PortableText value={event.body} />}
           </div>

app/(website)/event/[slug]/page.js

@@ -1,5 +1,4 @@
 import EventPage from "./default";
-
 import { getAllEventSlugs, getEventBySlug } from "@/lib/sanity/client";
 
 export async function generateStaticParams() {
@@ -13,7 +12,9 @@ export async function generateMetadata({ params }) {
 
 export default async function EventDefault({ params }) {
   const event = await getEventBySlug(params.slug);
-  return <EventPage event={event} />;
+  const response = await fetch(`${process.env.DEVELOPMENT_URL}/api/tito-check-slug?eventId=${event.titoSlug}`)
+  const nextEventData = await response.json()
+  return <EventPage event={event} nextEventData={nextEventData}/>;
 }
 
 // export const revalidate = 60;

app/(website)/home.js

@@ -1,14 +1,14 @@
 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 && (
         <Container>
-          <div className="grid gap-10 md:grid-cols-2 lg:gap-10 ">
-            {events.slice(0, 2).map(event => (
+          <div className="my-10 grid gap-10 md:grid-cols-2 lg:gap-10">
+            {events.slice(0, 3).map((event) => (
               <EventList
                 key={event._id}
                 event={event}
@@ -18,14 +18,15 @@ export default function Event({ events }) {
             ))}
           </div>
           <div className="mt-10 grid gap-10 md:grid-cols-2 lg:gap-10 xl:grid-cols-3 ">
-            {events.slice(2, 14).map(event => (
+            {events.slice(3, 14).map((event) => (
               <EventList key={event._id} event={event} aspect="square" />
             ))}
           </div>
           <div className="mt-10 flex justify-center">
             <Link
               href="/archive"
-              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">
+              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"
+            >
               <span>View all Events</span>
             </Link>
           </div>