66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import React from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import NavBar from "./shared/NavBar";
|
|
import NavBarUser from "./shared/NavBarUser";
|
|
import config from "../config";
|
|
import {Card, CardContent, CardMedia, Chip, Typography} from "@material-ui/core";
|
|
|
|
import feeds from "./dummyData/feeds.json";
|
|
const feedCategories = Array.from(new Set(feeds.map(i => i.tags).flat()));
|
|
|
|
function User() {
|
|
const { username } = useParams();
|
|
// TODO: Grab these values from the API
|
|
const name = "Ceda EI";
|
|
const about = "I am a 20-year old student from India who has an interest in system administration and programming. I am a Linux user who likes to rice his desktop and have some experience managing servers.";
|
|
return (<>
|
|
<NavBar>
|
|
<NavBarUser />
|
|
</NavBar>
|
|
<div className="user base">
|
|
<div className="user-card">
|
|
<Card>
|
|
<CardMedia
|
|
image={`${config.profileServer}/${username}.jpg`}
|
|
title={username}
|
|
component="img"
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h2" component="h1">
|
|
{name}
|
|
</Typography>
|
|
<Typography variant="body2" component="h2">
|
|
@{username}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="user-profile">
|
|
<Card>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h2">
|
|
About Me
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
{about}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
<Card style={{ marginTop: "2em" }}>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="h2">
|
|
Interests
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
{feedCategories.map((tag, idx) => <Chip label={tag} key={idx} style={{marginRight: "1em", marginBottom: "1em"}}/>)}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
</div>
|
|
</>);
|
|
}
|
|
|
|
export default User;
|