UI Kit Activity - betoooo08/MyFinPlanner GitHub Wiki

UI Kit Activity

Objective: Using our Tailwind-based UI Kit and shared component styles, implement or verify the following interactive elements in your project. For each item, sketch or code a small example, then integrate it into the corresponding page.

  1. Sticky Header & Profile Menu

    • Classes: sticky top-0 z-30 flex h-16 items-center … bg-background px-4 md:px-6
    • Activity:
      • Build the header with logo, theme switch, settings icon and profile dropdown.
      • Ensure the <details> menu opens on click, shows avatar (40 × 40 px), username, and links (“Perfil”, “Cerrar sesión”).

  2. Primary & Outline Buttons

    • Variants:
      • Primary: btn btn-primary
      • Outline: btn btn-ghost btn-outline
    • Activity:
      • Place both variants on a dummy page.
      • Verify hover states: primary darkens, outline shows background.

  3. Card Component

    • Markup wrapper: <div class="card">…</div>
    • Headers (.card-header), content (.card-content), footer (.card-footer).
    • Activity:
      • Recreate a “Budget” card with title, spent/remaining, progress bar and a footer button.
      • Use .progress-bar widths and color classes (bg-secondary, bg-amber-500, bg-destructive) dynamically.

  4. Progress Bars

    • Container: .progress-container
    • Bar: <div class="progress-bar w-[X%]"></div>
    • Activity:
      • Display 3 progress bars at 30%, 75% and 100% using appropriate color classes.
      • Ensure CSS transition on width when changing percentage.

  5. Form Inputs & Validation States

    • Inputs: class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
    • Activity:
      • Build a mini “Add Transaction” form with text, date and number inputs.
      • Simulate an error state: add a red border and error message below (text-red-600).

  6. Modal Dialog

    • Example classes: 
      <div class="fixed inset-0 bg-black/50 flex items-center justify-center">
  <div class="bg-white p-6 rounded-lg shadow-lg w-96">…</div>
</div>
    • Activity:
      • Create a “Delete Budget?” confirmation modal.
      • Include “Cancel” and “Confirm” buttons.

  7. Toast Notifications

    • Container: #budget-alerts fixed top-4 right-4 space-y-2 z-50
    • Toast: px-4 py-2 rounded shadow bg-amber-100 text-amber-800 (or bg-red-100 text-red-800)
    • Activity:
      • Trigger a toast on button click (can use native alert() fallback).
      • Auto-dismiss toasts after 5 seconds via JavaScript.

  8. Avatar Component

    • Structure: 
      <div class="avatar-image w-8 h-8 rounded-full overflow-hidden">
  <img src="…" alt="…">
</div>
    • Activity:
      • Ensure avatar images always fit within 32 × 32 px or 40 × 40 px containers.
      • Test with both square and rectangular source images.

  9. Data Table / List Item

    • List rows: flex items-center justify-between border-t pt-2
    • Activity:
      • Render a table of recent transactions under each budget card.
      • Verify alternating row styles or hover highlight if desired.

  10. Icon Usage

    • Lucide icons: <i data-lucide="icon-name" class="h-4 w-4"></i>
    • Activity:
      • Replace one Font Awesome icon with its Lucide equivalent.
      • Run lucide.replace() (or your JS loader) to confirm SVG injection.
⚠️ **GitHub.com Fallback** ⚠️