+ );
+}
+export default EventCardPreview
\ No newline at end of file
diff --git a/src/app/manage/[clubId]/create/TimeSelect.tsx b/src/app/manage/[clubId]/create/TimeSelect.tsx
new file mode 100644
index 00000000..05ea7d24
--- /dev/null
+++ b/src/app/manage/[clubId]/create/TimeSelect.tsx
@@ -0,0 +1,85 @@
+'use client'
+import { useEffect, useState } from "react";
+import type {
+ UseFormRegister,
+ UseFormSetValue,
+ UseFormGetValues,
+} from "react-hook-form";
+import type { createEventSchema } from "@src/utils/formSchemas";
+import type { z } from "zod";
+
+interface Props {
+ register: UseFormRegister>,
+ setValue: UseFormSetValue>,
+ getValues: UseFormGetValues>,
+ watchStartTime: Date,
+}
+
+const TimeSelect = ({ register, setValue, getValues, watchStartTime }: Props) => {
+ const [multiDay, setMultiDay] = useState(false);
+ const [numHours, setNumHours] = useState(2);
+
+ useEffect(() => {
+ // If not multi-day, set end time to start time + numHours
+ if (!multiDay && watchStartTime !== undefined) {
+ const date = new Date(watchStartTime);
+ date.setHours(date.getHours() + numHours);
+ setValue("endTime", date);
+ }
+
+ // If start time is after end time, set end time to start time
+ if (new Date(watchStartTime) > new Date(getValues('endTime'))) {
+ setValue('endTime', watchStartTime);
+ }
+ }, [setValue, getValues, watchStartTime, multiDay, numHours])
+
+ return (<>
+
+
+
Multi-Day Event
+
Does the event last longer than one day?
+
+
+
+
{
+ // If switching to multiDay, clear endTime
+ if (!multiDay) {
+ setValue('endTime', new Date(NaN));
+ }
+ setMultiDay(!multiDay);
+ }} >
+
{multiDay ? "Yes" : "No"}
+
+
+
+
+
+
Duration
+
+
+
+ { multiDay ?
+
+
+ { if (new Date(e.currentTarget.value) < new Date(watchStartTime)) setValue('endTime', watchStartTime); }}
+ min={watchStartTime?.toString()}
+ className="outline-none w-full block p-2 text-xs rounded-md text-[#7D8FB3]"
+ />
+
+ :
+
+
+
+
+ }
+
+ );
+}
+export default TimeSelect;
\ No newline at end of file
diff --git a/src/app/manage/[clubId]/create/page.tsx b/src/app/manage/[clubId]/create/page.tsx
new file mode 100644
index 00000000..95765a0e
--- /dev/null
+++ b/src/app/manage/[clubId]/create/page.tsx
@@ -0,0 +1,30 @@
+import Header from "@src/components/BaseHeader";
+import { getServerAuthSession } from "@src/server/auth";
+import { api } from "@src/trpc/server";
+import { signInRoute } from "@src/utils/redirect";
+import { redirect, notFound } from "next/navigation";
+import CreateEventForm from "./CreateEventForm";
+
+const Page = async ({ params }: { params: { clubId: string } }) => {
+ const session = await getServerAuthSession();
+ if (!session) {
+ redirect(signInRoute(`manage/${params.clubId}/create`));
+ }
+
+ const officerClubs = await api.club.getOfficerClubs();
+ const currentClub = officerClubs.filter(val => {
+ return val.id == params.clubId
+ })[0];
+ if (!currentClub) {
+ notFound();
+ }
+
+ return (
+
+