Expand better

This commit is contained in:
Daniel Flanagan 2024-01-17 11:52:37 -06:00
parent d2341cdc52
commit 9938f47976
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4

View file

@ -2,6 +2,8 @@ import { Todo, UserWithTodos } from '@homeman/models.ts'
import { JSX } from 'preact'
import { Button } from '@homeman/components/Button.tsx'
import { Avatar } from '@homeman/components/Avatar.tsx'
import { ChevronDoubleDownOutline, ChevronDownOutline } from 'preact-heroicons'
import { ChevronDownMiniSolid } from 'preact-heroicons'
export interface Props {
user: UserWithTodos
@ -90,14 +92,15 @@ export function TodoList(
</ul>
{doneTodos.length > 0
? (
<summary class='text-gray-500 mt-4'>
+{doneTodos.length} completed todos
<details class='cursor-pointer'>
<ul class='flex flex-col gap-y-4 mt-4'>
<details class='text-gray-500 [&_svg]:open:-rotate-180'>
<summary class='cursor-pointer marker:content-[""] flex justify-between hover:bg-gray-500/20 p-4 rounded mt-4'>
<span>+{doneTodos.length} completed todos</span>
<ChevronDownMiniSolid className='w-6 h-6' />
</summary>
<ul class='flex flex-col gap-y-4 mt-2'>
{doneTodos.map(todoItem)}
</ul>
</details>
</summary>
)
: ''}
</div>