@ -0,0 +1,26 @@
|
|||||||
|
import { useRef } from 'preact/hooks'
|
||||||
|
import { Icon } from './Icon.jsx'
|
||||||
|
|
||||||
|
export const DatePicker = ({ date, setDate }) => {
|
||||||
|
const input = useRef()
|
||||||
|
|
||||||
|
const [year, month, day] = date.split('T')[0].split('-')
|
||||||
|
return (
|
||||||
|
<div class="date-picker" onClick={() => input.current.showPicker()}>
|
||||||
|
<input
|
||||||
|
ref={input}
|
||||||
|
type="date"
|
||||||
|
value={`${year}-${month}-${day}`}
|
||||||
|
onChange={e => setDate(new Date(e.target.value).toISOString())}
|
||||||
|
/>
|
||||||
|
<div class="date-picker-render">
|
||||||
|
<div class="date">
|
||||||
|
{day}/{month}/{year}
|
||||||
|
</div>
|
||||||
|
<div class="calendar">
|
||||||
|
<Icon name="calendar_month" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -0,0 +1,22 @@
|
|||||||
|
import { DatePicker } from './DatePicker.jsx'
|
||||||
|
import { Icon } from './Icon.jsx'
|
||||||
|
|
||||||
|
export const SettingsBar = ({ theme, setTheme, date, setDate }) => {
|
||||||
|
return (
|
||||||
|
<div class="settings-bar">
|
||||||
|
<div class="settings-group">
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
onClick={() =>
|
||||||
|
setTheme(theme === 'dark' ? 'light' : 'dark')
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
name={theme === 'dark' ? 'dark_mode' : 'light_mode'}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<DatePicker date={date} setDate={setDate} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue