Made a lot of the front end

src/components/portal/billtracker/CreateBillForm.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  Drawer,
+  DrawerTrigger,
+} from "~/components/ui/drawer"
+import CreateBillDrawer from "~/components/portal/billtracker/CreateBillDrawer"
+import { Button } from "~/components/ui/button"
+
+type CreateBillFormProps = {
+  date: Date;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+// Create Bill Form. Get date from calendar
+export default function CreateBillForm({date, setIsOpen}: CreateBillFormProps) {
+  return (
+    <div>
+      <div className="flex flex-row w-full">
+        <h3 className="font-medium leading-none
+          text-center mx-auto mt-2 py-2 md:text-xl">
+          {date.toDateString()}
+        </h3>
+        <button className="justify-self-end ml-auto bg-none
+          text-primary text-m md:text-xl"
+          onClick={() => setIsOpen(false)}
+        >
+          x
+        </button>
+      </div>
+      <Drawer>
+        <DrawerTrigger className="w-full">
+          <Button variant="outline" size="icon"
+            className="border-none w-full"
+          >
+            Create new Bill
+          </Button>
+        </DrawerTrigger>
+        <CreateBillDrawer date={date} />
+      </Drawer>
+    </div>
+  );
+}