-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #69 from isd-sgcu/main
Main
- Loading branch information
Showing
4 changed files
with
104 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
'use client'; | ||
|
||
import Border from '@/components/Border'; | ||
import { Suspense } from 'react'; | ||
import UserCard from '@/components/UserCard'; | ||
|
||
// For dev (delete soon) | ||
export default function page() { | ||
return ( | ||
<Suspense> | ||
<Login /> | ||
</Suspense> | ||
); | ||
} | ||
|
||
function Login() { | ||
return ( | ||
<Border variant="dark-pink"> | ||
<UserCard /> | ||
|
||
<div className="w-4/5 h-4/5 "> | ||
<UserCard /> | ||
</div> | ||
|
||
{/* Break if the size is too small because the texts' sizes */} | ||
<div className="w-1/2 h-1/2"> | ||
<UserCard /> | ||
</div> | ||
</Border> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import React from 'react'; | ||
import TV from '@public/user-card/tv.png'; | ||
import EditIcon from '@public/user-card/edit-icon.svg'; | ||
import Image from 'next/image'; | ||
import { useAuth } from '@/context/AuthContext'; | ||
import { useRouter } from 'next/navigation'; | ||
|
||
const UserCard = () => { | ||
const router = useRouter(); | ||
const { user } = useAuth(); | ||
const name = `${user?.firstname} ${user?.lastname}`; | ||
const studentId = user?.email.split('@')[0]; | ||
const photo_url = user?.photo_url; | ||
|
||
return ( | ||
<div className="relative w-full h-full flex justify-center items-center p-4"> | ||
<Image | ||
src={TV} | ||
alt="tv" | ||
className="w-full h-auto object-cover" | ||
/> | ||
<div className="absolute top-[15%] left-[9%] w-[65%] h-[65%] flex flex-col items-center justify-center p-4 bg-blue-900 rounded-lg"> | ||
<div className="w-[35%] h-[50%] overflow-hidden rounded-full"> | ||
{photo_url && ( | ||
<img | ||
src={photo_url} | ||
alt="user-picture" | ||
className="w-full h-full object-cover" | ||
/> | ||
)} | ||
</div> | ||
<div className="text-center"> | ||
<h2 className="text-sm text-yellow-400 font-bold mt-2">{name}</h2> | ||
<p className="text-xs text-white">รหัสนิสิต {studentId}</p> | ||
</div> | ||
</div> | ||
<div | ||
className="absolute top-[5%] right-[2%] w-[20%]" | ||
onClick={() => router.push('/edit')} | ||
> | ||
<Image | ||
src={EditIcon} | ||
alt="edit-icon" | ||
/> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default UserCard; |