#771 implement timezone bottom sheet on mobile

2026-04-09 11:38:09 +07:00
parent 91f0a5526f
commit cbe73b1e04
15 changed files with 397 additions and 132 deletions
@@ -0,0 +1,58 @@
+import { getTimezoneOffset } from '@/utils/timezone'
+import {
+  Box,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Typography,
+  useTheme
+} from '@linagora/twake-mui'
+import { Check as CheckIcon } from '@mui/icons-material'
+import React from 'react'
+
+interface TimezoneListItemProps {
+  tz: string
+  referenceDate: Date
+  isSelected: boolean
+  onSelect: (tz: string) => void
+  selectedRef: React.RefObject<HTMLDivElement> | null
+}
+
+export const TimezoneListItem: React.FC<TimezoneListItemProps> = ({
+  tz,
+  referenceDate,
+  isSelected,
+  onSelect,
+  selectedRef
+}) => {
+  const theme = useTheme()
+  const offset = getTimezoneOffset(tz, referenceDate)
+  const label = tz.split('/').pop()?.replace(/_/g, ' ') || tz
+
+  return (
+    <ListItem disablePadding>
+      <ListItemButton
+        selected={isSelected}
+        aria-selected={isSelected}
+        ref={isSelected ? selectedRef : null}
+        onClick={() => onSelect(tz)}
+        sx={{ py: 1 }}
+      >
+        <ListItemText
+          primary={
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <Typography>
+                ({offset}) {label}
+              </Typography>
+            </Box>
+          }
+        />
+        {isSelected && (
+          <CheckIcon
+            sx={{ color: theme.palette.primary.main, fontSize: '20px' }}
+          />
+        )}
+      </ListItemButton>
+    </ListItem>
+  )
+}