1- import React , { useContext } from " react" ;
1+ import React , { useContext , useState } from ' react' ;
22import { Context } from "../store/appContext" ;
3- import rigoImageUrl from "../../img/rigo-baby.jpg" ;
4- import "../../styles/home.css" ;
53import { Link } from "react-router-dom" ;
6-
4+ import { Eye , EyeOff } from 'lucide-react' ;
75
86
97export const Home = ( ) => {
108 const { store, actions } = useContext ( Context ) ;
11-
9+ const [ showPassword , setShowPassword ] = useState ( false ) ;
10+ const [ formData , setFormData ] = useState ( {
11+ name : '' ,
12+ email : '' ,
13+ password : '' ,
14+ confirmPassword : ''
15+ } ) ;
16+ const handleInputChange = ( e ) => {
17+ const { name, value } = e . target ;
18+ setFormData ( prevState => ( {
19+ ...prevState ,
20+ [ name ] : value
21+ } ) ) ;
22+ } ;
23+ const handleSubmit = ( e ) => {
24+ e . preventDefault ( ) ;
25+ // Add signup logic here
26+ console . log ( 'Signup data:' , formData ) ;
27+ } ;
1228 return (
13- < div className = "text-center mt-5" >
14- < h1 > Hello Rigo!!</ h1 >
15- < p >
16- < img src = { rigoImageUrl } />
17- </ p >
18- < div className = "alert alert-info" >
19- { store . message || "Loading message from the backend (make sure your python backend is running)..." }
20- </ div >
21- < p >
22- This boilerplate comes with lots of documentation:{ " " }
23- < a href = "https://start.4geeksacademy.com/starters/react-flask" >
24- Read documentation
25- </ a >
26- < Link to = "/profile" > < span > PROFILE-VIEW </ span > </ Link >
29+ < div className = "min-h-screen flex items-center justify-center bg-white p-4" >
30+ < div className = "w-full max-w-4xl bg-white shadow-md rounded-lg overflow-hidden flex" >
31+ { /* Left Side - Description */ }
32+ < div className = "w-1/2 bg-[#E6EDF3] p-8 flex flex-col justify-center" >
33+ < h2 className = "text-2xl font-bold text-[#24292F] mb-4" > Become a member</ h2 >
34+ < p className = "text-[#57606A]" >
35+ Onmino helps you organize your ideas, tasks, and projects simply and efficiently. Start today!
2736 </ p >
37+ </ div >
38+
39+ { /* Right Side - Signup Form */ }
40+ < div className = "w-1/2 p-8 bg-white" >
41+ < form onSubmit = { handleSubmit } >
42+ < div className = "mb-4" >
43+ < input
44+ type = "text"
45+ name = "name"
46+ placeholder = "Name"
47+ value = { formData . name }
48+ onChange = { handleInputChange }
49+ className = "w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
50+ required
51+ />
52+ </ div >
53+ < div className = "mb-4" >
54+ < input
55+ type = "email"
56+ name = "email"
57+ placeholder = "Email"
58+ value = { formData . email }
59+ onChange = { handleInputChange }
60+ className = "w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
61+ required
62+ />
63+ </ div >
64+ < div className = "mb-4 relative" >
65+ < input
66+ type = { showPassword ? "text" : "password" }
67+ name = "password"
68+ placeholder = "Password"
69+ value = { formData . password }
70+ onChange = { handleInputChange }
71+ className = "w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
72+ required
73+ />
74+ < button
75+ type = "button"
76+ onClick = { ( ) => setShowPassword ( ! showPassword ) }
77+ className = "absolute right-3 top-1/2 transform -translate-y-1/2 text-[#57606A]"
78+ >
79+ { showPassword ? < EyeOff size = { 20 } /> : < Eye size = { 20 } /> }
80+ </ button >
81+ </ div >
82+ < div className = "mb-4 relative" >
83+ < input
84+ type = { showPassword ? "text" : "password" }
85+ name = "confirmPassword"
86+ placeholder = "Confirm Password"
87+ value = { formData . confirmPassword }
88+ onChange = { handleInputChange }
89+ className = "w-full px-3 py-2 border border-[#D0D7DE] rounded-md focus:outline-none focus:ring-2 focus:ring-[#1F6FEB]"
90+ required
91+ />
92+ </ div >
93+ < button
94+ type = "submit"
95+ className = "w-full bg-[#1F6FEB] text-white py-2 rounded-md hover:bg-[#1160D3] transition duration-300"
96+ >
97+ Register
98+ </ button >
99+ </ form >
100+ </ div >
28101 </ div >
102+ </ div >
29103 ) ;
30- } ;
104+ } ;
0 commit comments