Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat : added a new profile page to help teachers create their profile. #254

Closed
wants to merge 3 commits into from
Closed

feat : added a new profile page to help teachers create their profile. #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71c986b
Created a profile page for teachers.
PrajwalPisal Feb 22, 2023
f23b825
Merge branch 'main' of https://github.com/PrajwalPisal/classroom
PrajwalPisal Feb 22, 2023
bb99238
Co-authored-by: Akhil Kalakota <[email protected]>
PrajwalPisal Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions pages/classes/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,9 @@ export default function Classes({
<div className='border-solid border-2 pl-4 pr-4'>
<Link href={'/'}> Menu</Link>
</div>
<div className='border-solid border-2 pl-4 pr-4'>
<Link href={'/profile'}> Profile</Link>
</div>
</Navbar>

<div className={'text-center p-10'}>
Expand Down
3 changes: 3 additions & 0 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ export default function Home() {
<div className='border-solid border-2 pl-4 pr-4'>
<Link href={'/'}> Menu</Link>
</div>
<div className='border-solid border-2 pl-4 pr-4'>
<Link href={'/profile'}> Profile</Link>
</div>
</Navbar>
<div className={styles.boxx}>
<h1 className='text-[40px] text-center big-heading underline'>
Expand Down
117 changes: 117 additions & 0 deletions pages/profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import { useState, useEffect } from 'react';
import Navbar from '../components/navbar';
import Link from 'next/link';

function Profile() {
// Set up initial user data
const [userData, setUserData] = useState({
name: '',
email: '',
university: '',
bio: ''
});

// Load user data from localStorage if available.
useEffect(() => {
if (localStorage.getItem('userData')) {
setUserData(JSON.parse(localStorage.getItem('userData')));
}
}, []);

// Update user data and localStorage
function handleSave() {
localStorage.setItem('userData', JSON.stringify(userData));
}

return (
<div className='bg-zinc-200 opacity-100 fixed inset-0 z-50'>
<Navbar>
<div className='border-solid border-2 pl-4 pr-4'>
<Link href={'/classes'}>Classes</Link>
</div>
<div className='border-solid border-2 pl-4 pr-4'>
<Link href={'/'}> Menu</Link>
</div>
</Navbar>
<div className='flex h-screen justify-center items-center'>
<div className='flex-col justify-center bg-[#0a0a23] py-12 px-24 border-4 border-sky-500 rounded-x1 overflow-auto max-h-screen'>
<div className='flex text-lg text-white justify-center items-center'>
<div className='profile'>
<div className='profile-pic'>
<img
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use next/image as pointed out by codefactor

src={`https://via.placeholder.com/150x150?text=${userData.name
.charAt(0)
.toUpperCase()}`}
alt='Profile picture'
/>
</div>
<div className='username'>{userData.name} </div>
<form className='mt-8 space-y-8'>
<div className='rounded-md text-white shadow-sm -space-y-px'>
<label htmlFor='name'>Name: </label>
<div className='text-black'>
<input
id='name'
type='text'
value={userData.name}
onChange={e =>
setUserData({ ...userData, name: e.target.value })
}
/>
</div>
</div>
<div className='rounded-md shadow-sm -space-y-px'>
<label htmlFor='email'>Email: </label>
<div className='text-black'>
<input
id='email'
type='email'
value={userData.email}
onChange={e =>
setUserData({ ...userData, email: e.target.value })
}
/>
</div>
</div>
<div className='rounded-md shadow-sm -space-y-px'>
<label htmlFor='university'>University: </label>
<div className='text-black'>
<input
id='university'
type='text'
value={userData.university}
onChange={e =>
setUserData({ ...userData, university: e.target.value })
}
/>
</div>
</div>
<div className='rounded-md shadow-sm -space-y-px'>
<label htmlFor='bio'>Bio: </label>
<div className='text-black'>
<textarea
id='bio'
value={userData.bio}
onChange={e =>
setUserData({ ...userData, bio: e.target.value })
}
></textarea>
</div>
</div>
<button
type='submit'
onClick={handleSave}
className=' rounded px-4 py-2 text-white bg-green-700'
>
Save changes
</button>
</form>
</div>
</div>
</div>
</div>
</div>
);
}

export default Profile;