roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-04-24 19:39:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(UserPopover): add copyright and links to user popover

Browse source
This commit is contained in:
41666 2021-07-09 07:08:51 -05:00
parent 29adda5fd6
commit 85ceb25c17
1 changed files with 51 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
packages/design-system/molecules/user-popover/UserPopover.tsx
View file

@ -1,26 +1,60 @@
import { CompletelyStylelessLink } from '@roleypoly/design-system/atoms/typography';
import { Space } from '@roleypoly/design-system/atoms/space';
import {
AmbientLarge,
CompletelyStylelessLink,
Link,
} from '@roleypoly/design-system/atoms/typography';
import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
import { DiscordUser } from '@roleypoly/types';
import * as React from 'react';
import { GoGear, GoSignOut } from 'react-icons/go';
import { FaDiscord, FaGithub, FaPatreon } from 'react-icons/fa';
import { GoSignOut } from 'react-icons/go';
import { Base, NavAction } from './UserPopover.styled';
type UserPopoverProps = {
user: DiscordUser;
};
export const UserPopover = (props: UserPopoverProps) => (
<Base>
<UserAvatarGroup user={props.user} preventCollapse={true} />
<NavAction>
<CompletelyStylelessLink to="/user/settings">
Settings <GoGear />
</CompletelyStylelessLink>
</NavAction>
<NavAction>
<CompletelyStylelessLink to="/machinery/logout">
Log Out <GoSignOut />
</CompletelyStylelessLink>
</NavAction>
</Base>
);
export const UserPopover = (props: UserPopoverProps) => {
const subtitleText = React.useMemo(() => {
const texts = [
'✊ Black Lives Matter.',
'Trans Rights!',
'Stop AAPI Hate.',
"Get vaccinated, it's free!",
];
return texts[Math.floor(Math.random() * texts.length)];
}, []);
return (
<Base>
<UserAvatarGroup user={props.user} preventCollapse={true} />
<NavAction>
<CompletelyStylelessLink to="/machinery/logout">
Log Out <GoSignOut />
</CompletelyStylelessLink>
</NavAction>
<Space />
<NavAction>
<Link href="https://patreon.com/roleypoly">
Support us on Patreon <FaPatreon />
</Link>
</NavAction>{' '}
<NavAction>
<Link href="https://github.com/roleypoly/roleypoly">
Roleypoly on GitHub <FaGithub />
</Link>
</NavAction>
<NavAction>
<Link href="https://discord.com/PWQUVsd">
Get help on Discord <FaDiscord />
</Link>
</NavAction>
<NavAction>
<AmbientLarge>
&copy; {new Date().getFullYear()} Roleypoly - {subtitleText}
</AmbientLarge>
</NavAction>
</Base>
);
};