implementirano kopiranje linka

app/ui/LocationCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
+import { Cog8ToothIcon, PlusCircleIcon, LinkIcon } from "@heroicons/react/24/outline";
 import { FC } from "react";
 import { BillBadge } from "./BillBadge";
 import { BillingLocation } from "../lib/db-types";
@@ -8,6 +8,7 @@ import { formatYearMonth } from "../lib/format";
 import { formatCurrency } from "../lib/formatStrings";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
+import { toast, useToast } from "react-toastify";
 
 export interface LocationCardProps {
     location: BillingLocation
@@ -20,6 +21,15 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
     // sum all the billAmounts
     const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
 
+    const handleCopyLinkClick = () => {
+        // copy URL to clipboard
+        const url = `${window.location.origin}/share/location/${_id}`;
+        navigator.clipboard.writeText(url);
+
+        // use NextJS toast to notiy user that the link was copied
+        toast.success(t("link-copy-message"), {theme: "dark"});
+    }
+    
     return(
         <div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 border-1 border-neutral my-1">
             <div className="card-body">
@@ -42,6 +52,8 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
                     </p>
                     : null
                 }
+
+                <LinkIcon className="h-[1em] w-[1em] cursor-pointer text-2xl inline-block hover:text-red-500" title="create sharable link" style={{ position: "absolute", bottom: ".5em", right: "1.2em" }} onClick={handleCopyLinkClick} />
             </div>
         </div>);
 };

app/ui/MonthLocationList.tsx

@@ -8,6 +8,8 @@ import Pagination from "./Pagination";
 import { LocationCard } from "./LocationCard";
 import { BillingLocation, YearMonth } from "../lib/db-types";
 import { useRouter, useSearchParams } from "next/navigation";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const getNextYearMonth = (yearMonth:YearMonth) => {
     const {year, month} = yearMonth;
@@ -88,6 +90,6 @@ export const MonthLocationList:React.FC<MonthLocationListProps  > = ({
             <div className="mt-5 flex w-full justify-center">
                 <Pagination availableYears={availableYears} />
             </div>
-
+            <ToastContainer />
         </>)
 }