homeman-deno/components/TodoList.tsx

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-full mb-2'
				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>
	)
}