rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: refactor files

Browse source 
feat: refactor more files

feat: uppercase component folder 1/2

feat: uppercase component folder 2/2
This commit is contained in:
swve 2022-12-02 22:23:52 +01:00
parent a371394670
commit d361e68dc0
31 changed files with 101 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

78
front/components/Security/HeaderProfileBox.tsx Normal file
View file

@ -0,0 +1,78 @@
import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { AuthContext } from "./AuthProvider";
import Avvvatars from "avvvatars-react";
export const HeaderProfileBox = () => {
const auth: any = React.useContext(AuthContext);
return (
<ProfileArea>
{!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.user_object.username}</div>
<div>
<Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
</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;
`;
const UnidentifiedArea = styled.div`
display: flex;
place-items: stretch;
flex-grow: 1;
ul {
display: flex;
place-items: center;
list-style: none;
padding-left: 20px;
li {
padding-right: 20px;
font-size: 16px;
font-weight: 500;
color: #171717;
}
}
`;