nzambello/explit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: style expenses home with stats

Browse source
This commit is contained in:
Nicola Zambello 2022-02-14 20:02:47 +01:00
parent d87317d055
commit 0c354b069a
1 changed files with 19 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/routes/expenses/index.tsx
View file

@ -121,39 +121,32 @@ export default function JokesIndexRoute() {
<div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100"> <div className="col-span-2 md:col-span-1 card shadow-lg compact side bg-base-100">
<div className="flex-column items-center card-body !py-6"> <div className="flex-column items-center card-body !py-6">
<h2 className="card-title">Who needs to pay who</h2> <h2 className="card-title">Who needs to pay who</h2>
<ul className="flex flex-row flex-wrap items-center list-none shadow-inner w-full rounded-lg p-4 my-4 mx-0 max-h-48 overflow-x-scroll"> <div className="w-full shadow stats grid-cols-2 grid-flow-row-dense">
{data.teamCounts?.map((user) => ( {data.teamCounts?.map((user) => (
<li <div className="stat col-span-1">
className="flex flex-wrap flex-column w-1/2 justify-center items-center mb-4" <div className="stat-figure text-info">
key={user.id} <div className="rounded-full shrink-0 w-12 h-12 inline-flex justify-center items-center bg-white text-3xl">
>
<div className="flex">
<div className="rounded-full shrink-0 w-10 h-10 inline-flex justify-center items-center bg-white text-3xl">
{user.icon ?? user.username[0]} {user.icon ?? user.username[0]}
</div> </div>
<div className="ml-3 flex w-full flex-col justify-center items-start">
<span className="font-bold">{user.username}</span>
</div>
</div> </div>
<div className="grow font-bold w-full mt-3 text-center"> <div
<div className={`stat-value ${
data-tip={ user.dueAmount > 0 ? "text-error" : "text-success"
user.dueAmount > 0 ? `You owe others` : `Others owe you` }`}
} >
className="tooltip" {Math.abs(user.dueAmount)} €
> </div>
<span <div className="stat-title text-lg">{user.username}</div>
className={`text-xl ${ <div className="stat-desc text-info">
user.dueAmount > 0 ? "text-error" : "text-success" {user.dueAmount > 0
? `${user.id === data.user.id ? "You owe" : "Owes"} others`
: `Others owe ${
user.id === data.user.id ? "you" : "him/her"
}`} }`}
>
{user.dueAmount > 0 ? user.dueAmount : -user.dueAmount} €
</span>
</div>
</div> </div>
</li> </div>
))} ))}
</ul> </div>
</div> </div>
</div> </div>
<div className="card shadow-lg compact side md:bg-base-100 order-first md:order-none"> <div className="card shadow-lg compact side md:bg-base-100 order-first md:order-none">