kreirane komponente

app/ui/LocationCard.tsx

@@ -0,0 +1,28 @@
+'client only';
+
+import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
+import { FC } from "react";
+import { BillBadge } from "./BillBadge";
+import { Bill, Location } from "../lib/db-types";
+
+export interface LocationCardProps {
+    month: Date,
+    location: Location,
+    bills: Bill[]
+}
+
+export const LocationCard:FC<LocationCardProps> = ({month, location: { name }, bills}) => 
+<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
+    <div className="card-body">
+    <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
+    <h2 className="card-title">{month.getFullYear()}-{month.getMonth()+1} {name}</h2>
+    <div className="card-actions">
+        {
+            bills.map(bill => <BillBadge key={bill.id} bill={bill} />)
+        }
+        <div className="tooltip" data-tip="Dodaj novi tip računa">
+            <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
+        </div>
+    </div>
+    </div>
+</div>;