feat: basic create event page

package.json

@@ -13,20 +13,26 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@clerk/elements": "^0.22.23",
-    "@clerk/clerk-sdk-node": "^4.13.22",
     "@aws-sdk/client-s3": "^3.750.0",
     "@aws-sdk/s3-request-presigner": "^3.750.0",
+    "@clerk/clerk-sdk-node": "^4.13.22",
+    "@clerk/elements": "^0.22.23",
     "@clerk/nextjs": "^6.11.0",
-    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clerk": "^0.8.3",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "lucide-react": "^0.471.1",
     "mongoose": "^8.9.5",
     "next": "^14.2.21",
     "radix-ui": "^1.0.1",
     "react": "^18",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-drag-drop-files": "^2.4.0",
     "tailwind-merge": "^2.6.0",

src/app/create-event/page.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import { DateTimePicker } from "@/components/ui/datetime-picker";
+
+export default function CreateEventPage() {
+  const router = useRouter();
+
+  // State for form inputs
+  const [eventName, setEventName] = useState("");
+  const [venue, setVenue] = useState("");
+  const [numPeople, setNumPeople] = useState("");
+  const [startDate, setStartDate] = useState<Date | undefined>();
+  const [endDate, setEndDate] = useState<Date | undefined>();
+  const [eventDetails, setEventDetails] = useState("");
+  const [user, setUser] = useState("");
+
+  // Validation state
+  const [errors, setErrors] = useState({
+    eventName: false,
+    venue: false,
+    numPeople: false,
+    startDate: false,
+    endDate: false,
+    eventDetails: false,
+    user: false,
+    invalidDateRange: false,
+  });
+
+  // Handle form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Check for missing fields
+    const newErrors = {
+      eventName: eventName.trim() === "",
+      venue: venue.trim() === "",
+      numPeople: numPeople.trim() === "",
+      startDate: !startDate,
+      endDate: !endDate,
+      eventDetails: eventDetails.trim() === "",
+      user: user.trim() === "",
+      invalidDateRange: !!(startDate && endDate && startDate >= endDate),
+    };
+
+    setErrors(newErrors);
+
+    // If there are any errors, stop form submission
+    if (Object.values(newErrors).some((error) => error)) {
+      return;
+    }
+
+    // Submit the form if no errors
+    console.log("Event Created:", { eventName, venue, numPeople, startDate, endDate, eventDetails, user });
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 bg-white">
+      <h1 className="text-3xl font-bold mb-4">Create Event</h1>
+      <form className="space-y-4" onSubmit={handleSubmit}>
+        <Input
+          name="eventName"
+          className={`bg-[var(--primary-fill)] !text-lg placeholder:text-lg ${errors.eventName ? "border-red-500" : ""}`}
+          placeholder="Event Name"
+          value={eventName}
+          onChange={(e) => setEventName(e.target.value)}
+        />
+
+        <div className="flex space-x-2">
+          <Select onValueChange={(value) => setVenue(value)}>
+            <SelectTrigger className={`w-1/2 bg-[var(--primary-fill)] text-lg ${errors.venue ? "border-red-500" : ""}`}>
+              <SelectValue placeholder="Venue" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="venue1">Venue 1</SelectItem>
+              <SelectItem value="venue2">Venue 2</SelectItem>
+              <SelectItem value="venue3">Venue 3</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Input
+            type="number"
+            name="numPeople"
+            placeholder="Number of People"
+            value={numPeople}
+            onChange={(e) => setNumPeople(e.target.value)}
+            className={`w-1/2 bg-[var(--primary-fill)] !text-lg placeholder:text-lg ${errors.numPeople ? "border-red-500" : ""}`}
+          />
+        </div>
+
+        <div className="flex space-x-2">
+          <DateTimePicker date={startDate} setDate={setStartDate} error={errors.startDate} />
+          <DateTimePicker date={endDate} setDate={setEndDate} error={errors.endDate} />
+        </div>
+
+        {errors.invalidDateRange && <p className="text-red-500">End time must be after the start time.</p>}
+
+        <Textarea
+          name="eventDetails"
+          placeholder="Event Details"
+          value={eventDetails}
+          onChange={(e) => setEventDetails(e.target.value)}
+          className={`h-24 bg-[var(--primary-fill)] !text-lg placeholder:text-lg ${errors.eventDetails ? "border-red-500" : ""}`}
+        />
+
+        <Input
+          name="user"
+          className={`bg-[var(--primary-fill)] !text-lg placeholder:text-lg ${errors.user ? "border-red-500" : ""}`}
+          placeholder="User"
+          value={user}
+          onChange={(e) => setUser(e.target.value)}
+        />
+
+        <div className="flex space-x-2">
+          <Button type="button" className="w-1/2 bg-[var(--primary-blue)] text-lg">
+            Assign User
+          </Button>
+          <Button type="button" className="w-1/2 bg-[var(--primary-blue)] text-lg">
+            Create User
+          </Button>
+        </div>
+
+        <div className="flex justify-end space-x-2 w-full">
+          <Button type="button" variant="destructive" className="w-1/4 text-lg" onClick={() => router.push("/")}>
+            Cancel
+          </Button>
+          <Button type="submit" className="w-1/4 bg-[var(--primary-blue)] text-lg">
+            Create Event
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default:
           "bg-neutral-900 text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
         destructive:
-          "bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+          "bg-[var(--primary-red)] text-neutral-50 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
         outline:
           "border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
         secondary:

src/components/ui/calendar.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
+        day_today: "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
+        day_outside:
+          "day-outside text-neutral-500 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
+        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
+        day_range_middle:
+          "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => <ChevronLeft className={cn("h-4 w-4", className)} {...props} />,
+        IconRight: ({ className, ...props }) => <ChevronRight className={cn("h-4 w-4", className)} {...props} />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

src/components/ui/datetime-picker.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import { CalendarIcon } from "@radix-ui/react-icons";
+import { format } from "date-fns";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface DateTimePickerProps {
+  date: Date | undefined;
+  setDate: (date: Date | undefined) => void;
+  error?: boolean;
+}
+
+export function DateTimePicker({ date, setDate, error }: DateTimePickerProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const hours = Array.from({ length: 12 }, (_, i) => i + 1);
+
+  const handleDateSelect = (selectedDate: Date | undefined) => {
+    if (selectedDate) {
+      setDate(selectedDate);
+    }
+  };
+
+  const handleTimeChange = (type: "hour" | "minute" | "ampm", value: string) => {
+    if (date) {
+      const newDate = new Date(date);
+      if (type === "hour") {
+        newDate.setHours((parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0));
+      } else if (type === "minute") {
+        newDate.setMinutes(parseInt(value));
+      } else if (type === "ampm") {
+        const currentHours = newDate.getHours();
+        newDate.setHours(value === "PM" ? currentHours + 12 : currentHours - 12);
+      }
+      setDate(newDate);
+    }
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal bg-[var(--primary-fill)] text-lg",
+            error ? "border-red-500" : "",
+            !date && "text-muted-foreground",
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "MM/dd/yyyy hh:mm aa") : <span>MM/DD/YYYY hh:mm aa</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <div className="sm:flex">
+          <Calendar mode="single" selected={date} onSelect={handleDateSelect} initialFocus />
+          <div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+            <ScrollArea className="w-64 sm:w-auto">
+              <div className="flex sm:flex-col p-2">
+                {hours.reverse().map((hour) => (
+                  <Button
+                    key={hour}
+                    size="icon"
+                    variant={date && date.getHours() % 12 === hour % 12 ? "default" : "ghost"}
+                    className="sm:w-full shrink-0 aspect-square"
+                    onClick={() => handleTimeChange("hour", hour.toString())}
+                  >
+                    {hour}
+                  </Button>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" className="sm:hidden" />
+            </ScrollArea>
+            <ScrollArea className="w-64 sm:w-auto">
+              <div className="flex sm:flex-col p-2">
+                {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
+                  <Button
+                    key={minute}
+                    size="icon"
+                    variant={date && date.getMinutes() === minute ? "default" : "ghost"}
+                    className="sm:w-full shrink-0 aspect-square"
+                    onClick={() => handleTimeChange("minute", minute.toString())}
+                  >
+                    {minute}
+                  </Button>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" className="sm:hidden" />
+            </ScrollArea>
+            <ScrollArea>
+              <div className="flex sm:flex-col p-2">
+                {["AM", "PM"].map((ampm) => (
+                  <Button
+                    key={ampm}
+                    size="icon"
+                    variant={
+                      date && ((ampm === "AM" && date.getHours() < 12) || (ampm === "PM" && date.getHours() >= 12))
+                        ? "default"
+                        : "ghost"
+                    }
+                    className="sm:w-full shrink-0 aspect-square"
+                    onClick={() => handleTimeChange("ampm", ampm)}
+                  >
+                    {ampm}
+                  </Button>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-base ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };