mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
c2e3782d28
* player filters for type and skills * fetching multiple players in parallel * removed tile fragment * search by username or address * better spacing * availability filter * timezone filter * passing tests in ds * submit form in search bar * added better labels for timezone * fixed test issue * searching only if search >= 2 char * meta select ds * updated metabutton bg color * parallel for > 50 only * fix reset search filter
82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
/* istanbul ignore file */
|
|
import React from 'react';
|
|
import { Styles } from 'react-select';
|
|
import TimezoneSelect, { TimezoneSelectProps } from 'react-timezone-select';
|
|
import { i18nTimezones } from 'react-timezone-select/dist/index.js';
|
|
import spacetime from 'spacetime';
|
|
import informal from 'spacetime-informal';
|
|
|
|
import { theme } from './theme';
|
|
|
|
export type TimezoneType = {
|
|
id: string;
|
|
label: string;
|
|
};
|
|
|
|
export const TimezoneOptions: TimezoneType[] = Object.entries(
|
|
i18nTimezones,
|
|
).map((zone) => {
|
|
const now = spacetime.now().goto(zone[0]);
|
|
const tz = now.timezone();
|
|
const tzStrings = informal.display(zone[0]);
|
|
|
|
let abbrev = zone[0];
|
|
|
|
if (tzStrings && tzStrings.daylight && tzStrings.standard) {
|
|
abbrev = now.isDST()
|
|
? tzStrings.daylight.abbrev
|
|
: tzStrings.standard.abbrev;
|
|
}
|
|
|
|
const min = tz.current.offset * 60;
|
|
const hr = `${(min / 60) ^ 0}:${min % 60 === 0 ? '00' : Math.abs(min % 60)}`;
|
|
const prefix = `(GMT${hr.includes('-') ? hr : `+${hr}`}) ${zone[1]}`;
|
|
|
|
const label = `${prefix} ${abbrev.length < 5 ? `(${abbrev})` : ''}`;
|
|
|
|
return {
|
|
id: zone[0],
|
|
label,
|
|
};
|
|
});
|
|
|
|
const selectStyles: Styles = {
|
|
menu: (styles) => ({
|
|
...styles,
|
|
background: theme.colors.dark,
|
|
}),
|
|
input: (styles) => ({
|
|
...styles,
|
|
color: theme.colors.white,
|
|
}),
|
|
option: (styles) => ({
|
|
...styles,
|
|
background: theme.colors.dark,
|
|
':hover': {
|
|
backgroundColor: theme.colors.purpleTag,
|
|
color: theme.colors.white,
|
|
},
|
|
}),
|
|
control: (styles) => ({
|
|
...styles,
|
|
background: theme.colors.dark,
|
|
border: theme.colors.dark,
|
|
}),
|
|
singleValue: (styles) => ({
|
|
...styles,
|
|
color: theme.colors.white,
|
|
}),
|
|
dropdownIndicator: (styles) => ({
|
|
...styles,
|
|
color: theme.colors.white,
|
|
cursor: 'pointer',
|
|
':hover': {
|
|
color: theme.colors.blueLight,
|
|
},
|
|
}),
|
|
};
|
|
|
|
export const SelectTimeZone: React.FC<TimezoneSelectProps> = (props) => (
|
|
<TimezoneSelect styles={selectStyles} {...props} />
|
|
);
|