knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enabled i18n for all components

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-16 21:56:41 +01:00
parent 3746989f05
commit d30bd50e1a
11 changed files with 150 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/ui/LocationCard.tsx
View File

@@ -1,12 +1,13 @@
'client only';
import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import { FC, ReactNode } from "react";
import { BillBadge } from "./BillBadge";
import { BillingLocation } from "../lib/db-types";
import { formatYearMonth } from "../lib/format";
import { formatCurrency } from "../lib/formatStrings";
import Link from "next/link";
import { useTranslations } from "next-intl";
export interface LocationCardProps {
location: BillingLocation
@@ -14,13 +15,15 @@ export interface LocationCardProps {
export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearMonth, bills }}) => {
const t = useTranslations("home-page.location-card");
// sum all the billAmounts
const monthlyExpense = bills.reduce((acc, bill) => bill.paid ? acc + (bill.payedAmount ?? 0) : acc, 0);
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">
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
<Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip={t("edit-card-tooltip")}>
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
</Link>
<h2 className="card-title mr-[2em] text-[1rem]">{formatYearMonth(yearMonth)} {name}</h2>
@@ -28,14 +31,18 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
{
bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
}
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
<Link href={`/bill/${_id}/add`} className="tooltip" data-tip={t("add-bill-button-tooltip")}>
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</Link>
</div>
{
monthlyExpense > 0 ?
<p>
Payed total: <strong>{ formatCurrency(monthlyExpense) }</strong>
{
t.rich("payed-total", {
amount: formatCurrency(monthlyExpense),
strong: (chunks:ReactNode) => `<strong>${chunks}</strong>`
})}
</p>
: null
}