Scribd
Upload
2 views

code plat

The document outlines a calendar component with navigation buttons for selecting previous and next months, displaying the selected month and year. It includes a header with a link to statistics and a grid layout for the days of the week and calendar days. The calendar days are dynamically generated, with placeholders for empty days.

Uploaded by

Pelza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

code plat

The document outlines a calendar component with navigation buttons for selecting previous and next months, displaying the selected month and year. It includes a header with a link to statistics and a grid layout for the days of the week and calendar days. The calendar days are dynamically generated, with placeholders for empty days.

Uploaded by

Pelza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

{/* Main content with calendar */}

<div className="flex-1 p-6">

<div className="mb-6 flex items-center justify-between">

<div className="flex items-center">

<button

onClick={goToPreviousMonth}

className="rounded-full bg-blue-100 p-2 text-blue-600 hover:bg-blue-200"

>

<ChevronLeft className="h-5 w-5" />

</button>

<h1 className="mx-4 text-2xl font-bold text-blue-800">

{selectedMonth} {currentYear}

</h1>

<button onClick={goToNextMonth} className="rounded-full bg-blue-100 p-2 text-blue-600


hover:bg-blue-200">

<ChevronRight className="h-5 w-5" />

</button>

</div>

<Link

href="/statistics"

className="flex items-center rounded-lg bg-blue-600 px-3 py-2 text-white hover:bg-blue-


700"

>

<BarChart2 className="mr-1 h-4 w-4" />

<span>Statistiques</span>

</Link>

</div>

<div className="mb-4 grid grid-cols-7 gap-1 text-center">

{["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"].map((day) => (

<div key={day} className="py-2 font-medium text-blue-800">


{day}

</div>

))}

</div>

<div className="grid grid-cols-7 gap-2">

{calendarDays.map((day, index) => {

if (day === null) {

return <div key={`empty-${index}`} className="h-12"></div>

let className = "flex h-12 items-center justify-center rounded-lg border border-blue-100


hover:bg-blue-50"

let isClickable = false

You might also like