38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import Icon from "components/ads/Icon";
|
|
import { Theme } from "constants/DefaultTheme";
|
|
import React from "react";
|
|
import styled, { withTheme } from "styled-components";
|
|
import { getTypographyByKey } from "constants/DefaultTheme";
|
|
import { VIEW_LATEST, createMessage } from "constants/messages";
|
|
|
|
const Container = styled.div`
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
cursor: pointer;
|
|
color: ${(props) => props.theme.colors.comments.viewLatest};
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
${(props) => getTypographyByKey(props, "btnMedium")}
|
|
& .view-latest {
|
|
margin-right: ${(props) => props.theme.spaces[1]}px;
|
|
}
|
|
`;
|
|
|
|
const ScrollToLatest = withTheme(
|
|
({ scrollToBottom, theme }: { scrollToBottom: () => void; theme: Theme }) => {
|
|
return (
|
|
<Container onClick={scrollToBottom}>
|
|
<span className="view-latest">{createMessage(VIEW_LATEST)}</span>
|
|
<Icon
|
|
fillColor={theme.colors.comments.viewLatest}
|
|
hoverFillColor={theme.colors.comments.viewLatest}
|
|
name="down-arrow-2"
|
|
/>
|
|
</Container>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default ScrollToLatest;
|