Syed Waseem
48dbbdfcbb
- Updated icon imports in dashboard, policy engine, and custom components to use phosphor-icons. - Replaced icons such as Check, Plus, Trash2, and others with their phosphor equivalents. - Ensured consistent icon usage across the application for better visual coherence.
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import React, { forwardRef } from "react";
|
|
import { CalendarDotsIcon } from "@phosphor-icons/react";
|
|
|
|
interface CustomDateTimePickerProps
|
|
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
const CustomDateTimePicker = forwardRef<
|
|
HTMLInputElement,
|
|
CustomDateTimePickerProps
|
|
>(({ label, error, className = "", disabled, required, ...props }, ref) => {
|
|
return (
|
|
<div className="w-full flex flex-col gap-1.5">
|
|
{label && (
|
|
<label className="text-sm font-semibold text-gray-700">
|
|
{label}
|
|
{required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
)}
|
|
<div className="relative w-full">
|
|
<input
|
|
ref={ref}
|
|
type="datetime-local"
|
|
disabled={disabled}
|
|
className={`
|
|
w-full rounded-lg
|
|
bg-white text-black text-sm
|
|
border border-gray-300
|
|
pl-10 pr-3 py-3
|
|
outline-none
|
|
transition-all duration-200
|
|
hover:border-primary
|
|
focus:border-primary focus:ring-2 focus:ring-primary/20
|
|
disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed disabled:border-gray-200
|
|
placeholder:text-gray-300
|
|
${error
|
|
? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
|
|
: ""
|
|
}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
|
|
<CalendarDotsIcon size={18} />
|
|
</span>
|
|
</div>
|
|
{error && <p className="text-xs text-red-500 mt-0.5">{error}</p>}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default CustomDateTimePicker;
|