Fakultas Ilmu Komputer UI

Commit 4bdbccbc authored by Shafiya Adzhani's avatar Shafiya Adzhani
Browse files

[GREEN] implement stepper after using mock

parent 6ef45e64
Pipeline #72593 canceled with stages
import React from 'react'
import PropTypes from 'prop-types'
const Stepper = ({currentPage, setCurrentPage}) => {
const Stepper = ({currentPage, handleSubmit, onSubmit, register, setValue}) => {
return (
<div className="flex flex-row justify-between items-center px-12 lg:px-48 lg:px-36 xl:px-48 2xl:px-48 mx-42 lg:mx-64 xl:mx-72 2xl:mx-72 pt-28 pb-14">
<div
className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-1"
>
<button
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="page"
type="submit"
value="1"
ref={register({})}
className={`reguler-text font-bold border-2 border-darkblue rounded-full h-9 w-9 flex items-center justify-center
${
currentPage == 1
......@@ -16,10 +21,11 @@ const Stepper = ({currentPage, setCurrentPage}) => {
: `bg-darkblue text-white`
}`}
data-testid={`${currentPage == 1 ? `step-1-white` : `step-1-blue`}`}
onClick={() => setCurrentPage(1)}
>
1
</button>
onClick={() => {
setValue('page', '1')
}}
></input>
</form>
<p className="small-text text-darkblue text-center font-bold absolute top-12">
Profile <br></br> Perusahaan
</p>
......@@ -36,7 +42,12 @@ const Stepper = ({currentPage, setCurrentPage}) => {
className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-2"
>
<button
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="page"
type="submit"
value="2"
ref={register({})}
className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
${
currentPage == 1 &&
......@@ -57,10 +68,11 @@ const Stepper = ({currentPage, setCurrentPage}) => {
? `step-2-white`
: `step-2-blue`
}`}
onClick={() => setCurrentPage(2)}
>
2
</button>
onClick={() => {
setValue('page', '2')
}}
></input>
</form>
<p
className={`small-text text-gray-400 text-center font-bold absolute top-12
${
......@@ -82,7 +94,11 @@ const Stepper = ({currentPage, setCurrentPage}) => {
className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-3"
>
<button
<form onSubmit={handleSubmit(onSubmit)}>
<input
name="page"
type="submit"
value="3"
className={`reguler-text font-bold border-2 rounded-full h-10 w-10 flex items-center justify-center
${
currentPage == 3
......@@ -90,10 +106,12 @@ const Stepper = ({currentPage, setCurrentPage}) => {
: `bg-gray-200 text-gray-400 border-gray-200`
}`}
data-testid={`${currentPage == 3 ? `step-3-white` : `step-3-gray`}`}
onClick={() => setCurrentPage(3)}
>
3
</button>
onClick={() => {
setValue('page', '3')
}}
ref={register({})}
></input>
</form>
<p
className={`small-text text-center font-bold absolute top-12
${
......@@ -109,7 +127,10 @@ const Stepper = ({currentPage, setCurrentPage}) => {
Stepper.propTypes = {
currentPage: PropTypes.number,
setCurrentPage: PropTypes.func,
onSubmit: PropTypes.func,
register: PropTypes.func,
handleSubmit: PropTypes.func,
setValue: PropTypes.func,
}
export default Stepper
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment