summaryrefslogtreecommitdiff
path: root/src-migrate/modules/product-detail/components/ProductDetail.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')
-rw-r--r--src-migrate/modules/product-detail/components/ProductDetail.tsx106
1 files changed, 67 insertions, 39 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 7ca2f9a7..04bf5533 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -60,6 +60,45 @@ const RWebShare = dynamic(
() => import('react-web-share').then((m) => m.RWebShare),
{ ssr: false }
);
+// 1. STYLE DESKTOP (Tebal, Jelas, dengan Border/Padding)
+const cssScrollbarDesktop = {
+ '&::-webkit-scrollbar': {
+ width: '10px',
+ height: '10px',
+ },
+ '&::-webkit-scrollbar-track': {
+ background: '#f1f1f1',
+ borderRadius: '4px',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: '#9ca3af', // Gray-400
+ borderRadius: '6px',
+ border: '2px solid #f1f1f1', // Efek padding
+ },
+ '&::-webkit-scrollbar-thumb:hover': {
+ backgroundColor: '#6b7280',
+ },
+};
+
+// 2. STYLE MOBILE (Tipis, Minimalis, Tanpa Border)
+const cssScrollbarMobile = {
+ '&::-webkit-scrollbar': {
+ width: '8px', // Sangat tipis vertikal
+ height: '8px', // Sangat tipis horizontal
+ },
+ '&::-webkit-scrollbar-track': {
+ background: '#f1f1f1',
+ borderRadius: '4px',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: '#9ca3af', // Gray-400
+ borderRadius: '6px',
+ border: '2px solid #f1f1f1', // Efek padding
+ },
+ '&::-webkit-scrollbar-thumb:hover': {
+ backgroundColor: '#6b7280',
+ },
+};
const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
@@ -494,7 +533,7 @@ const ProductDetail = ({ product }: Props) => {
<TabList borderBottom="1px solid" borderColor="gray.200">
<Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Deskripsi</Tab>
<Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Spesifikasi</Tab>
- <Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Detail Lainnya</Tab>
+ {/* <Tab _selected={{ color: 'red.600', borderColor: 'red.600', borderBottomWidth: '3px', fontWeight: 'bold', marginBottom: '-1.5px' }} color="gray.500" fontWeight="medium" fontSize="sm" px={4} py={3}>Detail Lainnya</Tab> */}
</TabList>
<TabPanels>
@@ -514,29 +553,13 @@ const ProductDetail = ({ product }: Props) => {
overflowX="auto"
overflowY="auto"
maxHeight="500px"
- css={{
- '&::-webkit-scrollbar': {
- width: '12px',
- height: '12px',
- },
- '&::-webkit-scrollbar-track': {
- background: '#f1f1f1',
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: '#a0aec0',
- borderRadius: '8px',
- border: '4px solid transparent',
- backgroundClip: 'content-box',
- },
- '&::-webkit-scrollbar-thumb:hover': {
- backgroundColor: '#718096',
- },
- }}
+ css={isMobile ? cssScrollbarMobile : cssScrollbarDesktop}
>
{loadingSpecs ? (
<Center py={6}><Spinner color='red.500' /></Center>
) : specsMatrix.length > 0 ? (
(() => {
+ // --- 1. PROSES DATA ---
const topHeaders: any[] = [];
const subHeaders: any[] = [];
const flatSpecs: any[] = [];
@@ -564,17 +587,19 @@ const ProductDetail = ({ product }: Props) => {
}
});
+ // --- 2. RENDER TABLE (Z-INDEX DITURUNKAN) ---
return (
- <Table variant="simple" size="md">
- <Thead bg="red.600" position="sticky" top={0} zIndex={20}>
- {/* Baris 1: Header Utama */}
+ <Table variant="simple" size={isMobile ? "sm" : "md"}>
+ <Thead bg="red.600" position="sticky" top={0} zIndex={3}> {/* Turun dari 20 ke 3 */}
+ {/* Row 1: Header Utama */}
<Tr>
{topHeaders.map((th, idx) => (
<Th
key={`top-${idx}`}
+ // LOGIC STICKY: Index 0 Selalu Sticky
position={idx === 0 ? "sticky" : "static"}
left={idx === 0 ? 0 : undefined}
- zIndex={idx === 0 ? 22 : 20}
+ zIndex={idx === 0 ? 4 : 3} // Turun dari 22 -> 4, dan 20 -> 3
boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"}
bg="red.600"
@@ -582,29 +607,31 @@ const ProductDetail = ({ product }: Props) => {
rowSpan={th.rowSpan}
color="white"
textAlign="center"
- fontSize="sm"
+ fontSize={isMobile ? "xs" : "sm"}
textTransform="none"
fontWeight="800"
letterSpacing="wide"
verticalAlign="middle"
borderBottom="none"
+ px={isMobile ? 2 : 4}
>
{th.label}
</Th>
))}
</Tr>
-
- {/* Baris 2: Sub Header */}
+
+ {/* Row 2: Sub Header */}
<Tr>
- {subHeaders.map((sub, idx) => {
+ {subHeaders.map((sub, idx) => {
const isFirstHeaderGroup = topHeaders[0]?.type === 'group';
const shouldSticky = idx === 0 && isFirstHeaderGroup;
return (
<Th
key={`sub-${idx}`}
+ // LOGIC STICKY: Aktif jika Header Utama Group & Index 0
position={shouldSticky ? "sticky" : "static"}
left={shouldSticky ? 0 : undefined}
- zIndex={shouldSticky ? 21 : 1}
+ zIndex={shouldSticky ? 4 : 1} // Turun dari 21 -> 4
boxShadow={shouldSticky ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"}
color="white"
@@ -614,7 +641,9 @@ const ProductDetail = ({ product }: Props) => {
verticalAlign="middle"
whiteSpace="nowrap"
bg="red.600"
+ borderBottom="none"
pt={1} pb={1}
+ px={isMobile ? 2 : 4}
>
{sub.label}
</Th>
@@ -622,35 +651,34 @@ const ProductDetail = ({ product }: Props) => {
})}
</Tr>
</Thead>
-
+
<Tbody>
{sortedVariants.map((v, vIdx) => (
<Tr key={v.id} bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}>
{flatSpecs.map((spec, sIdx) => {
const rawValue = spec.values[v.id] || '-';
- const isFirstCol = sIdx === 0;
+ const isFirstCol = sIdx === 0;
return (
<Td
key={sIdx}
- // === LOGIC STICKY DATA PERTAMA ===
+ // LOGIC STICKY: Data Kolom Pertama Selalu Sticky
position={isFirstCol ? "sticky" : "static"}
left={isFirstCol ? 0 : undefined}
- zIndex={isFirstCol ? 10 : 1}
+ zIndex={isFirstCol ? 2 : 1} // Turun dari 10 -> 2
bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}
boxShadow={isFirstCol ? "2px 0 5px -2px rgba(0,0,0,0.1)" : "none"}
- // =================================
borderColor="gray.200"
textAlign="center"
- fontSize="sm"
+ fontSize={isMobile ? "xs" : "sm"}
verticalAlign="middle"
- px={2}
+ px={isMobile ? 1 : 2}
py={3}
- minW="100px"
- maxW="150px"
+ minW={isMobile ? "100px" : "120px"}
+ maxW="200px"
whiteSpace="normal"
overflowWrap="break-word"
- fontWeight={isFirstCol ? "bold" : "normal"}
+ fontWeight={isFirstCol ? "bold" : "normal"}
>
{renderSpecValue(rawValue)}
</Td>
@@ -669,7 +697,7 @@ const ProductDetail = ({ product }: Props) => {
</TabPanel>
{/* DETAIL LAINNYA */}
- <TabPanel px={0} py={6}><p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p></TabPanel>
+ {/* <TabPanel px={0} py={6}><p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p></TabPanel> */}
</TabPanels>
</Tabs>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 19:18:34 +0000