Files
sweet/src/components/bujo/BujoIndex.astro

60 lines
3.4 KiB
Plaintext

---
const { months } = Astro.props;
---
<h1 class="text-3xl font-bold mb-6 border-b pb-4">Index du Journal</h1>
<section class="mb-8">
<h2 class="text-2xl font-semibold mb-4 text-slate-700">Fondations</h2>
<ul class="list-disc list-inside space-y-2">
<li><a href="/bujo/keys" class="text-blue-600 hover:underline">Clés (Keys) - Notre langage de symboles</a></li>
<li><a href="/bujo/future-log" class="text-blue-600 hover:underline">Future Log - Le planning annuel</a></li>
</ul>
</section>
<section class="mb-8">
<h2 class="text-2xl font-semibold mb-4 text-slate-700">Logs Temporels</h2>
<p class="text-slate-600 mb-4">Le cœur du journal, où le temps est cartographié mois par mois.</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
{months.map(monthPath => {
const [year, month] = monthPath.split('/');
const monthName = new Date(parseInt(year), parseInt(month) - 1).toLocaleString('fr-FR', { month: 'long' });
return (
<a href={`/bujo/${monthPath}`} class="bg-slate-100 p-4 rounded-lg text-center font-semibold hover:bg-blue-100 transition-colors">
{monthName.charAt(0).toUpperCase() + monthName.slice(1)} {year}
</a>
)
})}
</div>
</section>
<section>
<h2 class="text-2xl font-semibold mb-4 text-slate-700">Collections</h2>
<p class="text-slate-600 mb-4">Les pages thématiques qui rassemblent idées, suivis et inspirations.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-slate-50 p-4 rounded-lg">
<h3 class="font-semibold text-slate-800 mb-2">Organisation & Suivi</h3>
<ul class="list-disc list-inside space-y-2 text-sm">
<li><a href="/bujo/collections/trackers-mensuels" class="text-blue-600 hover:underline">Trackers d'Habitudes</a></li>
<li><a href="/bujo/collections/objectifs-du-mois" class="text-blue-600 hover:underline">Objectifs du Mois</a></li>
<li><a href="/bujo/collections/suivi-depenses" class="text-blue-600 hover:underline">Suivi des Dépenses</a></li>
</ul>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<h3 class="font-semibold text-slate-800 mb-2">Inspiration & Bien-être</h3>
<ul class="list-disc list-inside space-y-2 text-sm">
<li><a href="/bujo/collections/gratitude" class="text-blue-600 hover:underline">Journal de Gratitude</a></li>
<li><a href="/bujo/collections/brain-dump" class="text-blue-600 hover:underline">Brain Dump (Vide-esprit)</a></li>
<li><a href="/bujo/collections/bucket-list" class="text-blue-600 hover:underline">Bucket List</a></li>
</ul>
</div>
<div class="bg-slate-50 p-4 rounded-lg">
<h3 class="font-semibold text-slate-800 mb-2">Créativité & Culture</h3>
<ul class="list-disc list-inside space-y-2 text-sm">
<li><a href="/bujo/collections/livres-a-lire" class="text-blue-600 hover:underline">Livres à lire</a></li>
<li><a href="/bujo/collections/films-a-voir" class="text-blue-600 hover:underline">Films & Séries à voir</a></li>
<li><a href="/bujo/collections/idees-projets" class="text-blue-600 hover:underline">Idées de Projets Créatifs</a></li>
</ul>
</div>
</div>
</section>