50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { toLocalDatetimeInputValue, toUTCFromLocalInput } from '../../utils/time';
|
|
|
|
interface TimeAdjusterProps {
|
|
onTimeChange: (time: string) => void;
|
|
defaultValue?: string;
|
|
}
|
|
|
|
const TimeAdjuster: React.FC<TimeAdjusterProps> = ({ onTimeChange, defaultValue }) => {
|
|
const [value, setValue] = useState(() => {
|
|
if (defaultValue) {
|
|
const d = new Date(defaultValue);
|
|
return toLocalDatetimeInputValue(d);
|
|
}
|
|
return toLocalDatetimeInputValue(new Date());
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (onTimeChange) {
|
|
onTimeChange(toUTCFromLocalInput(value));
|
|
}
|
|
}, [value, onTimeChange]);
|
|
|
|
const resetToNow = () => {
|
|
const now = toLocalDatetimeInputValue(new Date());
|
|
setValue(now);
|
|
onTimeChange(toUTCFromLocalInput(now));
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col items-center space-y-3 w-full">
|
|
<div className="relative w-full max-w-[280px]">
|
|
<input
|
|
type="datetime-local"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
className="w-full p-4 bg-gray-50 border border-gray-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-lg font-medium transition-all outline-none"
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={resetToNow}
|
|
className="text-sm font-medium text-indigo-600 hover:text-indigo-500 transition-colors"
|
|
>
|
|
Reset to now
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimeAdjuster; |