mantis-app
Version:
M.A.N.T.I.S (MongoDB, Analog, Nx, Tailwind CSS, Ionic, Storybook) is not just a CLI tool; it's your passport to a seamless full-stack project launch.
38 lines (37 loc) • 1.28 kB
HTML
<section
class="mx-auto mt-20 flex max-w-96 flex-col rounded-lg bg-white p-8 shadow-lg"
>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-8 w-8 text-indigo-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"
/>
</svg>
<h1 class="ml-3 text-lg font-semibold text-gray-600">Todos</h1>
</div>
@if ((todos$ | async)?.length) {
<ul class="mt-5 flex flex-col gap-2">
@for (todo of todos$ | async; track todo._id) {
<li>
<app-todo-item
[todo]="todo"
(remove)="removeTodo($event)"
(update)="updateTodo($event)"
/>
</li>
}
</ul>
}
<div class="mt-4">
<app-add-todo (add)="addTodo($event)" />
</div>
</section>