n3wt-school/Front-End/src/components/Structure/Configuration/TabsStructure.js

import React from 'react';

const TabsStructure = ({ activeTab, setActiveTab, tabs }) => {
  return (
    <div className="flex justify-center items-center w-full">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          className={`tab px-4 py-2 mx-2 flex items-center justify-center space-x-2 ${activeTab === tab.id ? 'bg-emerald-600 text-white shadow-lg' : 'bg-emerald-200 text-emerald-600'} rounded-full`}
          onClick={() => setActiveTab(tab.id)}
        >
          <tab.icon className="w-5 h-5" />
          <span>{tab.title}</span>
        </button>
      ))}
    </div>
  );
};

export default TabsStructure;