32 lines
1.6 KiB
TypeScript
32 lines
1.6 KiB
TypeScript
import { Cog8ToothIcon, DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
|
|
import { Bill } from "../lib/db-types";
|
|
import { FC } from "react";
|
|
|
|
export interface BillPaymentFormProps {
|
|
bill: Bill
|
|
}
|
|
|
|
export const BillPaymentForm:FC<BillPaymentFormProps> = ({ bill: { name, description, paid } }) =>
|
|
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
|
|
<div className="card-body">
|
|
<form>
|
|
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-4 right-4 text-2xl" />
|
|
<TrashIcon className="h-[1em] w-[1em] absolute cursor-pointer text-error bottom-5 right-4 text-2xl" />
|
|
<h1 className="text-2xl">{name}</h1>
|
|
<p className="my-2">{description}</p>
|
|
<a href="#document.pdf" className='text-center block max-w-[24em] text-nowrap truncate inline-block'>
|
|
<DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
|
|
2023-22-12 document GSKG račun za 2023.pdf
|
|
</a>
|
|
<input type="file" className="file-input file-input-bordered w-full max-w-sm file-input-xs my-2" />
|
|
<div className="form-control w-32 p-1">
|
|
<label className="cursor-pointer label p-0">
|
|
<span className="label-text">Plaćeno</span>
|
|
<input type="checkbox" className="toggle toggle-success" checked={paid} />
|
|
</label>
|
|
</div>
|
|
<textarea className="textarea textarea-bordered my-2 w-full max-w-sm block" placeholder="Napomena"></textarea>
|
|
<button className="btn btn-primary">Spremi</button>
|
|
</form>
|
|
</div>
|
|
</div> |