feat: init coursechapter + elements interface

This commit is contained in:
swve 2022-10-22 23:03:36 +02:00
parent f492baf276
commit 19b7dd650e
16 changed files with 542 additions and 75 deletions

View file

@ -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`