Apply header component to all pages

templates/contacts/list.html

@@ -1,4 +1,5 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block head %}
     {{ super() }}
@@ -10,19 +11,16 @@
 {% endblock %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold text-gray-800">Contacts</h1>
-        <a href="{{ url_for('contacts.new_contact') }}" 
-           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white text-sm font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg no-underline"
-           style="background-color: #16767b; border: 1px solid #16767b;"
-           onmouseover="this.style.backgroundColor='#1a8a90'"
-           onmouseout="this.style.backgroundColor='#16767b'">
-            <i class="fas fa-plus"></i>
-            Add New Contact
-        </a>
-    </div>
+{{ header(
+    title="Contacts",
+    description="Manage your contacts and their information",
+    button_text="Add New Contact",
+    button_url=url_for('contacts.new_contact'),
+    icon="fa-address-book",
+    button_icon="fa-plus"
+) }}
 
+<div class="container mx-auto px-4 py-8">
     <!-- Search and Filter Section -->
     <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
         <form method="GET" class="flex flex-col md:flex-row gap-4" id="filterForm">