product adding in orderdetails made some changes like required for bags
This commit is contained in:
parent
b0d1b87bcf
commit
cbc9aab4c7
@ -10,6 +10,7 @@ export interface SelectOption {
|
|||||||
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
||||||
label?: string;
|
label?: string;
|
||||||
hint?: string;
|
hint?: string;
|
||||||
|
error?: string;
|
||||||
/** Either strings or {value,label} objects. */
|
/** Either strings or {value,label} objects. */
|
||||||
options?: Array<string | SelectOption>;
|
options?: Array<string | SelectOption>;
|
||||||
/** Class for the outer label wrapper. */
|
/** Class for the outer label wrapper. */
|
||||||
@ -17,7 +18,7 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** Labeled native select styled to match Input. */
|
/** Labeled native select styled to match Input. */
|
||||||
export function Select({ label, hint, options = [], required, className, ...rest }: SelectProps) {
|
export function Select({ label, hint, error, options = [], required, className, ...rest }: SelectProps) {
|
||||||
return (
|
return (
|
||||||
<label className={cn('flex flex-col gap-1.5 font-sans', className)}>
|
<label className={cn('flex flex-col gap-1.5 font-sans', className)}>
|
||||||
{label && (
|
{label && (
|
||||||
@ -26,7 +27,7 @@ export function Select({ label, hint, options = [], required, className, ...rest
|
|||||||
{required && <span className="text-ruby-600"> *</span>}
|
{required && <span className="text-ruby-600"> *</span>}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<div className="relative bg-card rounded-md h-[42px] border border-border-default transition-[border-color,box-shadow] duration-150 focus-ring">
|
<div className={cn("relative bg-card rounded-md h-[42px] border transition-[border-color,box-shadow] duration-150 focus-ring", error ? "border-ruby-600" : "border-border-default")}>
|
||||||
<select
|
<select
|
||||||
required={required}
|
required={required}
|
||||||
className="w-full h-full border-none outline-none bg-transparent appearance-none pl-3 pr-9 font-sans text-base text-strong cursor-pointer"
|
className="w-full h-full border-none outline-none bg-transparent appearance-none pl-3 pr-9 font-sans text-base text-strong cursor-pointer"
|
||||||
@ -44,7 +45,9 @@ export function Select({ label, hint, options = [], required, className, ...rest
|
|||||||
</select>
|
</select>
|
||||||
<ChevronDown size={15} className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-faint" />
|
<ChevronDown size={15} className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-faint" />
|
||||||
</div>
|
</div>
|
||||||
{hint && <span className="text-xs text-faint">{hint}</span>}
|
{(hint || error) && (
|
||||||
|
<span className={cn('text-xs', error ? 'text-ruby-600' : 'text-faint')}>{error || hint}</span>
|
||||||
|
)}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user