feat(pages): add /application/[guildId]/[channelId] (#4)

components/Emoji/EmojiPicker/EmojiPicker.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { EmojiPicker as Component, EmojiPickerProps } from './EmojiPicker'
+
+const Stories: Meta = {
+  title: 'EmojiPicker',
+  component: Component
+}
+
+export default Stories
+
+export const EmojiPicker: Story<EmojiPickerProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+EmojiPicker.args = { onClick: (emoji, event) => console.log(emoji, event) }

components/Emoji/EmojiPicker/EmojiPicker.tsx

@@ -0,0 +1,28 @@
+import 'emoji-mart/css/emoji-mart.css'
+import { EmojiData, Picker } from 'emoji-mart'
+import { useTheme } from 'next-themes'
+
+import { EMOJI_SET } from '../emojiPlugin'
+
+export type EmojiPickerOnClick = (
+  emoji: EmojiData,
+  event: React.MouseEvent<HTMLElement, MouseEvent>
+) => void
+
+export interface EmojiPickerProps {
+  onClick?: EmojiPickerOnClick
+}
+
+export const EmojiPicker: React.FC<EmojiPickerProps> = (props) => {
+  const { theme } = useTheme()
+
+  return (
+    <Picker
+      set={EMOJI_SET}
+      theme={theme as 'light' | 'dark' | 'auto'}
+      onClick={props.onClick}
+      showPreview={false}
+      showSkinTones={false}
+    />
+  )
+}

components/Emoji/EmojiPicker/index.ts

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