75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
import type { Timezone } from 'contexts/globalSettings'
|
|
import { useGlobalSettings } from 'contexts/globalSettings'
|
|
import { useRef, useState } from 'react'
|
|
|
|
import { setTimezone } from '../contexts/globalSettings'
|
|
import { Button } from './Button'
|
|
|
|
export interface SettingsModalProps {
|
|
timezone?: Timezone
|
|
}
|
|
export const SettingsModal = (props: SettingsModalProps) => {
|
|
const globalSettings = useGlobalSettings()
|
|
const [isChecked, setIsChecked] = useState(false)
|
|
|
|
const checkBoxRef = useRef<HTMLInputElement>(null)
|
|
|
|
return (
|
|
<div>
|
|
<input className="modal-toggle" defaultChecked={false} id="my-modal-9" ref={checkBoxRef} type="checkbox" />
|
|
<label className="cursor-pointer modal" htmlFor="my-modal-9">
|
|
<label
|
|
className={`absolute top-[42%] bottom-5 left-[260px] max-w-[450px] max-h-[250px]
|
|
border-[1px] no-scrollbar modal-box`}
|
|
htmlFor="temp"
|
|
>
|
|
<div className="flex flex-col justify-between h-full">
|
|
<div className="flex flex-col">
|
|
<h1 className="text-2xl font-bold underline underline-offset-2">Settings</h1>
|
|
<div className="flex justify-start w-full">
|
|
<div className="flex-row mt-2 w-full form-control">
|
|
<h1 className="mt-[5px] text-lg font-bold">Time & Date: </h1>
|
|
<label className="justify-start ml-6 cursor-pointer label">
|
|
<span className="mr-2 font-bold">Local</span>
|
|
<input
|
|
checked={globalSettings.timezone === 'Local'}
|
|
className={`${globalSettings.timezone === 'Local' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
|
|
onClick={() => {
|
|
setTimezone('Local' as Timezone)
|
|
window.localStorage.setItem('timezone', 'Local')
|
|
}}
|
|
type="checkbox"
|
|
/>
|
|
</label>
|
|
<label className="justify-start ml-4 cursor-pointer label">
|
|
<span className="mr-2 font-bold">UTC</span>
|
|
<input
|
|
checked={globalSettings.timezone === 'UTC'}
|
|
className={`${globalSettings.timezone === 'UTC' ? `bg-stargaze` : `bg-gray-600`} checkbox`}
|
|
onClick={() => {
|
|
setTimezone('UTC' as Timezone)
|
|
window.localStorage.setItem('timezone', 'UTC')
|
|
}}
|
|
type="checkbox"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
className="w-[40%] max-h-12 bg-blue-500 hover:bg-blue-600"
|
|
isWide
|
|
onClick={() => {
|
|
setTimezone('UTC' as Timezone)
|
|
window.localStorage.setItem('timezone', 'UTC')
|
|
}}
|
|
>
|
|
Use Defaults
|
|
</Button>
|
|
</div>
|
|
</label>
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|