Nikola Derežić
131dfe793b
- Center the delete toggle horizontally within the form using justify-center - Add consistent spacing between label and toggle input with gap-4 - Improves visual balance and readability of the delete confirmation form 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { FC, ReactNode } from "react";
|
|
import { BillingLocation } from "../lib/db-types";
|
|
import { deleteLocationById } from "../lib/actions/locationActions";
|
|
import { useFormState } from "react-dom";
|
|
import Link from "next/link";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export interface LocationDeleteFormProps {
|
|
/** location which should be deleted */
|
|
location: BillingLocation
|
|
}
|
|
|
|
export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
|
|
{
|
|
const handleAction = deleteLocationById.bind(null, location._id, location.yearMonth);
|
|
const [ , dispatch ] = useFormState(handleAction, null);
|
|
const t = useTranslations("location-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">
|
|
{
|
|
t.rich("text", {
|
|
name:location.name,
|
|
strong: (chunks:ReactNode) => <strong>{chunks}</strong>,
|
|
})
|
|
}
|
|
</p>
|
|
|
|
<div className="form-control">
|
|
<label className="label cursor-pointer justify-center gap-4">
|
|
<span className="label-text">{t("delete-in-subsequent-months")}</span>
|
|
<input type="checkbox" name="deleteInSubsequentMonths" className="toggle toggle-error" />
|
|
</label>
|
|
</div>
|
|
<div className="pt-4 text-center">
|
|
<button className="btn btn-primary w-[5.5em]">{t("confirm-button")}</button>
|
|
<Link className="btn btn-neutral w-[5.5em] ml-3" href={`/location/${location._id}/edit/`}>{t("cancel-button")}</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
export const LocationDeleteFormSkeleton:FC = () =>
|
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<p className="py-6 px-6"></p>
|
|
<div className="pt-4 text-center">
|
|
<div className="btn skeleton w-[5.5em]"></div>
|
|
<div className="btn ml-3 skeleton w-[5.5em]"></div>
|
|
</div>
|
|
</div>
|
|
</div> |