feat(editor): add permalink section in editor

packages/design-system/molecules/editor-invite-link/EditorInviteLink.stories.tsx

@@ -0,0 +1,12 @@
+import { mastheadSlugs } from '../../fixtures/storyData';
+import { EditorInviteLink } from './EditorInviteLink';
+
+export default {
+  title: 'Molecules/Editor Invite Link',
+  component: EditorInviteLink,
+  args: {
+    guild: mastheadSlugs[0],
+  },
+};
+
+export const editorInviteLink = (args) => <EditorInviteLink {...args} />;

packages/design-system/molecules/editor-invite-link/EditorInviteLink.styled.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export const EditorInviteLinkStyled = styled.div``;

packages/design-system/molecules/editor-invite-link/EditorInviteLink.tsx

@@ -0,0 +1,26 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { CopyArea } from '@roleypoly/design-system/atoms/copy-area';
+import { AmbientLarge } from '@roleypoly/design-system/atoms/typography';
+import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { Guild } from '@roleypoly/types';
+import { GoInfo } from 'react-icons/go';
+
+export const EditorInviteLink = (props: { guild: Guild }) => {
+  const currentURL = new URL(location.href);
+  currentURL.pathname = `/s/${props.guild.id}`;
+  currentURL.search = '';
+
+  const inviteLink = currentURL.toString();
+
+  return (
+    <MessageBox>
+      Share this link with your server members, or ping{' '}
+      <span style={{ color: palette.taupe500 }}>@roleypoly</span> in your server.
+      <CopyArea value={inviteLink} />
+      <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+        <GoInfo style={{ position: 'relative', top: 4 }} />
+        &nbsp;This link will never change. Share it with anyone!
+      </AmbientLarge>
+    </MessageBox>
+  );
+};

packages/design-system/molecules/editor-invite-link/index.ts

@@ -0,0 +1 @@
+export * from './EditorInviteLink';