diff --git a/apps/dimentorin/src/app/auth/login/page.tsx b/apps/dimentorin/src/app/auth/login/page.tsx index 152f955..20d405a 100644 --- a/apps/dimentorin/src/app/auth/login/page.tsx +++ b/apps/dimentorin/src/app/auth/login/page.tsx @@ -51,6 +51,11 @@ export const Components: FC = (): ReactElement => { Daftar Disini +
+ + Daftar Sebagai Mentor + +
Or diff --git a/apps/dimentorin/src/app/auth/register-mentor/layout.tsx b/apps/dimentorin/src/app/auth/register-mentor/layout.tsx new file mode 100644 index 0000000..2d8a74d --- /dev/null +++ b/apps/dimentorin/src/app/auth/register-mentor/layout.tsx @@ -0,0 +1,12 @@ +import { FC, ReactElement } from 'react'; +import { Outlet } from 'react-router-dom'; + +export const AppLayout: FC = (): ReactElement => { + return ( +
+ +
+ ); +}; + +export default AppLayout; diff --git a/apps/dimentorin/src/app/auth/register-mentor/page.tsx b/apps/dimentorin/src/app/auth/register-mentor/page.tsx new file mode 100644 index 0000000..88b6305 --- /dev/null +++ b/apps/dimentorin/src/app/auth/register-mentor/page.tsx @@ -0,0 +1,242 @@ +import { FC, ReactElement, useState } from 'react'; +import { ControlledInputField, RegisterResetBanner } from '@imphnen-frontend-service/ui/organisms'; +import { Button, Select } from '@imphnen-frontend-service/ui/atoms'; +import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons'; +import { InputField, RegisterMentorStep, SelectField } from '@imphnen-frontend-service/ui/molecules'; + +export const Components: FC = (): ReactElement => { + const [ step, setStep ] = useState(1) + + return ( +
+
+ +
+
+ + +

+ Register +

+
+ Welcome to the team, Mentor - powered by IMPHNEN +
+
+
+
+ +
+ + + + + +
+ +
+ + + + + +
+ + + + + + + +
+
+
+
+ + + + + + + + + + +
+
+
+
+ + + + + + + + + +
Silahkan isi dalam angka (Contoh:500.000)
+
+
+
+
+ + + +
+
+
+ + + +
+
+
+
+
+
+ ); +}; + +export default Components; diff --git a/apps/dimentorin/src/middleware.ts b/apps/dimentorin/src/middleware.ts index c9e06f7..b152567 100644 --- a/apps/dimentorin/src/middleware.ts +++ b/apps/dimentorin/src/middleware.ts @@ -14,6 +14,7 @@ const mappingPublicRoutes = [ '/auth/register/otp', '/auth/register/success', '/auth/new-password', + '/auth/register-mentor' ]; const mappingRoutePermissions = [ diff --git a/libs/ui/src/atoms/index.ts b/libs/ui/src/atoms/index.ts index dc8c232..7e95c4a 100644 --- a/libs/ui/src/atoms/index.ts +++ b/libs/ui/src/atoms/index.ts @@ -1,3 +1,4 @@ export * from './button'; export * from './input'; export * from './textarea'; +export * from './select' \ No newline at end of file diff --git a/libs/ui/src/atoms/select/index.ts b/libs/ui/src/atoms/select/index.ts new file mode 100644 index 0000000..93717d2 --- /dev/null +++ b/libs/ui/src/atoms/select/index.ts @@ -0,0 +1 @@ +export * from "./select" \ No newline at end of file diff --git a/libs/ui/src/atoms/select/select.tsx b/libs/ui/src/atoms/select/select.tsx new file mode 100644 index 0000000..6099cd6 --- /dev/null +++ b/libs/ui/src/atoms/select/select.tsx @@ -0,0 +1,50 @@ +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, + 'size' +> & { + size?: TSelectSize; + widthform?: Width; + disabled?: boolean; +}; + +const sizeClasses: Record = { + 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 = ({ + 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 ( + + ); +}; diff --git a/libs/ui/src/molecules/index.ts b/libs/ui/src/molecules/index.ts index ad99b97..9be333f 100644 --- a/libs/ui/src/molecules/index.ts +++ b/libs/ui/src/molecules/index.ts @@ -4,4 +4,6 @@ export * from './input-field'; export * from './pagination'; export * from './modal/modal'; export * from './stepper'; -export * from './accordion'; \ No newline at end of file +export * from './accordion'; +export * from './register-mentor-step'; +export * from './select-field' \ No newline at end of file diff --git a/libs/ui/src/molecules/register-mentor-step/index.ts b/libs/ui/src/molecules/register-mentor-step/index.ts new file mode 100644 index 0000000..ec7f44f --- /dev/null +++ b/libs/ui/src/molecules/register-mentor-step/index.ts @@ -0,0 +1 @@ +export * from './register-mentor-step'; \ No newline at end of file diff --git a/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx b/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx new file mode 100644 index 0000000..6043fd6 --- /dev/null +++ b/libs/ui/src/molecules/register-mentor-step/register-mentor-step.tsx @@ -0,0 +1,53 @@ +import { FC, ReactElement } from "react"; + +type TRegisterMentorStep = { + step: number; +}; + +const steps = [ + "Informasi Personal", + "Detail Mentor", + "Sesi Mentoring & Dokumen Pendukung", + "Informasi Akun Pribadi", +]; + +export const RegisterMentorStep: FC = ({ step }): ReactElement => { + const progressPercent = ((step - 1) / (steps.length - 1)) * 100; + + return ( +
+ {/* Garis dasar (abu/biru muda) */} +
+ + {/* Garis progress biru (dinamis) */} +
+ +
+ {steps.map((label, index) => { + const currentStep = index + 1; + const isActive = currentStep === step; + + return ( +
+ {/* Lingkaran angka */} +
+ {currentStep} +
+ {/* Label */} + {label} +
+ ); + })} +
+
+ ); +}; diff --git a/libs/ui/src/molecules/select-field/index.ts b/libs/ui/src/molecules/select-field/index.ts new file mode 100644 index 0000000..53becf7 --- /dev/null +++ b/libs/ui/src/molecules/select-field/index.ts @@ -0,0 +1 @@ +export * from './select-field' \ No newline at end of file diff --git a/libs/ui/src/molecules/select-field/select-field.tsx b/libs/ui/src/molecules/select-field/select-field.tsx new file mode 100644 index 0000000..82415e9 --- /dev/null +++ b/libs/ui/src/molecules/select-field/select-field.tsx @@ -0,0 +1,93 @@ +import { + FC, + ReactElement, + SelectHTMLAttributes, + DetailedHTMLProps, +} from 'react'; +import { Select } from '../../atoms'; // Custom select atom kamu +import { cn } from '@imphnen-frontend-service/utils'; + +export type TSelectSize = 'sm' | 'md' | 'lg'; + +export type TSelectFieldProps = Omit< + DetailedHTMLProps, HTMLSelectElement>, + 'size' +> & { + label: string; + size?: TSelectSize; + error?: string; + helperText?: string; + htmlFor?: string; + disabled?: boolean; +}; + +const sizeClasses: Record = { + lg: { + label: 'text-p3 font-medium', + helperText: 'text-label3 font-normal', + }, + md: { + label: 'text-label1 font-medium', + helperText: 'text-label2 font-normal', + }, + sm: { + label: 'text-label2 font-medium', + helperText: 'text-label2 font-normal', + }, +}; + +export const SelectField: FC = ({ + label, + size = 'md', + error, + helperText, + htmlFor, + disabled, + className, + children, + ...rest +}): ReactElement => { + return ( +
+ + + + + {error ? ( +

{error}

+ ) : ( + helperText && ( +

+ {helperText} +

+ ) + )} +
+ ); +}; diff --git a/libs/ui/src/organisms/auth-banner/auth-banner.tsx b/libs/ui/src/organisms/auth-banner/auth-banner.tsx index 8b230b4..16f3d39 100644 --- a/libs/ui/src/organisms/auth-banner/auth-banner.tsx +++ b/libs/ui/src/organisms/auth-banner/auth-banner.tsx @@ -6,14 +6,14 @@ import { FC, ReactElement } from "react"; function AuthBanner({text, href}: {text: string, href: string}){ return (
- Banner + Banner
-
+
Logo