index.tsx raw

   1  import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
   2  import {
   3    DropdownMenu,
   4    DropdownMenuContent,
   5    DropdownMenuTrigger
   6  } from '@/components/ui/dropdown-menu'
   7  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   8  import { TEmoji } from '@/types'
   9  import { useState } from 'react'
  10  import EmojiPicker from '../EmojiPicker'
  11  
  12  export default function EmojiPickerDialog({
  13    children,
  14    onEmojiClick
  15  }: {
  16    children: React.ReactNode
  17    onEmojiClick?: (emoji: string | TEmoji | undefined) => void
  18  }) {
  19    const { isSmallScreen } = useScreenSize()
  20    const [open, setOpen] = useState(false)
  21  
  22    if (isSmallScreen) {
  23      return (
  24        <Drawer open={open} onOpenChange={setOpen}>
  25          <DrawerTrigger asChild>{children}</DrawerTrigger>
  26          <DrawerContent>
  27            <EmojiPicker
  28              onEmojiClick={(emoji, e) => {
  29                e.stopPropagation()
  30                setOpen(false)
  31                onEmojiClick?.(emoji)
  32              }}
  33            />
  34          </DrawerContent>
  35        </Drawer>
  36      )
  37    }
  38  
  39    return (
  40      <DropdownMenu open={open} onOpenChange={setOpen}>
  41        <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
  42        <DropdownMenuContent side="top" className="p-0 w-fit">
  43          <EmojiPicker
  44            onEmojiClick={(emoji, e) => {
  45              e.stopPropagation()
  46              setOpen(false)
  47              onEmojiClick?.(emoji)
  48            }}
  49          />
  50        </DropdownMenuContent>
  51      </DropdownMenu>
  52    )
  53  }
  54