Tabs pod and component refactor

src/common/components/index.ts

@@ -4,4 +4,3 @@ export * from './sidebar-menu';
 export * from './navigation-button';
 export * from './spinner';
 export * from './form';
-export * from './tabs';

src/common/models/index.ts

@@ -1,4 +1,3 @@
 export * from './pagination.model';
 export * from './lookup.model';
 export * from './collection.model';
-export * from './tabs.model';

src/modules/users/edit/components/tab-panel.component.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
+import * as innerClasses from './tabs.styles';
+
+interface TabPanelProps {
+  index: number;
+  value: number;
+  children: React.ReactNode;
+}
+
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index } = props;
+  const classes = useWithTheme(innerClasses);
+
+  return value === index && <div className={classes.tabPanel}>{children}</div>;
+};

src/modules/users/edit/components/tabs.component.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TabPanel } from './tab-panel.component';
+import { Tabs as MUITabs, Tab, Paper } from '@mui/material/';
+
+import * as innerClasses from './tabs.styles';
+
+enum TabIndex {
+  USER_SHEET,
+  RESET_PASSWORD,
+}
+
+interface Props {
+  id: string;
+}
+
+export const Tabs: React.FC<Props> = ({ id }) => {
+  const [activeTab, setActiveTab] = React.useState<number>(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => setActiveTab(newValue);
+
+  return (
+    <div className={innerClasses.tabsComponent}>
+      <Paper elevation={0}>
+        <div className={innerClasses.tabsContainer}>
+          <MUITabs value={activeTab} onChange={handleChange}>
+            <Tab label="Ficha de usuario" />
+            <Tab label="Resetear Password" />
+          </MUITabs>
+        </div>
+        <TabPanel value={activeTab} index={TabIndex.USER_SHEET}>
+          <h3>User id: {id}</h3>
+        </TabPanel>
+        <TabPanel value={activeTab} index={TabIndex.RESET_PASSWORD}>
+          <h3>Reset Password</h3>
+        </TabPanel>
+      </Paper>
+    </div>
+  );
+};

src/modules/users/edit/components/tabs.styles.ts

@@ -0,0 +1,18 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const tabsComponent = css`
+  display: 'flex';
+  flexdirection: 'column';
+  alignitems: 'center';
+  width: 100%;
+`;
+
+export const tabsContainer = css`
+  border-bottom: 1;
+  border-color: 'divider';
+`;
+
+export const tabPanel = (theme: Theme) => css`
+  padding-block: ${theme.spacing(2)};
+`;

src/modules/users/edit/user-edit.pod.tsx

@@ -1,28 +1,16 @@
 import React from 'react';
-import { TabsObjectProps } from '#common/models';
 import { Link } from '@tanstack/react-router';
 import { useParams } from '@tanstack/react-router';
+import { Tabs } from './components/tabs.component';
 import * as classes from './user-edit.styles';
-import { Tabs } from '#common/components/';
 
 export const UserEditPod: React.FC = () => {
-  const { id } = useParams({ strict: false });
-
-  const tabsContents: TabsObjectProps[] = [
-    {
-      label: 'Ficha usuario',
-      panel: `User ID: ${id}`,
-    },
-    {
-      label: 'Resetear clave',
-      panel: 'Resetear clave',
-    },
-  ];
+  const { id } = useParams({ from: '/_auth/edit-user/$id' });
 
   return (
     <div className={classes.root}>
       <h1>Soy la página de Edición de usuario</h1>
-      <Tabs contents={tabsContents} />
+      <Tabs id={id} />
       <Link to="/users">Navegar a listado de usuarios</Link>
     </div>
   );