Skip to content

Commit 01062ab

Browse files
DanielEmmanuel1DanielEmmanuel1
authored
Merge pull request #12 from SebasHidalgo/feature/create-step-2-page
feat: create the step 2 page
2 parents d39460b + 9d085ab commit 01062ab

File tree

7 files changed

+352
-108
lines changed

7 files changed

+352
-108
lines changed

‎frontend/app/onboarding/layout.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Nav from '@/components/onboarding/Nav'
2+
import StepIndicators from '@/components/onboarding/StepIndicators'
3+
4+
export default function layout({
5+
children,
6+
}: Readonly<{
7+
children: React.ReactNode
8+
}>) {
9+
return (
10+
<main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden">
11+
<Nav />
12+
<section className="max-w-2xl mx-auto md:mt-28 mt-20">
13+
<div className="w-full flex flex-col items-center gap-6">
14+
{/* Step Indicators */}
15+
<StepIndicators />
16+
17+
{children}
18+
</div>
19+
</section>
20+
</main>
21+
)
22+
}

‎frontend/app/onboarding/step1/page.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import Nav from '@/components/onboarding/Nav'
21
import StepOne from '@/components/onboarding/StepOne'
32

43
export default function UserOnBoarding() {
5-
return (
6-
<main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden">
7-
<Nav />
8-
<StepOne />
9-
</main>
10-
)
4+
return <StepOne />
115
}

‎frontend/app/onboarding/step2/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import StepTwo from '@/components/onboarding/StepTwo'
2+
3+
export default function StepTwoPage() {
4+
return <StepTwo />
5+
}

‎frontend/components/onboarding/OnboardingCard.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
interface OnboardingCardProps {
2+
title: string
3+
children: React.ReactNode
4+
}
5+
6+
export default function OnboardingCard({
7+
title,
8+
children,
9+
}: OnboardingCardProps) {
10+
return (
11+
<div className="rounded-[10px] bg-[#1C1D1F] w-full overflow-hidden">
12+
<div className="bg-[#272729] py-[18px] md:px-[26px] px-4 w-full h-[62px]">
13+
<h4 className="text-white font-[700] text-xl">{title}</h4>
14+
</div>
15+
{children}
16+
</div>
17+
)
18+
}

‎frontend/components/onboarding/StepIndicators.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
'use client'
2+
3+
import { usePathname } from 'next/navigation'
4+
5+
export default function StepIndicators() {
6+
const pathname = usePathname()
7+
8+
const isStep2 = pathname.includes('step2')
9+
const isStep3 = pathname.includes('step3')
10+
11+
return (
12+
<div className="w-full flex justify-between items-center md:px-8 relative">
13+
{/* Horizontal Lines */}
14+
<div
15+
className={`${isStep2 || isStep3 ? 'bg-[#6F2FCE]' : 'bg-[#8E9BAE]'} absolute top-[22.5px] md:left-[18%] left-[23%] w-[15%] md:w-[25%] h-[1px]`}
16+
></div>
17+
<div
18+
className={`${isStep3 ? 'bg-[#6F2FCE]' : 'bg-[#8E9BAE]'} absolute top-[22.5px] md:right-[18%] right-[23%] w-[15%] md:w-[25%] h-[1px]`}
19+
></div>
20+
21+
{/* Step 1 */}
22+
<div className="flex flex-col items-center gap-8 relative">
23+
<div className="bg-[#6F2FCE] text-white flex justify-center items-center w-[45px] h-[45px] rounded-full font-[700] text-lg z-10">
24+
1
25+
</div>
26+
<h4 className="text-white text-sm text-center font-[400]">
27+
Account Details
28+
</h4>
29+
</div>
30+
31+
{/* Step 2 */}
32+
<div className="flex flex-col items-center gap-8 relative">
33+
<div
34+
className={`${isStep2 || isStep3 ? 'bg-[#6F2FCE] text-white ' : 'bg-[#1C1D1F] text-[#8E9BAE]'} flex justify-center items-center w-[45px] h-[45px] rounded-full font-[700] text-lg z-10`}
35+
>
36+
2
37+
</div>
38+
<h4
39+
className={`${isStep2 || isStep3 ? 'text-white ' : 'text-[#8E9BAE]'} text-sm text-center font-[400]`}
40+
>
41+
Members & Threshold
42+
</h4>
43+
</div>
44+
45+
{/* Step 3 */}
46+
<div className="flex flex-col items-center gap-8 relative">
47+
<div
48+
className={`${isStep3 ? 'bg-[#6F2FCE] text-white ' : 'bg-[#1C1D1F] text-[#8E9BAE]'} flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10`}
49+
>
50+
3
51+
</div>
52+
<h4
53+
className={`${isStep3 ? 'text-white ' : 'text-[#8E9BAE]'} text-sm text-center font-[400]`}
54+
>
55+
Confirm & Setup
56+
</h4>
57+
</div>
58+
</div>
59+
)
60+
}

‎frontend/components/onboarding/StepOne.tsx‎

Lines changed: 92 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,115 +3,106 @@ import { useRouter } from 'next/navigation'
33
import React, { useState } from 'react'
44

55
const StepOne = () => {
6-
const [accountName, setAccountName] = useState("")
7-
const [desc, setDesc] = useState("")
6+
const [accountName, setAccountName] = useState('')
7+
const [desc, setDesc] = useState('')
88

9-
const router = useRouter()
9+
const router = useRouter()
1010

11-
/**
12-
* Handles form submission for Step 1 of the onboarding process.
13-
* Checks if both the account name and description inputs are not empty.
14-
* If not, it throws an error.
15-
* If valid, logs the inputs to console and navigates to Step 2.
16-
* If an error occurs during navigation, it's logged to console.
17-
*/
18-
const handleSubmitStepOne = async () => {
19-
if (!accountName && !desc) {
20-
throw Error("Inputs are required");
21-
}
22-
23-
try {
24-
console.log({ accountName, description: desc });
25-
// Necessay submit logic
26-
router.push("/onboarding/step2");
27-
} catch (error) {
28-
console.error(error)
29-
}
11+
/**
12+
* Handles form submission for Step 1 of the onboarding process.
13+
* Checks if both the account name and description inputs are not empty.
14+
* If not, it throws an error.
15+
* If valid, logs the inputs to console and navigates to Step 2.
16+
* If an error occurs during navigation, it's logged to console.
17+
*/
18+
const handleSubmitStepOne = async () => {
19+
if (!accountName && !desc) {
20+
throw Error('Inputs are required')
3021
}
3122

32-
return (
33-
<section className="max-w-2xl mx-auto md:mt-28 mt-20">
34-
<main className='w-full flex flex-col items-center gap-6'>
35-
{/* Step Indicators */}
36-
<div className="w-full flex justify-between items-center md:px-8 relative">
37-
{/* Horizontal Lines */}
38-
<div className="absolute top-[22.5px] md:left-[18%] left-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE]"></div>
39-
<div className="absolute top-[22.5px] md:right-[18%] right-[23%] w-[15%] md:w-[25%] h-[1px] bg-[#8E9BAE]"></div>
40-
41-
{/* Step 1 */}
42-
<div className="flex flex-col items-center gap-8 relative">
43-
<div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#6F2FCE] text-white font-[700] text-lg z-10">
44-
1
45-
</div>
46-
<h4 className="text-white text-sm text-center font-[400]">Account Details</h4>
47-
</div>
48-
49-
{/* Step 2 */}
50-
<div className="flex flex-col items-center gap-8 relative">
51-
<div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10">
52-
2
53-
</div>
54-
<h4 className="text-[#8E9BAE] text-sm text-center font-[400]">Members & Threshold</h4>
55-
</div>
56-
57-
{/* Step 3 */}
58-
<div className="flex flex-col items-center gap-8 relative">
59-
<div className="flex justify-center items-center w-[45px] h-[45px] rounded-full bg-[#1C1D1F] text-[#8E9BAE] font-[700] text-lg z-10">
60-
3
61-
</div>
62-
<h4 className="text-[#8E9BAE] text-sm text-center font-[400]">Confirm & Setup</h4>
63-
</div>
64-
</div>
65-
66-
{/* Writeup */}
67-
<div className='max-w-sm my-12'>
68-
<h1 className='text-center text-white font-[700] text-[40px] leading-[47.42px]'>Secure Your Digital Assets Seamlessly</h1>
69-
<p className='font-[400] text-[16px] leading-[25px] text-center text-[#8E9BAE] lg:px-8 mt-3'>Name your Spherre account, Spherre ensures seamless integration, giving you full control over your digital assets.</p>
70-
</div>
23+
try {
24+
console.log({ accountName, description: desc })
25+
// Necessay submit logic
26+
router.push('/onboarding/step2')
27+
} catch (error) {
28+
console.error(error)
29+
}
30+
}
7131

32+
return (
33+
<>
34+
{/* Writeup */}
35+
<div className="max-w-sm my-12">
36+
<h1 className="text-center text-white font-[700] text-[40px] leading-[47.42px]">
37+
Secure Your Digital Assets Seamlessly
38+
</h1>
39+
<p className="font-[400] text-[16px] leading-[25px] text-center text-[#8E9BAE] lg:px-8 mt-3">
40+
Name your Spherre account, Spherre ensures seamless integration,
41+
giving you full control over your digital assets.
42+
</p>
43+
</div>
7244

73-
{/* form */}
74-
<div className='rounded-[10px] bg-[#1C1D1F] w-full overflow-hidden'>
75-
<div className='bg-[#272729] py-[18px] md:px-[26px] px-4 w-full h-[62px]'>
76-
<h4 className="text-white font-[700] text-xl">Create Account</h4>
77-
</div>
45+
{/* form */}
46+
<div className="rounded-[10px] bg-[#1C1D1F] w-full overflow-hidden">
47+
<div className="bg-[#272729] py-[18px] md:px-[26px] px-4 w-full h-[62px]">
48+
<h4 className="text-white font-[700] text-xl">Create Account</h4>
49+
</div>
7850

79-
{/* Inputs */}
80-
<form onSubmit={handleSubmitStepOne} className='w-full flex flex-col gap-6 py-4 md:px-[26px] px-4'>
81-
{/* Account name */}
82-
<div className='w-full'>
83-
<label htmlFor="accountName" className='font-[400] text-[14px]leading-[24px] text-white mb-1 block'>Spherre Account Name</label>
84-
<input
85-
type='text'
86-
name='accountName'
87-
id='accountName'
88-
value={accountName}
89-
onChange={(e) => setAccountName(e.target.value)}
90-
className='w-full border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none'
91-
placeholder='Enter a team name'
92-
required />
93-
</div>
51+
{/* Inputs */}
52+
<form
53+
onSubmit={handleSubmitStepOne}
54+
className="w-full flex flex-col gap-6 py-4 md:px-[26px] px-4"
55+
>
56+
{/* Account name */}
57+
<div className="w-full">
58+
<label
59+
htmlFor="accountName"
60+
className="font-[400] text-[14px]leading-[24px] text-white mb-1 block"
61+
>
62+
Spherre Account Name
63+
</label>
64+
<input
65+
type="text"
66+
name="accountName"
67+
id="accountName"
68+
value={accountName}
69+
onChange={(e) => setAccountName(e.target.value)}
70+
className="w-full border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none"
71+
placeholder="Enter a team name"
72+
required
73+
/>
74+
</div>
9475

95-
{/* Description */}
96-
<div className='w-full'>
97-
<label htmlFor="description" className='font-[400] text-[14px]leading-[24px] text-white mb-1 block'>Spherre Description</label>
98-
<textarea
99-
name='description'
100-
id="description"
101-
value={desc}
102-
onChange={(e) => setDesc(e.target.value)}
103-
className='w-full h-[100px] border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none resize-y shadow-[0px_1.08px_2.16px_0px_#1018280A]'
104-
placeholder='Write here...'
105-
required></textarea>
106-
</div>
76+
{/* Description */}
77+
<div className="w-full">
78+
<label
79+
htmlFor="description"
80+
className="font-[400] text-[14px]leading-[24px] text-white mb-1 block"
81+
>
82+
Spherre Description
83+
</label>
84+
<textarea
85+
name="description"
86+
id="description"
87+
value={desc}
88+
onChange={(e) => setDesc(e.target.value)}
89+
className="w-full h-[100px] border border-[#292929] rounded-[7px] placeholder:text-[#8E9BAE] px-4 py-3 bg-transparent outline-none resize-y shadow-[0px_1.08px_2.16px_0px_#1018280A]"
90+
placeholder="Write here..."
91+
required
92+
></textarea>
93+
</div>
10794

108-
{/* Button */}
109-
<button type='submit' className='w-full h-[50px] flex justify-center items-center bg-white shadow-[0px_1.08px_2.16px_0px_#1018280A] text-[#101213] font-[500] text-base rounded-[7px]'>Continue</button>
110-
</form>
111-
</div>
112-
</main>
113-
</section>
114-
)
95+
{/* Button */}
96+
<button
97+
type="submit"
98+
className="w-full h-[50px] flex justify-center items-center bg-white shadow-[0px_1.08px_2.16px_0px_#1018280A] text-[#101213] font-[500] text-base rounded-[7px]"
99+
>
100+
Continue
101+
</button>
102+
</form>
103+
</div>
104+
</>
105+
)
115106
}
116107

117-
export default StepOne
108+
export default StepOne

0 commit comments

Comments
 (0)