acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 16:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Création nouveau style / pagination profils annuaires

Browse Source
This commit is contained in:
N3WT DE COMPET
2025-05-06 19:54:46 +02:00
parent 4fd40ac5fc
commit 760ee0009e
25 changed files with 430 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Front-End/src/components/SidebarTabs.js
View File

@ -1,34 +1,46 @@
import React, { useState } from 'react';
const SidebarTabs = ({ tabs }) => {
const SidebarTabs = ({ tabs, onTabChange }) => {
const [activeTab, setActiveTab] = useState(tabs[0].id);
const handleTabChange = (tabId) => {
setActiveTab(tabId);
if (onTabChange) {
onTabChange(tabId);
}
};
return (
<>
<div className="flex h-14 border-b-2 border-gray-200">
<div className="flex flex-col h-full">
{/* Tabs Header */}
<div className="flex h-14 bg-gray-50 border-b border-gray-200 shadow-sm">
{tabs.map((tab) => (
<button
key={tab.id}
className={`flex-1 p-4 ${
className={`flex-1 text-center p-4 font-medium transition-colors duration-200 ${
activeTab === tab.id
? 'border-b-2 border-emerald-500 text-emerald-500'
? 'border-b-4 border-emerald-500 text-emerald-600 bg-emerald-50 font-semibold'
: 'text-gray-500 hover:text-emerald-500'
}`}
onClick={() => setActiveTab(tab.id)}
onClick={() => handleTabChange(tab.id)}
>
{tab.label}
</button>
))}
</div>
{tabs.map((tab) => (
<div
key={tab.id}
className={`${activeTab === tab.id ? 'block h-[calc(100%-3.5rem)]' : 'hidden'}`}
>
{tab.content}
</div>
))}
</>
{/* Tabs Content */}
<div className="flex-1 overflow-y-auto p-4 rounded-b-lg shadow-inner">
{tabs.map((tab) => (
<div
key={tab.id}
className={`${activeTab === tab.id ? 'block' : 'hidden'}`}
>
{tab.content}
</div>
))}
</div>
</div>
);
};