Skip to content

GitLab

Commit 0036d0f4 authored by Eduardo Aguiar de Godoi's avatar Eduardo Aguiar de Godoi
Browse files

feat: Criado componente ExamFilter com estilização e funcionalidades personalizadas

parent e144ae66
Hide whitespace changes
Inline Side-by-side
Showing
with 243 additions and 137 deletions
+243 -137
package-lock.json
View file @ 0036d0f4
......@@ -12,6 +12,7 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.7",
"@mui/material": "^5.14.7",
"@mui/system": "^5.14.12",
"axios": "^1.5.0",
"cpf": "^2.0.1",
"react": "^18.2.0",
......@@ -532,11 +533,6 @@
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
},
"node_modules/@emotion/serialize/node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/@emotion/styled": {
"version": "11.11.0",
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
......@@ -729,13 +725,54 @@
"url": "https://opencollective.com/mui"
}
},
"node_modules/@mui/material/node_modules/@mui/private-theming": {
"version": "5.14.11",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.11.tgz",
"integrity": "sha512-MSnNNzTu9pfKLCKs1ZAKwOTgE4bz+fQA0fNr8Jm7NDmuWmw0CaN9Vq2/MHsatE7+S0A25IAKby46Uv1u53rKVQ==",
"node_modules/@mui/material/node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@mui/material/node_modules/@types/react-transition-group": {
"version": "4.4.7",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
"integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
"dependencies": {
"@babel/runtime": "^7.22.15",
"@mui/utils": "^5.14.11",
"@types/react": "*"
}
},
"node_modules/@mui/material/node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/@mui/material/node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/@mui/private-theming": {
"version": "5.14.12",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.12.tgz",
"integrity": "sha512-TWwm+9+BgHFpoR3w04FG+IqID4ALa74A27RuKq2CEaWgxliBZB24EVeI6djfjFt5t4FYmIb8BMw2ZJEir7YjLQ==",
"dependencies": {
"@babel/runtime": "^7.23.1",
"@mui/utils": "^5.14.12",
"prop-types": "^15.8.1"
},
"engines": {
......@@ -755,12 +792,12 @@
}
}
},
"node_modules/@mui/material/node_modules/@mui/styled-engine": {
"version": "5.14.11",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.11.tgz",
"integrity": "sha512-jdUlqRgTYQ8RMtPX4MbRZqar6W2OiIb6J5KEFbIu4FqvPrk44Each4ppg/LAqp1qNlBYq5i+7Q10MYLMpDxX9A==",
"node_modules/@mui/styled-engine": {
"version": "5.14.12",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.12.tgz",
"integrity": "sha512-bocxt1nDmXfB3gpLfCCmFCyJ7sVmscFs+PuheO210QagZwHVp47UIRT1AiswLDYSQo1ZqmVGn7KLEJEYK0d4Xw==",
"dependencies": {
"@babel/runtime": "^7.22.15",
"@babel/runtime": "^7.23.1",
"@emotion/cache": "^11.11.0",
"csstype": "^3.1.2",
"prop-types": "^15.8.1"
......@@ -786,16 +823,16 @@
}
}
},
"node_modules/@mui/material/node_modules/@mui/system": {
"version": "5.14.11",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.11.tgz",
"integrity": "sha512-yl8xV+y0k7j6dzBsHabKwoShmjqLa8kTxrhUI3JpqLG358VRVMJRW/ES0HhvfcCi4IVXde+Tc2P3K1akGL8zoA==",
"node_modules/@mui/system": {
"version": "5.14.12",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.12.tgz",
"integrity": "sha512-6DXfjjLhW0/ia5qU3Crke7j+MnfDbMBOHlLIrqbrEqNs0AuSBv8pXniEGb+kqO0H804NJreRTEJRjCngwOX5CA==",
"dependencies": {
"@babel/runtime": "^7.22.15",
"@mui/private-theming": "^5.14.11",
"@mui/styled-engine": "^5.14.11",
"@mui/types": "^7.2.4",
"@mui/utils": "^5.14.11",
"@babel/runtime": "^7.23.1",
"@mui/private-theming": "^5.14.12",
"@mui/styled-engine": "^5.14.12",
"@mui/types": "^7.2.5",
"@mui/utils": "^5.14.12",
"clsx": "^2.0.0",
"csstype": "^3.1.2",
"prop-types": "^15.8.1"
......@@ -825,12 +862,12 @@
}
}
},
"node_modules/@mui/material/node_modules/@mui/types": {
"version": "7.2.4",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
"integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA==",
"node_modules/@mui/types": {
"version": "7.2.5",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.5.tgz",
"integrity": "sha512-S2BwfNczr7VwS6ki8GoAXJyARoeSJDLuxOEPs3vEMyTALlf9PrdHv+sluX7kk3iKrCg/ML2mIWwapZvWbkMCQA==",
"peerDependencies": {
"@types/react": "*"
"@types/react": "^17.0.0 || ^18.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
......@@ -838,13 +875,13 @@
}
}
},
"node_modules/@mui/material/node_modules/@mui/utils": {
"version": "5.14.11",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.11.tgz",
"integrity": "sha512-fmkIiCPKyDssYrJ5qk+dime1nlO3dmWfCtaPY/uVBqCRMBZ11JhddB9m8sjI2mgqQQwRJG5bq3biaosNdU/s4Q==",
"node_modules/@mui/utils": {
"version": "5.14.12",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.12.tgz",
"integrity": "sha512-RFNXnhKQlzIkIUig6mmv0r5VbtjPdWoaBPYicq25LETdZux59HAqoRdWw15T7lp3c7gXOoE8y67+hTB8C64m2g==",
"dependencies": {
"@babel/runtime": "^7.22.15",
"@types/prop-types": "^15.7.5",
"@babel/runtime": "^7.23.1",
"@types/prop-types": "^15.7.7",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
......@@ -865,93 +902,6 @@
}
}
},
"node_modules/@mui/material/node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@mui/material/node_modules/@types/prop-types": {
"version": "15.7.8",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
"integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
},
"node_modules/@mui/material/node_modules/@types/react-transition-group": {
"version": "4.4.7",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
"integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@mui/material/node_modules/clsx": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
"integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
"engines": {
"node": ">=6"
}
},
"node_modules/@mui/material/node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/@mui/material/node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/@mui/material/node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@mui/material/node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/@mui/material/node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/@mui/material/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/material/node_modules/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/@remix-run/router": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
......@@ -1170,7 +1120,11 @@
"integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==",
"dev": true
},
"node_modules/@types/prop-types": {},
"node_modules/@types/prop-types": {
"version": "15.7.8",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
"integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
},
"node_modules/@types/react": {
"version": "18.2.24",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.24.tgz",
......@@ -1190,12 +1144,11 @@
"@types/react": "*"
}
},
"node_modules/@types/react/node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
"node_modules/@types/scheduler": {
"version": "0.16.4",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz",
"integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ=="
},
"node_modules/@types/scheduler": {},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "6.7.4",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.4.tgz",
......@@ -2356,11 +2309,24 @@
"proxy-from-env": "^1.1.0"
}
},
"node_modules/clsx": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
"integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
"engines": {
"node": ">=6"
}
},
"node_modules/cpf": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/cpf/-/cpf-2.0.1.tgz",
"integrity": "sha512-YpRbrpjQCDkZgMUOLxLfme8wE8X56fHXOGMGDsYA48f7UrjaCHU0TP8d+CKmxvNVjBDVtHiCUiBw8vfstdslbw=="
},
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
......@@ -3572,11 +3538,34 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"dev": true,
"license": "ISC"
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.13.1"
}
},
"node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
......@@ -3624,6 +3613,11 @@
"react": "^18.2.0"
}
},
"node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/react-router": {
"version": "6.16.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
......
package.json
View file @ 0036d0f4
......@@ -15,6 +15,7 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.7",
"@mui/material": "^5.14.7",
"@mui/system": "^5.14.12",
"axios": "^1.5.0",
"cpf": "^2.0.1",
"react": "^18.2.0",
......
src/AppRoutes.tsx
View file @ 0036d0f4
......@@ -11,13 +11,14 @@ import { CadastroMedico } from './pages/CadastroMedico/CadastroMedico';
import { Identificacao } from './pages/Identificacao/Identificacao';
import HomeMedico from './pages/HomeMedico/HomeMedico';
import VisualizacaoPerfilMedico from './pages/VisualizarPerfilMedico/VisualizarPerfilMedico';
import Temporaria from './pages/temporaria';
export default function AppRoutes() {
return (
<Router>
<div className="App">
<Routes>
<Route path={ROUTES.HOME_MEDICO()} element={<HomeMedico />} />
{/* <Route path={ROUTES.HOME_MEDICO()} element={<HomeMedico />} />
<Route path={ROUTES.HOME_PACIENTE()} element={<HomePaciente />} />
<Route
path={ROUTES.CADASTRO_PACIENTE()}
......@@ -28,12 +29,9 @@ export default function AppRoutes() {
<Route
path={ROUTES.EXAMES_PENDENTES_VAZIO()}
element={<ExamesPendentesVazio />}
/>
<Route
path={ROUTES.EXAMES_REALIZADOS_VAZIO()}
element={<ExamesRealizadosVazio />}
/>
<Route path={ROUTES.LOGIN()} element={<Login />} />
/> */}
<Route path="/" element={<Temporaria />} />
{/* <Route path={ROUTES.LOGIN()} element={<Login />} />
<Route
path={ROUTES.PERFIL_PACIENTE()}
element={<VisualizacaoPerfilPaciente />}
......@@ -41,7 +39,7 @@ export default function AppRoutes() {
<Route
path={ROUTES.PERFIL_MEDICO()}
element={<VisualizacaoPerfilMedico />}
/>
/> */}
</Routes>
</div>
</Router>
......
src/components/ExamFilter/examFilter.tsx 0 → 100644
View file @ 0036d0f4
import React from 'react';
import { Tabs, Tab, AppBar, Box } from '@mui/material';
import { styled } from '@mui/system';
interface TabItem {
label: string;
content: React.ReactNode;
}
interface ExamFilterProps {
tabs: TabItem[];
initialTab?: number;
}
const ExamFilterTab = styled(Tab)(({ theme }) => ({
minWidth: '101px',
height: '23px',
zIndex: 3,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flexShrink: 0,
color: '#E76553',
textAlign: 'center',
fontFamily: 'Poppins',
fontSize: '12px',
fontStyle: 'normal',
fontWeight: 500,
lineHeight: 'normal',
padding: '13px 0 0 0',
'&.Mui-selected': {
color: '#FBF8F8',
},
}));
const ExamFilter: React.FC<ExamFilterProps> = ({ tabs, initialTab = 0 }) => {
const [value, setValue] = React.useState(initialTab);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: '322px',
height: '34px',
borderRadius: '100px',
background: '#FFF',
padding: '0px 6px', // ajustar espacamento
gap: '3px',
flexShrink: 0,
}}
>
<AppBar position="static" color="transparent" elevation={0}>
<Tabs
value={value}
onChange={handleChange}
variant="fullWidth"
TabIndicatorProps={{
style: {
backgroundColor: '#E76553',
height: '28px',
borderRadius: '100px',
bottom: '5px', // mover a parte vermelha
},
className: 'tab-indicator',
}}
>
{tabs.map((tab, index) => (
<ExamFilterTab
key={index}
label={tab.label}
disableRipple
style={{ marginTop: '10px' }} // mover os textos
/>
))}
</Tabs>
</AppBar>
{tabs.map((tab, index) => (
<Box key={index} hidden={value !== index}>
{tab.content}
</Box>
))}
</Box>
);
};
export default ExamFilter;
src/pages/temporaria.css 0 → 100644
View file @ 0036d0f4
body {
background-color: #fbf8f8;
}
src/pages/temporaria.tsx 0 → 100644
View file @ 0036d0f4
import ExamFilter from './../components/ExamFilter/examFilter';
import './temporaria.css';
const temporaria: React.FC = () => {
return (
<div>
<ExamFilter
tabs={[
{ label: '7 dias', content: <div> Exames dos últimos 7 dias </div> },
{ label: '30 dias', content: <div>Exames dos últimos 30 dias</div> },
{ label: 'Todos', content: <div>Todos os Exames</div> },
]}
/>
</div>
);
};
export default temporaria;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment