@ -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