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

kreirane komponente

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-04 10:30:43 +01:00
parent e1a225b91b
commit b653ce40bc
11 changed files with 191 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app/page.tsx
View File

@@ -11,6 +11,13 @@ import {
MapIcon,
MapPinIcon
} from '@heroicons/react/24/outline';
import { LocationCard } from './ui/LocationCard';
import { BillPaymentForm } from './ui/BillPaymentForm';
import { LocationEditForm } from './ui/LocationEditForm';
import { BillTemplateForm } from './ui/BillTemplateForm';
import { MonthTitle } from './ui/MonthTitle';
import { AddMonthButton } from './ui/AddMonthButton';
import { AddLocationButton } from './ui/AddLocationButton';
export default function Page() {
return (
@@ -18,108 +25,45 @@ export default function Page() {
<p>https://tailwindcss.com/docs/font-weight</p>
<p>https://heroicons.com/</p>
<span className='grid self-center' data-tip="Dodaj novi mjesec">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</span>
<AddMonthButton />
<div className="divider text-2xl">2023-05</div>
<MonthTitle month={new Date(2023, 4)} />
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
<h2 className="card-title">2023-05 Budakova</h2>
<div className="card-actions">
<div className="badge badge-lg badge-success cursor-pointer">GSKG</div>
<div className="badge badge-lg badge-neutral cursor-pointer">HEP Elektra</div>
<div className="badge badge-lg badge-neutral cursor-pointer">Iskon</div>
<div className="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
<div className="tooltip" data-tip="Dodaj novi tip računa">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</div>
</div>
</div>
</div>
<LocationCard
month={new Date(2023, 4)}
location={{id: 1, name: 'Budakova'}}
bills={[
{id: 1, name: 'GSKG', paid: true},
{id: 2, name: 'HEP Elektra', paid: false},
{id: 3, name: 'Iskon', paid: false},
{id: 4, name: 'Plinara', paid: false},
]} />
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
<h2 className="card-title">2023-05 Kopernikova</h2>
<div className="card-actions">
<div className="badge badge-lg badge-success cursor-pointer">GSKG</div>
<div className="badge badge-lg badge-neutral cursor-pointer">HEP Elektra</div>
<div className="badge badge-lg badge-neutral cursor-pointer">Iskon</div>
<div className="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
<div className="tooltip" data-tip="Dodaj novi tip računa">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</div>
</div>
</div>
</div>
<LocationCard
month={new Date(2023, 4)}
location={{id: 1, name: 'Kopernikova'}}
bills={[
{id: 1, name: 'Toplana', paid: true},
{id: 2, name: 'HEP Elektra', paid: true},
{id: 3, name: 'GSKG', paid: true},
]} />
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<span className='grid self-center' data-tip="Dodaj novu lokaciju">
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl" />
</span>
</div>
</div>
<AddLocationButton />
<div className="divider text-2xl">2023-06</div>
<MonthTitle month={new Date(2023, 5)} />
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
<div className="card-body">
<Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
<h2 className="card-title">2023-05 Šišićeva</h2>
<div className="card-actions">
<div className="badge badge-lg badge-success cursor-pointer">GSKG</div>
<div className="badge badge-lg badge-neutral cursor-pointer">HEP Elektra</div>
<div className="badge badge-lg badge-neutral cursor-pointer">Iskon</div>
<div className="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
</div>
</div>
</div>
<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">GSKG</h1>
<p className="my-2">Pričuva, Voda, Smeće</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={false} />
</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>
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card-body">
<form>
<input type="text" placeholder="Naziv računa" className="input input-bordered w-full" value="GSKG" />
<textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Pričuva, Voda, Smeće"></textarea>
<button className="btn btn-primary">Spremi</button>
</form>
</div>
</div>
<div className="card card-compact card-bordered max-w-sm bg-base-100 shadow-s my-1">
<div className="card-body">
<form>
<input type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue="Budakova" />
<textarea className="textarea textarea-bordered my-1 w-full max-w-sm block" placeholder="Opis" value="Stan u Budakovoj"></textarea>
<button className="btn btn-primary">Spremi</button>
</form>
</div>
</div>
<LocationCard
month={new Date(2023, 5)}
location={{id: 1, name: 'Šišićeva'}}
bills={[
{id: 1, name: 'Toplana', paid: true},
{id: 2, name: 'HEP Elektra', paid: true},
{id: 3, name: 'GSKG', paid: true},
]} />
<BillPaymentForm bill={{id: 1, name: 'GSKG', description: 'Pričuva, Voda, Smeće', paid: true}} />
<LocationEditForm />
<BillTemplateForm />
</main>
);
}