mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init coursechapter + elements interface
This commit is contained in:
parent
f492baf276
commit
19b7dd650e
16 changed files with 542 additions and 75 deletions
|
|
@ -2,53 +2,57 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
import Link from "next/link";
|
||||
import { AuthContext } from "../security/AuthProvider";
|
||||
import { getBackendUrl } from "../../services/config";
|
||||
|
||||
export const HeaderProfileBox = () => {
|
||||
const auth: any = React.useContext(AuthContext);
|
||||
|
||||
|
||||
return (
|
||||
<ProfileArea>
|
||||
{" "}
|
||||
<span>
|
||||
HeaderProfileBox <br /> isLogged : {String(auth.isAuthenticated)} <br /> user : {String(auth.userInfo.username)}
|
||||
</span>{" "}
|
||||
<UnidentifiedArea>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/login">
|
||||
<a>Login</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/signup">
|
||||
<a>Sign up</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</UnidentifiedArea>
|
||||
{!auth.isAuthenticated && (
|
||||
<UnidentifiedArea>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/login">
|
||||
<a>Login</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/signup">
|
||||
<a>Sign up</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</UnidentifiedArea>
|
||||
)}
|
||||
{auth.isAuthenticated && <AccountArea>
|
||||
<div>{auth.userInfo.username}</div>
|
||||
<div><img src={`${getBackendUrl()}content/uploads/img/${auth.userInfo.avatar_url}`} alt="" /></div>
|
||||
</AccountArea>}
|
||||
</ProfileArea>
|
||||
);
|
||||
};
|
||||
|
||||
const AccountArea = styled.div`
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
|
||||
div{
|
||||
margin-right: 10px;
|
||||
}
|
||||
img{
|
||||
width: 29px;
|
||||
border-radius: 19px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ProfileArea = styled.div`
|
||||
display: flex;
|
||||
place-items: stretch;
|
||||
place-items: center;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 32px;
|
||||
right: -20px;
|
||||
padding: 6px;
|
||||
font-size: 12px;
|
||||
margin: 3px;
|
||||
// blur
|
||||
background-color: #19191960;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const UnidentifiedArea = styled.div`
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue