chore: restructure project into yarn workspaces, remove next

packages/design-system/organisms/masthead/Authed.tsx

@@ -0,0 +1,96 @@
+import { DynamicLogomark } from '@roleypoly/design-system/atoms/branding';
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { GuildNav } from '@roleypoly/design-system/molecules/guild-nav';
+import { NavSlug } from '@roleypoly/design-system/molecules/nav-slug';
+import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
+import { UserPopover } from '@roleypoly/design-system/molecules/user-popover';
+import * as React from 'react';
+import { GoOrganization } from 'react-icons/go';
+import { DiscordUser, GuildSlug } from '../../../../src/common/types';
+import {
+    GuildPopoverHead,
+    InteractionBase,
+    MastheadA,
+    MastheadAlignment,
+    MastheadBase,
+    MastheadLeft,
+    MastheadRight,
+} from './Masthead.styled';
+
+type Props = {
+    user?: DiscordUser;
+    activeGuildId: string | null;
+    guilds: GuildSlug[];
+    disableGuildPicker?: boolean;
+};
+
+export const Authed = (props: Props) => {
+    const [userPopoverState, setUserPopoverState] = React.useState(false);
+    const [serverPopoverState, setServerPopoverState] = React.useState(false);
+
+    return (
+        <MastheadBase>
+            <MastheadAlignment>
+                <MastheadLeft>
+                    <MastheadA href="/servers">
+                        <DynamicLogomark height={35} />
+                    </MastheadA>
+                    <InteractionBase
+                        onClick={() => {
+                            if (!props.disableGuildPicker) {
+                                setServerPopoverState(true);
+                                setUserPopoverState(false);
+                            }
+                        }}
+                        hide={!serverPopoverState}
+                    >
+                        <NavSlug
+                            guild={
+                                props.guilds.find(
+                                    (guild) => guild.id === props.activeGuildId
+                                ) || null
+                            }
+                        />
+                    </InteractionBase>
+                    <Popover
+                        headContent={
+                            <GuildPopoverHead>
+                                <GoOrganization />
+                                My Guilds
+                            </GuildPopoverHead>
+                        }
+                        canDefocus
+                        position="bottom left"
+                        active={serverPopoverState}
+                        preferredWidth={560}
+                        onExit={() => setServerPopoverState(false)}
+                    >
+                        {() => <GuildNav guilds={props.guilds} />}
+                    </Popover>
+                </MastheadLeft>
+                <MastheadRight>
+                    <InteractionBase
+                        onClick={() => {
+                            setUserPopoverState(true);
+                            setServerPopoverState(false);
+                        }}
+                        hide={!userPopoverState}
+                    >
+                        {props.user !== undefined && (
+                            <UserAvatarGroup user={props.user} />
+                        )}
+                    </InteractionBase>
+                    <Popover
+                        headContent={<></>}
+                        canDefocus
+                        position="top right"
+                        active={userPopoverState}
+                        onExit={() => setUserPopoverState(false)}
+                    >
+                        {() => props.user && <UserPopover user={props.user} />}
+                    </Popover>
+                </MastheadRight>
+            </MastheadAlignment>
+        </MastheadBase>
+    );
+};