42 lines
896 B
TypeScript
42 lines
896 B
TypeScript
/* eslint-disable func-style */
|
|
import { min } from '@/styles/mq';
|
|
import type { ReactNode } from 'react';
|
|
import styled from 'styled-components';
|
|
import { Flex } from 'ui/grid';
|
|
|
|
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,
|
|
}: {
|
|
addon?: ReactNode;
|
|
htmlFor: string;
|
|
title: ReactNode;
|
|
}) {
|
|
return (
|
|
<Flex alignItems={['center']} flexDirection={['row']} justifyContent={['space-between']}>
|
|
<ElementTitle htmlFor={htmlFor}>{title}</ElementTitle>
|
|
{addon}
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export function Container({ children }: { children: ReactNode }) {
|
|
return <Flex flexDirection="column">{children}</Flex>;
|
|
}
|