Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/Savy011/fullstackopen-exercises. My Exercise Submissions for FullStack Open fullstackopen.com/en
Something went wrong. Try again.
1.8 kB · 66 lines
JavaScript
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667import { Card, Typography, Box, List, ListItem, ListItemIcon, ListItemText,} from '@mui/material'import { Notes as NotesIcon } from '@mui/icons-material'import { useLocation } from 'react-router-dom'
const User = () => { const location = useLocation() const user = location.state return ( <Card sx={{ mt: 2, background: '#fffa', borderRadius: 3, border: 'solid', }} > <Typography variant="h4" sx={{ display: 'flex', justifyContent: 'center', m: 1, fontFamily: 'Spline Sans', }} > {user.name} </Typography> <Box sx={{ p: 2 }}> <Typography variant="h6" sx={{ display: 'flex', justifyContent: 'left', m: 1, fontFamily: 'Spline Sans', }} > <h4>Added Blogs:</h4> </Typography> <List> {user.blogs.map(blog => ( <ListItem key={blog.id} disablePadding > <ListItemIcon> <NotesIcon /> </ListItemIcon> <ListItemText primary={blog.title} /> </ListItem> ))} </List> </Box> </Card> )}
export default User