improve timezone discovery
This commit is contained in:
Joyce
217
frontend/src/components/TimezoneSelector.tsx
Normal file
217
frontend/src/components/TimezoneSelector.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Search, Globe, ChevronDown } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface TimezoneSelectorProps {
|
||||
value: string;
|
||||
onChange: (timezone: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// Get all IANA timezones
|
||||
const getAllTimezones = (): string[] => {
|
||||
try {
|
||||
return Intl.supportedValuesOf('timeZone');
|
||||
} catch {
|
||||
// Fallback for older browsers
|
||||
return [
|
||||
'UTC',
|
||||
'America/New_York',
|
||||
'America/Chicago',
|
||||
'America/Denver',
|
||||
'America/Los_Angeles',
|
||||
'America/Toronto',
|
||||
'America/Vancouver',
|
||||
'Europe/London',
|
||||
'Europe/Paris',
|
||||
'Europe/Berlin',
|
||||
'Asia/Tokyo',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Singapore',
|
||||
'Australia/Sydney',
|
||||
'Pacific/Auckland',
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
// Get UTC offset for a timezone
|
||||
const getTimezoneOffset = (timezone: string): string => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const formatter = new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: timezone,
|
||||
timeZoneName: 'shortOffset',
|
||||
});
|
||||
const parts = formatter.formatToParts(now);
|
||||
const offsetPart = parts.find((p) => p.type === 'timeZoneName');
|
||||
return offsetPart?.value || '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// Get current time in a timezone
|
||||
const getCurrentTimeInTimezone = (timezone: string): string => {
|
||||
try {
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: timezone,
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
}).format(new Date());
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// Format timezone for display (e.g., "America/New_York" -> "New York")
|
||||
const formatTimezoneLabel = (timezone: string): string => {
|
||||
const parts = timezone.split('/');
|
||||
const city = parts[parts.length - 1];
|
||||
return city.replace(/_/g, ' ');
|
||||
};
|
||||
|
||||
const ALL_TIMEZONES = getAllTimezones();
|
||||
|
||||
export const TimezoneSelector = ({
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
}: TimezoneSelectorProps) => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [hoveredTimezone, setHoveredTimezone] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const filteredTimezones = ALL_TIMEZONES.filter((tz) => {
|
||||
const query = searchQuery.toLowerCase();
|
||||
const tzLower = tz.toLowerCase();
|
||||
const labelLower = formatTimezoneLabel(tz).toLowerCase();
|
||||
const offset = getTimezoneOffset(tz).toLowerCase();
|
||||
|
||||
return (
|
||||
tzLower.includes(query) ||
|
||||
labelLower.includes(query) ||
|
||||
offset.includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
const selectTimezone = (timezone: string) => {
|
||||
onChange(timezone);
|
||||
setSearchQuery('');
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
const selectedOffset = getTimezoneOffset(value);
|
||||
const selectedLabel = formatTimezoneLabel(value);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className={cn('relative', className)}>
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-muted hover:bg-accent transition-colors',
|
||||
'border border-transparent hover:border-border'
|
||||
)}
|
||||
>
|
||||
<Globe className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="text-foreground font-medium">{selectedLabel}</span>
|
||||
<span className="text-muted-foreground">{selectedOffset}</span>
|
||||
<ChevronDown className={cn(
|
||||
'w-4 h-4 text-muted-foreground transition-transform',
|
||||
isDropdownOpen && 'rotate-180'
|
||||
)} />
|
||||
</button>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute z-20 right-0 mt-2 w-80 bg-popover border border-border rounded-lg shadow-popover animate-scale-in overflow-hidden">
|
||||
<div className="p-2 border-b border-border">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search timezone..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 h-9 bg-background border-border"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-64 overflow-y-auto">
|
||||
{filteredTimezones.length === 0 ? (
|
||||
<div className="px-4 py-3 text-sm text-muted-foreground text-center">
|
||||
No timezones found
|
||||
</div>
|
||||
) : (
|
||||
filteredTimezones.slice(0, 50).map((timezone) => {
|
||||
const isSelected = timezone === value;
|
||||
const offset = getTimezoneOffset(timezone);
|
||||
const label = formatTimezoneLabel(timezone);
|
||||
const isHovered = hoveredTimezone === timezone;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={timezone}
|
||||
onClick={() => selectTimezone(timezone)}
|
||||
onMouseEnter={() => setHoveredTimezone(timezone)}
|
||||
onMouseLeave={() => setHoveredTimezone(null)}
|
||||
className={cn(
|
||||
'w-full px-4 py-2.5 flex items-center justify-between text-left transition-colors',
|
||||
isSelected ? 'bg-primary/10 text-primary' : 'hover:bg-accent'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={cn(
|
||||
'text-xs font-mono w-16',
|
||||
isSelected ? 'text-primary' : 'text-muted-foreground'
|
||||
)}>
|
||||
{offset}
|
||||
</span>
|
||||
<div>
|
||||
<div className={cn(
|
||||
'font-medium',
|
||||
isSelected ? 'text-primary' : 'text-foreground'
|
||||
)}>
|
||||
{label}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{timezone}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isHovered && (
|
||||
<span className="text-xs text-muted-foreground animate-fade-in">
|
||||
{getCurrentTimeInTimezone(timezone)}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{filteredTimezones.length > 50 && (
|
||||
<div className="px-4 py-2 text-xs text-muted-foreground text-center border-t border-border">
|
||||
Showing 50 of {filteredTimezones.length} results
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user