Hello 👋
I’ve been exploring the clock and watch UI components in this repository and wanted to start by saying that they are very well designed—clean, intuitive, and highly usable.
I would like to propose a feature that could further enhance their flexibility and make them more suitable for global use cases. Specifically, adding a timezone selector (dropdown) would allow users to choose a country or timezone, and have all clock components dynamically update based on that selection.
The idea is to introduce a simple dropdown where users can select a timezone (for example, Asia/Kolkata, America/New_York, etc.), after which all clock components would automatically reflect the selected timezone. By default, the system could either use the user’s local timezone (detected via the browser) or fall back to a predefined default.
From an implementation perspective, this can be efficiently handled using the native Intl.DateTimeFormat API for timezone formatting. The selected timezone can be managed through state or a shared context (for global synchronization), and then passed as a prop to all clock-related components.
This enhancement would make the components more practical for real-world applications such as dashboards, SaaS platforms, and admin panels, especially in international contexts. Additionally, it keeps the implementation lightweight by avoiding external dependencies.
I’ve already developed a working version of this feature using Intl along with a timezone dataset. If this idea aligns with the project’s direction, I would be happy to contribute by opening a pull request or adapting my implementation to match the existing architecture.
Looking forward to your thoughts and feedback. Thank you! 👍
Hello 👋
I’ve been exploring the clock and watch UI components in this repository and wanted to start by saying that they are very well designed—clean, intuitive, and highly usable.
I would like to propose a feature that could further enhance their flexibility and make them more suitable for global use cases. Specifically, adding a timezone selector (dropdown) would allow users to choose a country or timezone, and have all clock components dynamically update based on that selection.
The idea is to introduce a simple dropdown where users can select a timezone (for example,
Asia/Kolkata,America/New_York, etc.), after which all clock components would automatically reflect the selected timezone. By default, the system could either use the user’s local timezone (detected via the browser) or fall back to a predefined default.From an implementation perspective, this can be efficiently handled using the native
Intl.DateTimeFormatAPI for timezone formatting. The selected timezone can be managed through state or a shared context (for global synchronization), and then passed as a prop to all clock-related components.This enhancement would make the components more practical for real-world applications such as dashboards, SaaS platforms, and admin panels, especially in international contexts. Additionally, it keeps the implementation lightweight by avoiding external dependencies.
I’ve already developed a working version of this feature using
Intlalong with a timezone dataset. If this idea aligns with the project’s direction, I would be happy to contribute by opening a pull request or adapting my implementation to match the existing architecture.Looking forward to your thoughts and feedback. Thank you! 👍