mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-04-24 11:29:12 +00:00
Katalina
7d681d69d6
* feat(design-system): add editor skeletons * use css media queries rather than JS media queries * init remake * feat: add basis of toggle atom * finish toggle * use pointer cursor with toggle * sync * feat: add server message in editor * cleanup storybook * add short editor item and data model for categories * chore: fix build by moving jest version downward * chore: remove old category editor * chore: fix EditorCategoryShort index * add editor wiring and styling updates * fix linting issues
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { Avatar, utils as avatarUtils } from '@roleypoly/design-system/atoms/avatar';
|
|
import { Text } from '@roleypoly/design-system/atoms/typography';
|
|
import { PresentableGuild } from '@roleypoly/types';
|
|
import styled, { css } from 'styled-components';
|
|
import { onSmallScreen } from '../../atoms/breakpoints';
|
|
|
|
type EditorMastheadProps = {
|
|
guild: PresentableGuild;
|
|
onSubmit: () => void;
|
|
onReset: () => void;
|
|
showSaveReset: boolean;
|
|
};
|
|
|
|
const MastheadContainer = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: start;
|
|
padding-bottom: 0.5em;
|
|
${Text} {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
${onSmallScreen(css`
|
|
display: none;
|
|
`)}
|
|
`;
|
|
|
|
export const EditorMasthead = (props: EditorMastheadProps) => (
|
|
<MastheadContainer>
|
|
<Avatar
|
|
size={34}
|
|
hash={props.guild.guild.icon}
|
|
src={avatarUtils.avatarHash(props.guild.id, props.guild.guild.icon, 'icons')}
|
|
>
|
|
{avatarUtils.initialsFromName(props.guild.guild.name)}
|
|
</Avatar>
|
|
<Text>Server Editor</Text>
|
|
</MastheadContainer>
|
|
);
|