40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Clock } from 'lucide-react';
|
|
|
|
interface TimeInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
label?: string;
|
|
step?: number;
|
|
}
|
|
|
|
const TimeInput: React.FC<TimeInputProps> = ({
|
|
value,
|
|
onChange,
|
|
label,
|
|
step = 60
|
|
}) => {
|
|
return (
|
|
<div className="flex flex-col gap-1.5 w-full">
|
|
{label && (
|
|
<label className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<div className="relative group">
|
|
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500 transition-colors">
|
|
<Clock size={16} />
|
|
</div>
|
|
<input
|
|
type="time"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
step={step}
|
|
className="w-full pl-10 pr-3 py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimeInput; |