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 { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
import { DiscordUser } from '@roleypoly/types'; import { DiscordUser } from '@roleypoly/types';
import * as React from 'react'; 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'; import { Base, NavAction } from './UserPopover.styled';
type UserPopoverProps = { type UserPopoverProps = {
user: DiscordUser; user: DiscordUser;
}; };
export const UserPopover = (props: UserPopoverProps) => ( export const UserPopover = (props: UserPopoverProps) => {
<Base> const subtitleText = React.useMemo(() => {
<UserAvatarGroup user={props.user} preventCollapse={true} /> const texts = [
<NavAction> '✊ Black Lives Matter.',
<CompletelyStylelessLink to="/user/settings"> 'Trans Rights!',
Settings <GoGear /> 'Stop AAPI Hate.',
</CompletelyStylelessLink> "Get vaccinated, it's free!",
</NavAction> ];
<NavAction>
<CompletelyStylelessLink to="/machinery/logout"> return texts[Math.floor(Math.random() * texts.length)];
Log Out <GoSignOut /> }, []);
</CompletelyStylelessLink> return (
</NavAction> <Base>
</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>
);
};