first commit

common/resources/client/auth/ui/account-settings/timezone-select.tsx

@@ -0,0 +1,48 @@
+import {
+  FormSelect,
+  OptionGroup,
+  SelectProps,
+} from '@common/ui/forms/select/select';
+import {message} from '@common/i18n/message';
+import {Option} from '@common/ui/forms/combobox/combobox';
+import {useTrans} from '@common/i18n/use-trans';
+import {Timezone} from '@common/http/value-lists';
+import {InputSize} from '@common/ui/forms/input-field/input-size';
+import {ReactNode} from 'react';
+
+interface Props extends Omit<SelectProps<any>, 'selectionMode' | 'children'> {
+  name: string;
+  timezones: Record<string, Timezone[]>;
+  size?: InputSize;
+  label?: ReactNode;
+}
+export function TimezoneSelect({
+  name,
+  size,
+  timezones,
+  label,
+  ...selectProps
+}: Props) {
+  const {trans} = useTrans();
+  return (
+    <FormSelect
+      selectionMode="single"
+      name={name}
+      size={size}
+      label={label}
+      showSearchField
+      searchPlaceholder={trans(message('Search timezones'))}
+      {...selectProps}
+    >
+      {Object.entries(timezones).map(([sectionName, sectionItems]) => (
+        <OptionGroup label={sectionName} key={sectionName}>
+          {sectionItems.map(timezone => (
+            <Option key={timezone.value} value={timezone.value}>
+              {timezone.text}
+            </Option>
+          ))}
+        </OptionGroup>
+      ))}
+    </FormSelect>
+  );
+}