Refactore headers as components

app/components/headers/h1.hbs

@@ -1,4 +1,4 @@
-<h1 class='text-3xl mb-4'>
+<h1 class='text-3xl mb-4' ...attributes>
   {{#if (has-block)}}
     {{yield}}
   {{else}}

app/components/headers/h2.hbs

@@ -0,0 +1,7 @@
+<h2 class='text-2xl mb-4' ...attributes>
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    {{@title}}
+  {{/if}}
+</h2>

app/templates/admin.hbs

@@ -1,10 +1,10 @@
 <div class='relative min-h-screen flex'>
   <div class='flex flex-col w-64 min-h-screen px-4 py-8 border-r'>
-    <h2 class='mb-8'>
+    <Headers::H2 class='mb-8'>
       <LinkTo @route='admin' class='flex items-center justify-center text-xl'>
         MeiliAdmin
       </LinkTo>
-    </h2>
+    </Headers::H2>
 
     <div class='flex flex-col flex-1'>
       {{#let

app/templates/admin/index.hbs

@@ -1,4 +1,5 @@
-<h2 class='text-2xl mb-4'>Stats</h2>
+<Headers::H2 @title='Stats' />
+
 <dl class='grid grid-cols-1 md:grid-cols-2 gap-5 mb-8'>
   <Stat @title='Status' @value={{capitalize @model.health.status}}>
     <:icon>
@@ -35,7 +36,8 @@
   </Stat>
 </dl>
 
-<h2 class='text-2xl mb-4'>Indexes</h2>
+<Headers::H2 @title='Indexes' />
+
 <RoyalTable @data={{@model.indexes.results}} class='w-full' as |Row data|>
   <Row as |Column|>
     <Column @name='UID' @prop='uid'>

app/templates/admin/indexes/index.hbs

@@ -1,4 +1,4 @@
-<h1 class='text-3xl mb-4'>Indexes</h1>
+<Headers::H1 @title="Indexes"/>
 
 <LinkTo @route='admin.indexes.new' class='block mb-4'>
   Create new index

app/templates/admin/indexes/item.hbs

@@ -1,4 +1,4 @@
-<h1 class="text-2xl mb-4">{{capitalize @model.uid}}</h1>
+<Headers::H1 @title={{capitalize @model.uid}}/>
 
 <div class="flex mb-4">
   <Tab @route="admin.indexes.item.documents" @text="Documents" @model={{@model}} />

app/templates/admin/indexes/item/edit.hbs

@@ -1,11 +1,4 @@
-<Headers::H1>
-  {{#if @model.isNew}}
-    Create new index
-  {{else}}
-    Edit
-    {{@model.uid}}
-  {{/if}}
-</Headers::H1>
+<Headers::H1 @title={{if @model.isNew "Create new index" "Edit"}} />
 
 <form {{on 'submit' this.save}}>
   {{#if @model.isNew}}

app/templates/admin/indexes/item/info.hbs

@@ -1,4 +1,4 @@
-<h2 class='text-2xl mb-4'>Info</h2>
+<Headers::H2 @title='Info' />
 
 <dl>
   <DescriptionItem

app/templates/admin/keys/index.hbs

@@ -1,4 +1,4 @@
-<h1 class='text-3xl mb-4'>Keys</h1>
+<Headers::H1 @title="Keys"/>
 
 <RoyalTable @data={{@model.results}} class='w-full' as |Row data|>
   <Row as |Column|>

app/templates/admin/keys/key.hbs

@@ -1,4 +1,4 @@
-<h1 class='text-3xl mb-4'>{{@model.name}}</h1>
+<Headers::H1 @title={{@model.name}} />
 
 <FormElement @label='description' @value={{@model.description}} />
 <FormElement @label='key' @value={{@model.key}} />

app/templates/admin/tasks/index.hbs

@@ -1,4 +1,4 @@
-<h1 class='text-3xl mb-4'>Tasks</h1>
+<Headers::H1 @title="Tasks" />
 
 <RoyalTable @data={{@model.results}} class='w-full' as |Row data|>
   <Row as |Column|>

app/templates/login.hbs

@@ -2,7 +2,7 @@
   <div class='sm:mx-auto sm:w-full sm:max-w-md'>
     <div class='bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
       <form class='space-y-6' {{on 'submit' this.authenticate}}>
-        <h1 class='text-2xl text-center'>MeiliAdmin</h1>
+        <Headers::H1 class='text-center' @title="MeiliAdmin"/>
 
         <InputText
           @label='URL'