✨ feat : Create a Dashboard component

- Selecting a tab on the dashboard allows you to load the components you've linked
- The tabsMapping is responsible for rendering the components to be linked

Related issue: #49

Author: Lainari

src/components/dashboard/Dashboard.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import {DashboardProps} from '@/src/interfaces/group';
+
+const Dashboard = ({tabs, activeTab, setActiveTab}: DashboardProps) => {
+  const handleClick = (tab: React.SetStateAction<string>) => {
+    setActiveTab(tab);
+  };
+  return (
+    <nav className="mt-4 flex">
+      {tabs.map(tab => (
+        <div
+          key={tab}
+          className={`grid place-items-center w-24 h-10 border-r border-gray-400 px-4 hover:cursor-pointer ${
+            activeTab === tab
+              ? 'text-black bg-sky-50'
+              : 'text-gray-400 hover:bg-slate-100 '
+          }`}
+          onClick={() => handleClick(tab)}
+        >
+          {tab}
+        </div>
+      ))}
+    </nav>
+  );
+};
+
+export default Dashboard;

src/components/dashboard/TabsMapping.tsx

@@ -0,0 +1,8 @@
+import {TabsMappingProps} from '@/src/interfaces/group';
+import React from 'react';
+
+const TabsMapping = ({activeTab, tabMapping}: TabsMappingProps) => {
+  return <>{tabMapping[activeTab]}</>;
+};
+
+export default TabsMapping;

src/components/dashboard/index.ts

@@ -0,0 +1,4 @@
+import Dashboard from './Dashboard';
+import TabsMapping from './TabsMapping';
+
+export {Dashboard, TabsMapping};

src/interfaces/group/dashboardProps.ts

@@ -0,0 +1,7 @@
+interface DashboardProps {
+  activeTab: string;
+  setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+  tabs: string[];
+}
+
+export type {DashboardProps};

src/interfaces/group/index.ts

@@ -0,0 +1,2 @@
+export type {DashboardProps} from './dashboardProps';
+export type {TabsMappingProps} from './tabsMappingProps';

src/interfaces/group/tabsMappingProps.ts

@@ -0,0 +1,8 @@
+interface TabsMappingProps {
+  activeTab: string;
+  tabMapping: {
+    [key: string]: JSX.Element;
+  };
+}
+
+export type {TabsMappingProps};