diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductComparisonModal.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductComparisonModal.tsx | 28 |
1 files changed, 15 insertions, 13 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx index b26be520..45deabb3 100644 --- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx +++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx @@ -6,7 +6,7 @@ import { ModalHeader, ModalBody, ModalCloseButton, - Drawer, // Tambahan untuk Mobile + Drawer, DrawerOverlay, DrawerContent, DrawerHeader, @@ -33,8 +33,8 @@ import { ListItem, useToast, useOutsideClick, - useBreakpointValue, // Tambahan untuk Mobile - Divider // Tambahan untuk Mobile + useBreakpointValue, + Divider } from '@chakra-ui/react'; import { @@ -434,7 +434,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant if (newProducts.every(p => p === null)) setSpecsMatrix([]); }; - // --- RENDER SLOT ITEM --- + const renderProductSlot = (product: any, index: number) => { if (product) { return ( @@ -651,7 +651,6 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <Text fontSize="md" fontWeight="bold" color="gray.700"> Spesifikasi Teknis </Text> - {/* Loader Header Hapus saja, kita pindah ke per-item */} </Flex> </Box> @@ -664,22 +663,18 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <Grid templateColumns="1fr 1fr" gap={4}> {mobileProducts.map((p, cIdx) => { const val = p ? (row.values[String(p.sku)] || '-') : '-'; - // Logic Loader Per Item const isItemLoading = isLoadingMatrix && p && !row.values[String(p.sku)]; return ( <VStack key={cIdx} spacing={1} align="center"> - {/* VALUE (SPINNER JIKA LOADING) */} {isItemLoading ? ( <Spinner size="xs" color="red.500" /> ) : ( - <Text fontWeight="semibold" fontSize="s" color="gray.800" textAlign="center" lineHeight="shorter"> + <Text fontWeight="semibold" fontSize="12px" color="gray.800" textAlign="center" lineHeight="shorter"> {renderSpecValue(val)} </Text> )} - - {/* LABEL */} - <Text fontSize="xs" color="gray.600" fontWeight="normal" textAlign="center"> + <Text fontSize="10px" color="gray.600" fontWeight="normal" textAlign="center"> {row.label} </Text> </VStack> @@ -701,7 +696,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant // --- MAIN RENDER --- - // Tampilan Mobile (Drawer 75%) + // Tampilan Mobile (Drawer 75% + Slim Scrollbar) if (isMobile) { return ( <Drawer isOpen={isOpen} placement="bottom" onClose={onClose}> @@ -709,7 +704,14 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <DrawerContent borderTopRadius="20px" h="88vh" bg="white"> <DrawerCloseButton zIndex={20} /> <DrawerHeader borderBottomWidth="1px" fontSize="md" textAlign="center">Bandingkan Produk</DrawerHeader> - <DrawerBody p={4} overflowY="auto"> + <DrawerBody + p={4} + overflowY="auto" + css={{ + '&::-webkit-scrollbar': { width: '9px', height: '10px', }, + '&::-webkit-scrollbar-thumb': { background: '#cbd5e0', borderRadius: '24px' }, + }} + > {renderMobileContent()} </DrawerBody> </DrawerContent> |