added 'pet settings' menu

Author: belledw

client/src/components/ui/dob-picker.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { dm_sans } from "@/lib/fonts";
+
+export function DOBPicker({ prevDOB }: { prevDOB: string }) {
+  const [open, setOpen] = React.useState(false);
+  const [date, setDate] = React.useState<Date | undefined>(undefined);
+  return (
+    <div className="flex flex-col gap-3">
+      <Label htmlFor="date" className="px-1">
+        Date of birth
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            id="date"
+            className="w-48 justify-between font-normal"
+          >
+            {date ? date.toLocaleDateString() : prevDOB}
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+          <Calendar
+            className={`${dm_sans.className}`}
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            onSelect={(date) => {
+              setDate(date);
+              setOpen(false);
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

client/src/components/ui/pet-settings-menu.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Check, X } from "lucide-react";
+
+import { DOBPicker } from "@/components/ui/dob-picker";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
+
+import { Button } from "./button";
+import { CardTitle } from "./card";
+import { Input } from "./input";
+
+interface PetSettingsProps {
+  className?: string;
+  petName: string;
+  petType: string;
+  petDOB: string;
+  onClickClose: () => void;
+}
+
+export function PetSettings(props: PetSettingsProps) {
+  return (
+    <div className="flex flex-col gap-5">
+      <CardTitle className="flex gap-2 text-3xl">
+        Settings for {props.petName}
+      </CardTitle>
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="checkout-7j9-card-name-43j">Pet Name</FieldLabel>
+          <Input id="checkout-7j9-card-name-43j" placeholder={props.petName} />
+        </Field>
+        <div className="lg:max-w-1/2 flex gap-5">
+          <Field className="-mt-1">
+            <FieldLabel htmlFor="checkout-7j9-card-name">Pet Type</FieldLabel>
+            <Input id="checkout-7j9-card-name" placeholder={props.petType} />
+          </Field>
+          <DOBPicker prevDOB={props.petDOB} />
+        </div>
+      </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 changes
+        </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

@@ -8,19 +8,21 @@ import { EventCard } from "@/components/ui/event-card";
 import { ChartBarHorizontal } from "@/components/ui/health-chart";
 import { HealthOverview } from "@/components/ui/health-overview";
 import { PetHeader } from "@/components/ui/pet-page-header";
+import { PetSettings } from "@/components/ui/pet-settings-menu";
 import { TaskCarousel } from "@/components/ui/pet-task-carousel";
 import { TextTitle } from "@/components/ui/text-styles";
 import { dm_sans } from "@/lib/fonts";
 
 export default function Default() {
   const [taskMenu, setTaskMenu] = useState(false);
+  const [settingsMenu, setSettingsMenu] = useState(false);
 
   return (
     <div className={dm_sans.className}>
       <h1 className="flex justify-center p-10"> Navbar </h1>
       <PetHeader
         onClickTask={() => setTaskMenu(true)}
-        onClickSettings={() => "state function here"}
+        onClickSettings={() => setSettingsMenu(true)}
         petImg=""
         petAlt="Spaghetti's Profile Image"
         petInit="S"
@@ -34,6 +36,15 @@ export default function Default() {
           <AddTask onClickClose={() => setTaskMenu(false)} />
         )}
 
+        {settingsMenu === true && (
+          <PetSettings
+            petName="Spaghetti"
+            petType="Cat"
+            petDOB="01/06/2020"
+            onClickClose={() => setSettingsMenu(false)}
+          />
+        )}
+
         <TextTitle className="mt-5 text-3xl"> Upcoming Tasks </TextTitle>
         <div className="flex justify-center md:mx-0">
           <TaskCarousel />