definiran izgleda UI-a
This commit is contained in:
65
app/page.tsx
65
app/page.tsx
@@ -4,54 +4,97 @@ import { lusitana } from './ui/fonts';
|
|||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Cog8ToothIcon
|
Cog8ToothIcon,
|
||||||
|
TrashIcon,
|
||||||
|
PlusCircleIcon
|
||||||
} from '@heroicons/react/24/outline';
|
} from '@heroicons/react/24/outline';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
||||||
<div className="divider text-2xl">2023-05</div>
|
<p>https://tailwindcss.com/docs/font-weight</p>
|
||||||
|
<p>https://heroicons.com/</p>
|
||||||
|
|
||||||
|
<div className="divider text-2xl">2023-05</div>PlusCircleIcon
|
||||||
|
|
||||||
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h2 className="card-title">2023-05 Budakova <Cog8ToothIcon className="h-[1em] w-[1em] absolute right-4 cursor-pointer" /></h2>
|
<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="card-actions">
|
||||||
<div className="badge badge-lg badge-success cursor-pointer">GDKG</div>
|
<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">HEP Elektra</div>
|
||||||
<div className="badge badge-lg badge-neutral cursor-pointer">Iskon</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="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
|
||||||
<div className="badge badge-lg badge-neutral cursor-pointer font-bold">+</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h2 className="card-title">2023-05 Kopernikova <Cog8ToothIcon className="h-[1em] w-[1em] absolute right-4 cursor-pointer" /></h2>
|
<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="card-actions">
|
||||||
<div className="badge badge-lg badge-success cursor-pointer">GDKG</div>
|
<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">HEP Elektra</div>
|
||||||
<div className="badge badge-lg badge-neutral cursor-pointer">Iskon</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="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
|
||||||
<div className="badge badge-lg badge-neutral cursor-pointer font-bold">+</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="tooltip self-center" data-tip="Dodaj novu lokaciju">
|
||||||
|
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-4xl mt-4 self-center" />
|
||||||
|
</div>
|
||||||
<div className="divider text-2xl">2023-06</div>
|
<div className="divider text-2xl">2023-06</div>
|
||||||
|
|
||||||
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h2 className="card-title">2023-05 Šišićeva <Cog8ToothIcon className="h-[1em] w-[1em] absolute right-4 cursor-pointer" /></h2>
|
<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="card-actions">
|
||||||
<div className="badge badge-lg badge-success cursor-pointer">GDKG</div>
|
<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">HEP Elektra</div>
|
||||||
<div className="badge badge-lg badge-neutral cursor-pointer">Iskon</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="badge badge-lg badge-neutral cursor-pointer">Plinara</div>
|
||||||
<div className="badge badge-lg badge-neutral cursor-pointer font-bold">+</div>
|
<PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
<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 />
|
||||||
|
</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>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user