File size: 2,193 Bytes
ec4551b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 'use client';
import { Select } from '@gitroom/react/form/select';
import React, { useState } from 'react';
import { isUSCitizen } from '@gitroom/frontend/components/launches/helpers/isuscitizen.utils';
import timezones from 'timezones-list';
const dateMetrics = [
{ label: 'AM:PM', value: 'US' },
{ label: '24 hours', value: 'GLOBAL' },
];
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(timezone);
const MetricComponent = () => {
const [currentMetric, setCurrentMetric] = useState(isUSCitizen());
const [timezone, setTimezone] = useState(
localStorage.getItem('timezone') || dayjs.tz.guess()
);
const changeMetric = (event: React.ChangeEvent<HTMLSelectElement>) => {
const value = event.target.value;
setCurrentMetric(value === 'US');
localStorage.setItem('isUS', value);
};
const changeTimezone = (event: React.ChangeEvent<HTMLSelectElement>) => {
const value = event.target.value;
console.log(value);
setTimezone(value);
localStorage.setItem('timezone', value);
dayjs.tz.setDefault(value);
};
return (
<div className="my-[16px] mt-[16px] bg-sixth border-fifth border rounded-[4px] p-[24px] flex flex-col gap-[24px]">
<div className="mt-[4px]">Date Metrics</div>
<Select name="metric" disableForm={true} label="" onChange={changeMetric} value={currentMetric ? 'US' : 'GLOBAL'}>
{dateMetrics.map((metric) => (
<option
key={metric.value}
value={metric.value}
>
{metric.label}
</option>
))}
</Select>
{/*<div className="mt-[4px]">Current Timezone</div>*/}
{/*<Select*/}
{/* name="timezone"*/}
{/* disableForm={true}*/}
{/* label=""*/}
{/* onChange={changeTimezone}*/}
{/*>*/}
{/* {timezones.map((metric) => (*/}
{/* <option*/}
{/* key={metric.name}*/}
{/* value={metric.tzCode}*/}
{/* selected={metric.tzCode === timezone}*/}
{/* >*/}
{/* {metric.label}*/}
{/* </option>*/}
{/* ))}*/}
{/*</Select>*/}
</div>
);
};
export default MetricComponent;
|