37 lines
841 B
TypeScript
37 lines
841 B
TypeScript
import type { ReactNode } from 'react';
|
|
import styled from 'styled-components';
|
|
import { Flex } from 'UIKit/grid';
|
|
import { min } from 'UIKit/mq';
|
|
|
|
const ElementTitle = styled.h5`
|
|
color: rgba(0, 0, 0, 0.75);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
margin: 0 8px 3px 0;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
${min('laptop')} {
|
|
font-size: 14px;
|
|
}
|
|
`;
|
|
|
|
export function Head({ title, addon }: { title: string; addon?: ReactNode }) {
|
|
return (
|
|
<Flex
|
|
flexDirection={['column', 'row']}
|
|
justifyContent={['', 'space-between']}
|
|
alignItems={['', 'center']}
|
|
>
|
|
<ElementTitle>{title}</ElementTitle>
|
|
{addon}
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export function Container({ children }: { children: ReactNode }) {
|
|
return <Flex flexDirection="column">{children}</Flex>;
|
|
}
|