forked from LaconicNetwork/icns-frontend
62 lines
1.1 KiB
TypeScript
62 lines
1.1 KiB
TypeScript
|
import { FunctionComponent } from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import color from "../../styles/color";
|
||
|
|
|
||
|
|
import ArrowLeftIcon from "../../public/images/svg/arrow-left.svg";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
export const BackButton: FunctionComponent = () => {
|
||
|
|
return (
|
||
|
|
<Container
|
||
|
|
onClick={() => {
|
||
|
|
location.href = "/";
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ContentContainer>
|
||
|
|
<IconContainer>
|
||
|
|
<Image
|
||
|
|
src={ArrowLeftIcon}
|
||
|
|
fill={true}
|
||
|
|
sizes="1rem"
|
||
|
|
alt="arrow left icon"
|
||
|
|
/>
|
||
|
|
</IconContainer>
|
||
|
|
<div>BACK</div>
|
||
|
|
</ContentContainer>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Container = styled.div`
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.7rem 0.5rem;
|
||
|
|
|
||
|
|
font-family: "Inter", serif;
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
line-height: 0.8rem;
|
||
|
|
|
||
|
|
color: ${color.grey["400"]};
|
||
|
|
|
||
|
|
cursor: pointer;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const ContentContainer = styled.div`
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
gap: 0.25rem;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const IconContainer = styled.div`
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
width: 1rem;
|
||
|
|
height: 1rem;
|
||
|
|
`;
|