enabled i18n for all components

app/ui/BillDeleteForm.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { Bill, BillingLocation } from "../lib/db-types";
 import { useFormState } from "react-dom";
 import { Main } from "./Main";
 import { deleteBillById } from "../lib/actions/billActions";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 export interface BillDeleteFormProps {
     bill: Bill,
@@ -17,18 +18,24 @@ export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
     const { year, month } = location.yearMonth;
     const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month);
     const [ state, dispatch ] = useFormState(handleAction, null);
-
+    const t = useTranslations("bill-delete-form");
 
     return(
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
             <div className="card-body">
                 <form action={dispatch}>
                     <p className="py-6 px-6">
-                        Please confirm deletion of bill “<strong>{bill.name}</strong>” at “<strong>{location.name}</strong>”.
+                    {
+                        t.rich("text", {
+                            bill_name:bill.name,
+                            location_name:location.name,
+                            strong: (chunks:ReactNode) => `<strong>${chunks}</strong>`,
+                        })
+                    }
                     </p>
                     <div className="pt-4 text-center">
-                        <button className="btn btn-primary">Confim</button>
-                        <Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>Cancel</Link>
+                        <button className="btn btn-primary">{t("confirm-button")}</button>
+                        <Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
                     </div>
                 </form>
             </div>