docs: timezone change to select

docs/src/components/DockerComposeGenerator/components/OtherOptions.tsx

@@ -1,7 +1,24 @@
-import React from "react";
+import React, { useMemo } from "react";
 import CodeInline from "@theme/CodeInline";
 import styles from "../styles.module.css";
 
+const AUTO_TIMEZONE_VALUE = "__auto__";
+
+function getTimezoneList(): string[] {
+  if (typeof Intl !== "undefined") {
+    const intl = Intl as typeof Intl & {
+      supportedValuesOf?: (key: string) => string[];
+    };
+    const supported = intl.supportedValuesOf?.("timeZone");
+    if (supported && supported.length > 0) {
+      return [...supported].sort();
+    }
+  }
+
+  const fallback = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return fallback ? [fallback] : ["UTC"];
+}
+
 interface Props {
   rtspPassword: string;
   timezone: string;
@@ -21,6 +38,11 @@ export default function OtherOptions({
   onTimezoneChange,
   onShmSizeChange,
 }: Props) {
+  const timezones = useMemo(() => getTimezoneList(), []);
+  const systemTimezone =
+    Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC";
+  const selectedValue = timezone || AUTO_TIMEZONE_VALUE;
+
   return (
     <div className={styles.formSection}>
       <h4>Other Options</h4>
@@ -29,14 +51,25 @@ export default function OtherOptions({
           <label htmlFor="dcg-timezone" className={styles.label}>
             Timezone:
           </label>
-          <input
+          <select
             id="dcg-timezone"
-            type="text"
+            className={`${styles.input} ${styles.select}`}
-            className={styles.input}
+            value={selectedValue}
-            value={timezone}
+            onChange={(e) =>
-            placeholder={Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC"}
+              onTimezoneChange(
-            onChange={(e) => onTimezoneChange(e.target.value)}
+                e.target.value === AUTO_TIMEZONE_VALUE ? "" : e.target.value
-          />
+              )
+            }
+          >
+            <option value={AUTO_TIMEZONE_VALUE}>
+              Use browser timezone ({systemTimezone})
+            </option>
+            {timezones.map((tz) => (
+              <option key={tz} value={tz}>
+                {tz}
+              </option>
+            ))}
+          </select>
         </div>
         <div className={styles.formGroup}>
           <label htmlFor="dcg-shm-size" className={styles.label}>

docs/src/components/DockerComposeGenerator/hooks/useConfigGenerator.ts

@@ -34,9 +34,7 @@ export function useConfigGenerator() {
   const [configPath, setConfigPath] = useState("");
   const [mediaPath, setMediaPath] = useState("");
   const [rtspPassword, setRtspPassword] = useState("password");
-  const [timezone, setTimezone] = useState(
+  const [timezone, setTimezone] = useState("");
-    () => Intl.DateTimeFormat().resolvedOptions().timeZone || "Etc/UTC"
-  );
   const [shmSize, setShmSize] = useState("512mb");
   const [shmSizeError, setShmSizeError] = useState(false);
   const [gpuDeviceIdError, setGpuDeviceIdError] = useState(false);

docs/src/components/DockerComposeGenerator/styles.module.css

@@ -103,6 +103,21 @@
   }
 }
 
+/* --- Select dropdown --- */
+
+.select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
+[data-theme="light"] .select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+}
+
 .helpText {
   margin: 0.5rem 0 0 0;
   font-size: 0.85rem;