mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-17 09:59:10 +00:00
Katalina
89f237cf22
* feat(design-system): pre-port of roleypoly/ui * feat(design-system): port molecules * chore(design-system): prettier * feat(design-system): add intro card and MDX components * fix(common/utils): hack fixtures test data moved to design-system, update accordingly * chore: document protoReflection.ts * fix(design-system): some molecules missed the magic fuckery * ci: keep going on bazel test failures * fix(design-system): server masthead molecule missed the magic fuckery * chore: fix ts paths * chore: fix docker publisher * chore: fix docker publisher names * chore(discord-bot): fix publisher * chore(discord-bot): fix publisher
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { Guild } from 'roleypoly/src/design-system/shared-types';
|
|
import { Avatar, utils } from 'roleypoly/src/design-system/atoms/avatar';
|
|
import { AccentTitle, AmbientLarge } from 'roleypoly/src/design-system/atoms/typography';
|
|
import Link from 'next/link';
|
|
import { guild } from 'roleypoly/src/design-system/shared-types/storyData';
|
|
import * as React from 'react';
|
|
import { GoPencil } from 'react-icons/go';
|
|
import { Editable, Icon, Name, Wrapper } from './ServerMasthead.styled';
|
|
|
|
export type ServerMastheadProps = {
|
|
guild: Guild;
|
|
editable: boolean;
|
|
};
|
|
|
|
export const ServerMasthead = (props: ServerMastheadProps) => {
|
|
return (
|
|
<Wrapper>
|
|
<Icon>
|
|
<Avatar size={props.editable ? 60 : 48} src={guild.icon}>
|
|
{utils.initialsFromName(props.guild.name)}
|
|
</Avatar>
|
|
</Icon>
|
|
<Name>
|
|
<AccentTitle>{props.guild.name}</AccentTitle>
|
|
{props.editable && (
|
|
<Link href="/s/[id]/edit" as={`/s/${props.guild.id}/edit`}>
|
|
<Editable role="button">
|
|
<GoPencil />
|
|
<AmbientLarge>Edit Server</AmbientLarge>
|
|
</Editable>
|
|
</Link>
|
|
)}
|
|
</Name>
|
|
</Wrapper>
|
|
);
|
|
};
|