62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Todo, UserWithTodos } from '@homeman/models.ts'
|
|
import { Button } from '@homeman/components/Button.tsx'
|
|
import { Dialog } from '@homeman/components/Dialog.tsx'
|
|
import { createRef } from 'preact'
|
|
|
|
export interface Props {
|
|
user: UserWithTodos
|
|
}
|
|
|
|
export function TodoList(
|
|
{ user: { avatarUrl, assignedTodos, name, color } }: Props,
|
|
) {
|
|
const addTodoDialog = createRef<HTMLDialogElement>()
|
|
const todoItem = (
|
|
{ className, description, hideDone }: Pick<Todo, 'description'> & {
|
|
className?: string
|
|
hideDone?: boolean
|
|
},
|
|
) => (
|
|
<li
|
|
style={`border-color: #${color}`}
|
|
class={`${className || ''} ${
|
|
hideDone ? '' : 'border-l-4'
|
|
} p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
|
|
>
|
|
<span class='text-xl'>{description}</span>
|
|
{hideDone ? '' : <Button class='mt-2'>Done</Button>}
|
|
</li>
|
|
)
|
|
return (
|
|
<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
|
|
<Dialog
|
|
headerTitle='Add todo'
|
|
class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
|
|
ref={addTodoDialog}
|
|
>
|
|
sup
|
|
</Dialog>
|
|
<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 style={`color: #${color};`} class='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! 🎉',
|
|
className: 'text-center',
|
|
hideDone: true,
|
|
})
|
|
: assignedTodos.map(todoItem)}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|