diff options
Diffstat (limited to 'src/lib/pengajuan-tempo/component/PengajuanTempo.jsx')
| -rw-r--r-- | src/lib/pengajuan-tempo/component/PengajuanTempo.jsx | 17 |
1 files changed, 14 insertions, 3 deletions
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx index 04797c5f..7ed208db 100644 --- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx +++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx @@ -22,7 +22,9 @@ import createPengajuanTempoApi from '../api/createPengajuanTempoApi'; import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react'; import clsxm from '~/libs/clsxm'; import { toast } from 'react-hot-toast'; +import useDevice from '@/core/hooks/useDevice'; const PengajuanTempo = () => { + const { isDesktop, isMobile } = useDevice(); const [currentStep, setCurrentStep] = React.useState(0); const NUMBER_OF_STEPS = 6; const [isLoading, setIsLoading] = useState(false); @@ -298,8 +300,17 @@ const PengajuanTempo = () => { <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} /> </div> <div>{stepDivs[currentStep]}</div> - <section className='flex gap-10 mt-10'></section> - <div className='flex flex-row justify-end items-center gap-4 mb-8'> + {isDesktop && <section className='flex gap-10 mt-10'></section>} + {isMobile && ( + <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div> + )} + <div + className={`flex ${ + isMobile + ? 'flex-col justify-start items-start' + : 'flex-row justify-end items-center' + } gap-4 mb-8`} + > <span className='text-xs opacity-60'> *Pastikan data yang anda masukan sudah benar dan sesuai </span> @@ -312,7 +323,7 @@ const PengajuanTempo = () => { > <Button colorScheme='red' - w='fit' + w={`${isMobile ? 'full' : 'fit'}`} isDisabled={ (currentStep === 3 && !hasSavedata) || currentStep === NUMBER_OF_STEPS - 1 |