47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { Todo, UserWithTodos } from '@homeman/models.ts'
|
|
import { Button } from '@homeman/components/Button.tsx'
|
|
|
|
export interface Props {
|
|
user: UserWithTodos
|
|
}
|
|
|
|
export function TodoList(
|
|
{ user: { avatarUrl, assignedTodos, name, color } }: Props,
|
|
) {
|
|
const todoItem = (
|
|
{ classList, description }: Pick<Todo, 'description'> & {
|
|
classList?: string
|
|
},
|
|
) => (
|
|
<li
|
|
style={`border-color: #${color}`}
|
|
class={`${
|
|
classList || ''
|
|
} border-l-4 p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
|
|
>
|
|
<span class='text-xl'>{description}</span>
|
|
<Button class='mt-2'>Done</Button>
|
|
</li>
|
|
)
|
|
return (
|
|
<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
|
|
<img
|
|
class='rounded-full w-[15rem] h-[15rem] mb-2 object-cover'
|
|
src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
|
|
title={`${name}'s avatar`}
|
|
/>
|
|
<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='flex flex-col gap-y-4'>
|
|
{assignedTodos.length < 1
|
|
? todoItem({ description: 'All clear! 🎉', classList: 'text-center' })
|
|
: assignedTodos.map(todoItem)}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|