Naufal AzmiandGitHub
228f92e9ed
* feat: responsive * fix: success register * feat: auth login responsive && auth login implementation * fix: login page button disabled & register page * fix: conflict * fix: button disabled when loading * feat: register and otp integration * Update middleware.ts * feat: OTP Resend * fix: minor * stash * feat: mentor register pages * feat: mentor status page pending and success
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import {
|
|
FC,
|
|
ReactElement,
|
|
SelectHTMLAttributes,
|
|
} from 'react';
|
|
import { cn } from '@imphnen-frontend-service/utils';
|
|
|
|
type TSelectSize = 'sm' | 'md' | 'lg';
|
|
type Width = 'standard' | 'custom';
|
|
|
|
type TSelectProps = Omit<
|
|
SelectHTMLAttributes<HTMLSelectElement>,
|
|
'size'
|
|
> & {
|
|
size?: TSelectSize;
|
|
widthform?: Width;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const sizeClasses: Record<TSelectSize, string> = {
|
|
sm: 'text-[10px] max-h-[34px]',
|
|
md: 'text-[12px] max-h-[36px]',
|
|
lg: 'text-[15px] max-h-[38px]',
|
|
};
|
|
|
|
const disabledClass =
|
|
'opacity-50 hover:border-neutral-200 cursor-not-allowed';
|
|
|
|
export const Select: FC<TSelectProps> = ({
|
|
size = 'md',
|
|
widthform = 'standard',
|
|
disabled,
|
|
className,
|
|
children,
|
|
...rest
|
|
}): ReactElement => {
|
|
const mergedClassName = cn(
|
|
`appearance-none px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md`,
|
|
sizeClasses[size],
|
|
widthform === 'standard' && 'min-w-70',
|
|
disabled && disabledClass,
|
|
className
|
|
);
|
|
|
|
return (
|
|
<select className={mergedClassName} disabled={disabled} {...rest}>
|
|
{children}
|
|
</select>
|
|
);
|
|
};
|