Commit 39b192c9 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

make responsive for profile

parent c99f1861
import { Box, Paper } from "@mui/material"; import {
Box,
Paper,
Table,
TableBody,
TableCell,
TableRow,
} from "@mui/material";
import React, { useContext } from "react"; import React, { useContext } from "react";
import { UserContext } from "./_app"; import { UserContext } from "./_app";
export default function Profile() { export default function Profile() {
const user = useContext(UserContext); const user = useContext(UserContext);
console.log(user.value); console.log(user.value);
const maxWidth = 30;
return ( return (
<> <>
{user.value?.token ? ( {user.value?.token ? (
...@@ -13,18 +22,36 @@ export default function Profile() { ...@@ -13,18 +22,36 @@ export default function Profile() {
<div className="gap-10 mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-[1520px]"> <div className="gap-10 mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-[1520px]">
<div className="mx-auto"> <div className="mx-auto">
<img <img
className="inline-block rounded-lg" className="inline-block w-[200px] h-[200px] sm:w-[300px] sm:h-[300px] rounded-lg object-cover"
width={300}
src={user.value.photo.length ? user.value.photo : "empty.jpg"} src={user.value.photo.length ? user.value.photo : "empty.jpg"}
alt="" alt=""
/> />
</div> </div>
<div className="lg:col-span-2 p-3"> <div className="lg:col-span-2 p-3 text-lg overflow-x-scroll">
<div>{user.value.name}</div> <Table>
<div>{user.value.email}</div> <TableBody>
<div className="text-lg">@{user.value.username}</div> <TableRow>
<div>{user.value.phone}</div> <TableCell sx={{ maxWidth }}>ชื่อ</TableCell>
<div>ที่อยู่ {user.value.address}</div> <TableCell>{user.value.name}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ maxWidth }}>อีเมล</TableCell>
<TableCell>{user.value.email}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ maxWidth }}>username</TableCell>
<TableCell>@{user.value.username}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ maxWidth }}>เบอร์โทร</TableCell>
<TableCell>{user.value.phone}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ maxWidth }}>ที่อยู่</TableCell>
<TableCell>{user.value.address}</TableCell>
</TableRow>
</TableBody>
</Table>
</div> </div>
</div> </div>
</Paper> </Paper>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment