lytedev/homeman-deno
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Expand better

Browse source
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
1 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
islands/TodoList.tsx
View file

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