Skip to content

Commit

Permalink
KIN-70 add kid + Login modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@IvanNapsterKE
IvanNapsterKE committed Jan 18, 2023
1 parent a491526 commit c4a4791
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 82 deletions.
118 changes: 55 additions & 63 deletions src/App/components/Dashboard/AddingKid/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,21 @@ const state = localStorage.getItem("kidState")


return (
<div className="w-3/4 m-auto">
<div className=" w-1/2 m-auto">

<div className="pt-8">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">
<h1 className="text-center text-3xl font-bold text-[#B124A3]">
Adding New Student Information
</h3>
<p className="mt-1 text-sm text-gray-500"> Studnet information </p>
</h1>

</div>
<form onSubmit={handleSubmit}>
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
<div className="sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
className=" text-lg font-medium text-[#B124A3]"
>
First name
</label>
Expand All @@ -63,15 +64,15 @@ const state = localStorage.getItem("kidState")
id="first-name"
placeholder="First name"
autoComplete="given-name"
className="block w-1/2 h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-[#B124A3]"
onChange={(e)=> setAddKid({...addKid, first_name: e.target.value})}
/>
</div>
</div>
<div className="sm:col-span-3">
<label
htmlFor="Second name"
className="block text-sm font-medium text-gray-700"
className="block text-lg font-medium text-[#B124A3]"
>
Second Name
</label>
Expand All @@ -82,16 +83,15 @@ const state = localStorage.getItem("kidState")
id="second_name"
autoComplete="family-name"
placeholder="Second name"
className="block w-1/2 h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-[#B124A3]"
onChange={(e)=> setAddKid({...addKid, second_name: e.target.value})}
/>
</div>
</div>

<div className="sm:col-span-3">
<label
htmlFor="surname"
className="block text-sm font-medium text-gray-700"
className="block text-lg font-medium text-[#B124A3]"
>
Surname
</label>
Expand All @@ -102,16 +102,38 @@ const state = localStorage.getItem("kidState")
id="surname"
autoComplete="family-name"
placeholder="Surname"
className="block w-1/2 h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-[#B124A3]"
onChange={(e)=> setAddKid({...addKid, surname: e.target.value})}
/>
</div>

</div>
<div className="sm:col-span-3">
<label
htmlFor="surname"
className="block text-lg font-medium text-[#B124A3]"
>
Admission Number
</label>
<div className="mt-1">
<input
type="number"
name="admission_number"
id="admission_number"
autoComplete="family-name"
placeholder="Admission Number"
className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-[#B124A3]"
onChange={(e)=> setAddKid({...addKid, admission_number: e.target.value})}
/>
</div>
</div>

<div className="sm:col-span-4">


<div className="md:col-span-6">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
className="block text-lg font-medium text-[#B124A3]"
>
Description of the student
</label>
Expand All @@ -122,46 +144,26 @@ const state = localStorage.getItem("kidState")
type="text"
placeholder="Write description Here"
autoComplete="description"
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full rounded-md border-gray-700 shadow-xl sm:text-lg"
onChange={(e)=> setAddKid({...addKid, description: e.target.value})}
/>
</div>
</div>

{/* <div className="sm:col-span-3">
<label
htmlFor="class"
className="block text-sm font-medium text-gray-700"
>
Class
</label>
<div className="mt-1">
<select
id="class"
name="class"
autoComplete="class"
className="block w-1/4 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div> */}

<div className="sm:col-span-3">
<label
htmlFor="Age"
className="block text-sm font-medium text-gray-700"
className="block text-lg font-medium text-[#B124A3]"
>
Age
{/* onChange={(e)=> setAddKid({...addKid, age: e.target.value})} */}
</label>
<div className="mt-1">
<div className="dropdown inline-block relative">
<select
id="age"
name="age of kid"
autoComplete="Age of kid "
className="block w-1/4 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="bg-gray-300 text-[#B124A3] font-semibold py-2 px-4 rounded inline-flex items-center mr-1 "
onChange={(e)=> setAddKid({...addKid, age: e.target.value})}
>
<option>1</option>
Expand All @@ -174,40 +176,30 @@ const state = localStorage.getItem("kidState")
<option>8</option>
</select>
</div>

</div>

<div className="sm:col-span-3">
<label
htmlFor="surname"
className="block text-sm font-medium text-gray-700"
>
Admission Number
</label>
<div className="mt-1">
<input
type="number"
name="admission_number"
id="admission_number"
autoComplete="family-name"
placeholder="Admission Number"
className="block w-1/2 h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
onChange={(e)=> setAddKid({...addKid, admission_number: e.target.value})}
/>
</div>
</div>

<div className="sm:col-span-4 w-2/3 rounded flex pl-0 items-center">
<button className="w-1/4 h-10 rounded border bg-gray-400" type="submit" >SAVE</button>
</div>
<div className="flex justify-center px-4 pt-4">
<div className="md:col-span-3 w-1/3 rounded flex items-center">
<button className="px-10 p-3 bg-[#B124A3] text-white rounded-md"
type="submit">
Save
</button>
</div>

<div className="sm:col-span-1 w-2/3 rounded flex pl-0 items-center">
<div className="sm:col-span-3 w1/2 rounded flex items-center">
<Link to="..">
<button className="w-full h-10 rounded border bg-gray-400">BACK</button>
<button className="px-10 p-3 bg-[#B124A3] text-white rounded-md"
type="submit">
Back
</button>
</Link>
</div>
</div>
</div>
</form>
</div>

</div>
);
}
Expand Down
38 changes: 19 additions & 19 deletions src/App/components/Login/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,25 @@ function Login() {
<Nav />
{/* */}
{modal ? (
<div className="modal items-center flex fixed italic bg-[#B124A3] rounded-md ">
<div className="h-48 w-48 bg-slate-50">
Login sucessfull{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
/>
</svg>
</div>
<div></div>
</div>
<div class="modal fade z-40 fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog relative w-auto pointer-events-none">
<div
class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
<div
class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
<h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalLabel">Login successful</h5>
<button type="button"
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body relative p-4">
You have successfully logged in.
</div>

</div>
</div>
</div>
) : null}
<hr className="border border-1"></hr>
<div className="flex justify-center">
Expand Down

0 comments on commit c4a4791

Please sign in to comment.