added 'add health event' menu to health section

Author: belledw

client/src/components/ui/add-event-menu.tsx

@@ -3,10 +3,10 @@
 import { Check, X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { CardTitle } from "@/components/ui/card";
 import { DateTimePicker } from "@/components/ui/date-time-picker";
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
+import { TextTitle } from "@/components/ui/text-styles";
 
 interface AddEventProps {
   className?: string;
@@ -17,7 +17,7 @@ export function AddEvent(props: AddEventProps) {
   return (
     <div className="flex flex-col gap-5">
       <hr className="mb-2 mt-10"></hr>
-      <CardTitle className="flex gap-2 text-3xl">Add Event</CardTitle>
+      <TextTitle className="flex gap-2 text-3xl">Add Event</TextTitle>
       <FieldGroup>
         <Field>
           <FieldLabel htmlFor="checkout-7j9-card-name-43j">

client/src/components/ui/add-health-event-menu.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { DateTimePicker } from "@/components/ui/date-time-picker";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { TextTitle } from "@/components/ui/text-styles";
+
+interface AddHealthEventProps {
+  className?: string;
+  onClickClose: () => void;
+}
+
+export function AddHealthEvent(props: AddHealthEventProps) {
+  return (
+    <div className="flex flex-col gap-5">
+      <hr className="mb-2 mt-10"></hr>
+      <TextTitle className="flex gap-2 text-3xl">Add Health Event</TextTitle>
+      <FieldGroup>
+        <Field className="lg:max-w-1/2">
+          <FieldLabel htmlFor="checkout-7j9-card-name-43j">
+            Symptom Type
+          </FieldLabel>
+          <Input id="checkout-7j9-card-name-43j" placeholder="Vomit" required />
+        </Field>
+        <div className="lg:max-w-1/2 flex gap-5">
+          <div className="mt-1.5">
+            <DateTimePicker />
+          </div>
+          <Field>
+            <FieldLabel htmlFor="checkout-7j9-card-name">Pet</FieldLabel>
+            <Input
+              id="checkout-7j9-card-name"
+              placeholder="Spaghetti"
+              required
+            />
+          </Field>
+        </div>
+        <Field>
+          <FieldLabel htmlFor="checkout-7j9-card-name-">
+            Description (optional)
+          </FieldLabel>
+          <Input
+            id="checkout-7j9-card-name-"
+            placeholder="50.0 g x Premium Cat Biscuits"
+          />
+        </Field>
+      </FieldGroup>
+      <div className="mt-5 flex items-center gap-5">
+        <Button
+          className="gray-600 hover:gray-400 rounded-full"
+          onClick={props.onClickClose}
+        >
+          <Check className="mr-1" /> Save Event
+        </Button>
+        <Button
+          className="rounded-full"
+          variant="outline"
+          onClick={props.onClickClose}
+        >
+          <X className="mr-1" /> Discard and close
+        </Button>
+      </div>
+      <hr className="my-5"></hr>
+    </div>
+  );
+}

client/src/pages/pet.tsx

@@ -2,6 +2,7 @@ import { Check, Plus } from "lucide-react";
 import { useState } from "react";
 
 import { AddEvent } from "@/components/ui/add-event-menu";
+import { AddHealthEvent } from "@/components/ui/add-health-event-menu";
 import { AddTask } from "@/components/ui/add-task-menu";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -18,6 +19,7 @@ export default function Default() {
   const [taskMenu, setTaskMenu] = useState(false);
   const [settingsMenu, setSettingsMenu] = useState(false);
   const [eventMenu, setEventMenu] = useState(false);
+  const [healthMenu, setHealthMenu] = useState(false);
 
   return (
     <div className={dm_sans.className}>
@@ -99,7 +101,7 @@ export default function Default() {
             <Button
               className="mt-5 w-full p-5"
               variant="outline"
-              onClick={() => "Add function later"}
+              onClick={() => setHealthMenu(true)}
             >
               <Plus className="mr-1" /> Add health event
             </Button>
@@ -108,6 +110,9 @@ export default function Default() {
             <HealthOverview title="Vomit" occurrences="3" />
           </div>
         </div>
+        {healthMenu === true && (
+          <AddHealthEvent onClickClose={() => setHealthMenu(false)} />
+        )}
       </div>
       <div className="h-[75]"></div>
     </div>