forked from abner/for-legacy-web
54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import styled, { css } from "styled-components/macro";
|
|
|
|
import { dayjs } from "../../context/Locale";
|
|
|
|
const Base = styled.div<{ unread?: boolean }>`
|
|
height: 0;
|
|
display: flex;
|
|
user-select: none;
|
|
align-items: center;
|
|
margin: 17px 12px 5px;
|
|
border-top: thin solid var(--tertiary-foreground);
|
|
|
|
time {
|
|
margin-top: -2px;
|
|
font-size: 0.6875rem;
|
|
line-height: 0.6875rem;
|
|
padding-inline-start: 5px;
|
|
padding-inline-end: 5px;
|
|
color: var(--tertiary-foreground);
|
|
background: var(--primary-background);
|
|
}
|
|
|
|
${(props) =>
|
|
props.unread &&
|
|
css`
|
|
border-top: thin solid var(--accent);
|
|
`}
|
|
`;
|
|
|
|
const Unread = styled.div`
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
font-size: 7px;
|
|
padding: 2px 6px;
|
|
font-size: 10px;
|
|
border-radius: 60px;
|
|
font-weight: 600;
|
|
margin-top: -1px;
|
|
`;
|
|
|
|
interface Props {
|
|
date?: Date;
|
|
unread?: boolean;
|
|
}
|
|
|
|
export default function DateDivider({ unread, date }: Props) {
|
|
return (
|
|
<Base unread={unread}>
|
|
{unread && <Unread>NEW</Unread>}
|
|
{date && <time>{dayjs(date).format("LL")}</time>}
|
|
</Base>
|
|
);
|
|
}
|