HoursCard

The HoursCard component is a dynamic Angular component that visually represents task hours and cumulative effort with a humorous touch.

Features

Task Representation: Displays a list of tasks with their respective hours.
Dynamic Calculations: Automatically computes the total hours from the tasks array.
Iconography: Uses Lucide icons for visual appeal and interactive design.
Responsive Design: Adjusts layout and font sizes for different screen sizes.
Humorous Context: Adds a touch of humor with overthinking and headaches as part of the representation.

Usage

Step 1: Import the Component

Add the HoursCardComponent to your Angular project by including it in your module or component imports array.

import { HoursCardComponent } from "src/app/components/hours-card/hours-card.component";
 
@Component({
  ...
  imports: [..., HoursCardComponent],
  ...
})

Step 2: Add the Template

Include the component in your template:

<hours-card></hours-card>

Configuration

Tasks Array

The tasks array is pre-configured with default tasks and hours. You can customize it to represent your own workflow.

Example

tasks = [
  { hours: 4, description: "writing documentation" },
  { hours: 8, description: "debugging production issues" },
  { hours: 6, description: "team meetings and sync-ups" },
];

Component Structure

HTML Template

The HoursCardComponent is structured with:

List Items: Represents individual tasks.
Summary: Displays total hours of effort with a humorous twist.

Example

<div
  class="m-auto p-4 w-22rem md:w-30rem py-6 mt-6 bg-red-900"
  style="border-radius: 8px"
>
  <ul
    class="flex flex-column justify-content-center align-items-center text-400 text-sm md:text-base"
  >
    <li *ngIf="tasks.length > 0" class="m-0">
      <span class="highlight">{{ tasks[0].hours }} hrs</span>
      {{ tasks[0].description }}
    </li>
    <li *ngFor="let task of tasks.slice(1)" class="m-0 mt-3">
      + <span class="highlight">{{ task.hours }} hrs</span>
      {{ task.description }}
    </li>
    <li class="m-0 mt-3">
      +<span class="highlight inline-flex align-items-center">
        <lucide-icon
          [img]="infinity"
          size="16"
          class="icon infinity-icon"
          style="margin: 0 2px"
        ></lucide-icon>
        hrs</span
      >
      overthinking...
    </li>
    <li class="m-0 mt-3 flex justify-content-center align-items-center">
      = {{ getTotalHours() }}+ hours of
      <span class="highlight ml-1">headaches</span>
      <lucide-icon [img]="heartCrack" size="24" class="icon ml-1"></lucide-icon>
    </li>
  </ul>
</div>
 
<p class="mt-5 mb-0 text-400 w-full text-center">
  <lucide-icon [img]="arrow" size="14"></lucide-icon>
  Let's make things easier
</p>

HoursCard

On this page