40 lines
1 KiB
TypeScript
40 lines
1 KiB
TypeScript
import { Todo, UserWithTodos } from '@homeman/models.ts'
|
|
|
|
export interface Props {
|
|
user: UserWithTodos
|
|
}
|
|
|
|
export function TodoList({ user: { avatarUrl, assignedTodos, name } }: Props) {
|
|
const todoItem = ({ description }: Todo) => (
|
|
<li class='bg-white dark:bg-black drop-shadow-xl'>{description}</li>
|
|
)
|
|
return (
|
|
<div class='p-2 w-1/4 min-w-[10rem] relative flex flex-col grow-0'>
|
|
{avatarUrl != null
|
|
? (
|
|
<img
|
|
class='rounded-full w-full mb-2'
|
|
src={avatarUrl}
|
|
title={`${name}'s avatar`}
|
|
/>
|
|
)
|
|
: null}
|
|
<span class='text-sky-800 dark:text-sky-200 font-semibold text-center'>
|
|
{name}
|
|
</span>
|
|
<button class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'>
|
|
+ New
|
|
</button>
|
|
<ul class=''>
|
|
{assignedTodos.length < 1
|
|
? (
|
|
<li class='p-4 rounded-lg text-center drop-shadow-xl bg-white dark:bg-stone-900'>
|
|
All clear! 🎉
|
|
</li>
|
|
)
|
|
: assignedTodos.map(todoItem)}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|