tabler/shared/components/parts/Tasks.astro

---
import Icon from '@ui/Icon.astro'
import PeopleAvatarList from '@shared/components/demo/PeopleAvatarList.astro'
import CardTitle from '@ui/CardTitle.astro'
import tasksData from '@data/tasks.json'

interface Column {
  name: string
  tasks: Record<string, any>[]
}

interface Props {
  class?: string
}

const { class: className } = Astro.props
const data = tasksData as unknown as { columns: Column[] }
---

<div class={`row${className ? ` ${className}` : ''}`}>
  {
    data.columns.map((column) => (
      <div class="col-12 col-md-6 col-lg">
        <h2 class="mb-3">{column.name}</h2>

        <div class="mb-4">
          <div class="row row-cards">
            {column.tasks.map((task) => (
              <div class="col-12">
                <div class="card card-sm">
                  {task.color && <div class={`card-status-top bg-${task.color}`} />}

                  {task.starred && (
                    <div class="ribbon ribbon-top ribbon-bookmark bg-yellow">
                      <Icon name="star" />
                    </div>
                  )}

                  <div class="card-body">
                    <CardTitle>{task.name}</CardTitle>

                    {/* Description may contain markup (e.g. <a>#tag</a>) — rendered with set:html */}
                    {task.description && <div class="text-secondary" set:html={task.description} />}

                    {task.image && (
                      <div class="ratio ratio-16x9">
                        <img src={`./${task.image}`} class="rounded object-cover" alt={task.name} />
                      </div>
                    )}

                    <div class="mt-4">
                      <div class="row">
                        <div class="col">{task.users && <PeopleAvatarList stacked={true} size="xs" offset={task['users-offset'] ?? 0} limit={task.users} />}</div>

                        {task.due_date && (
                          <div class="col-auto">
                            <a href="#" class="link-warning">
                              <Icon name="calendar" inline />
                              {task.due_date}
                            </a>
                          </div>
                        )}

                        <div class="col-auto text-secondary">
                          <button class={`switch-icon switch-icon-scale${task.favorite ? ' active' : ''}`} aria-label="Mark as favorite" data-bs-toggle="switch-icon">
                            <span class="switch-icon-a text-secondary">
                              <Icon name="heart" />
                            </span>
                            <span class="switch-icon-b text-red">
                              <Icon name="heart" class="icon-filled" />
                            </span>
                          </button>
                          {task.likes ? task.likes : ''}
                        </div>

                        {task.subtasks && (
                          <div class="col-auto">
                            <a href="#" class="link-secondary">
                              <Icon name="activity" inline />
                              1/{task.subtasks.length}
                            </a>
                          </div>
                        )}
                        {task.comments && (
                          <div class="col-auto">
                            <a href="#" class="link-secondary">
                              <Icon name="message" inline /> {task.comments}
                            </a>
                          </div>
                        )}
                        <div class="col-auto">
                          <a href="#" class="link-secondary" aria-label="Share">
                            <Icon name="share" inline />
                          </a>
                        </div>
                      </div>
                    </div>

                    {task.subtasks && (
                      <div class="divide-y-2 mt-4">
                        {task.subtasks.map((subtask: { name: string; done?: boolean }) => (
                          <div>
                            {subtask.done ? (
                              <Fragment>
                                <Icon name="check" inline color="secondary" />
                                <span class="text-secondary text-decoration-line-through">{subtask.name}</span>
                              </Fragment>
                            ) : (
                              <Fragment>
                                <Icon name="check" inline color="green" />
                                {subtask.name}
                              </Fragment>
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    ))
  }
</div>