Skip to content

Commit 4b02e48

Browse files
Signor1Signor1
committed
feat:[User Onboarding - Step 1] added step 1
1 parent 8080ae1 commit 4b02e48

File tree

3 files changed

+128
-9
lines changed

3 files changed

+128
-9
lines changed

‎frontend/app/onboarding/page.tsx‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Nav from "@/components/onboarding/Nav";
2+
import StepOne from "@/components/onboarding/StepOne";
3+
4+
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+
)
11+
}

‎frontend/components/onboarding/StepOne.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
'use client'
2+
import { useRouter } from 'next/navigation'
3+
import React, { useState } from 'react'
4+
5+
const StepOne = () => {
6+
const [accountName, setAccountName] = useState("")
7+
const [desc, setDesc] = useState("")
8+
9+
const router = useRouter()
10+
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+
}
30+
}
31+
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>
71+
72+
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>
78+
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>
94+
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>
107+
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+
)
115+
}
116+
117+
export default StepOne

0 commit comments

Comments
 (0)