cant remember

src/components/billtracker/BillTrackerCalendar.tsx

@@ -1,7 +1,7 @@
 "use client"
 import * as React from "react"
 import { Calendar } from "~/components/ui/BillTrackerCalendar"
-import { Button } from "~/components/ui/button"
+import CreateBillForm from "~/components/billtracker/CreateBillForm"
 
 export default function BillTrackerCalendar() {
   const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(undefined)
@@ -39,7 +39,7 @@ export default function BillTrackerCalendar() {
   }, [])
 
   return (
-    <div className="m-auto p-2 relative" ref={calendarRef}>
+    <div className="m-auto p-2 relative mt-10" ref={calendarRef}>
       <Calendar
         mode="single"
         selected={selectedDate}
@@ -49,21 +49,12 @@ export default function BillTrackerCalendar() {
       {isOpen && selectedDate && (
         <div 
           ref={popoverRef}
-          className="absolute top-full left-1/2 transform -translate-x-1/2 border rounded-lg shadow-lg px-4 pb-4 w-80"
+          className="absolute top-full left-1/2 transform -translate-x-1/2
+            border rounded-lg shadow-lg px-4 pb-4 w-80"
         >
           <div className="grid gap-4">
             <div className="space-y-2">
-              <div className="flex flex-row w-full">
-                <h3 className="font-medium leading-none text-center mx-auto mt-2 py-2 md:text-xl">
-                  {selectedDate.toDateString()}
-                </h3>
-                <button className="justify-self-end ml-auto bg-none text-primary text-m md:text-xl"
-                  onClick={() => setIsOpen(false)}
-                >
-                  x
-                </button>
-              </div>
-              <p>Add your events or bills due here.</p>
+              < CreateBillForm date={selectedDate} setIsOpen={setIsOpen} />
             </div>
           </div>
         </div>