41 lines
857 B
TypeScript
41 lines
857 B
TypeScript
import type { ReactNode } from 'react';
|
|
import styled from 'styled-components';
|
|
import { min } from 'styles/mq';
|
|
import { Flex } from 'ui';
|
|
|
|
const ElementTitle = styled.label`
|
|
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,
|
|
htmlFor,
|
|
}: {
|
|
title: ReactNode;
|
|
addon?: ReactNode;
|
|
htmlFor: string;
|
|
}) {
|
|
return (
|
|
<Flex flexDirection={['row']} justifyContent={['space-between']} alignItems={['center']}>
|
|
<ElementTitle htmlFor={htmlFor}>{title}</ElementTitle>
|
|
{addon}
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export function Container({ children }: { children: ReactNode }) {
|
|
return <Flex flexDirection="column">{children}</Flex>;
|
|
}
|