- "content": "\"use client\";\n\nimport {\n type EmojiPickerListCategoryHeaderProps,\n type EmojiPickerListEmojiProps,\n type EmojiPickerListRowProps,\n EmojiPicker as EmojiPickerPrimitive,\n} from \"frimousse\";\nimport { LoaderIcon, SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction EmojiPicker({\n className,\n ...props\n}: React.ComponentProps<typeof EmojiPickerPrimitive.Root>) {\n return (\n <EmojiPickerPrimitive.Root\n className={cn(\n \"bg-popover text-popover-foreground isolate flex h-full w-fit flex-col overflow-hidden rounded-md\",\n className\n )}\n data-slot=\"emoji-picker\"\n {...props}\n />\n );\n}\n\nfunction EmojiPickerSearch({\n className,\n ...props\n}: React.ComponentProps<typeof EmojiPickerPrimitive.Search>) {\n return (\n <div\n className={cn(\"flex h-9 items-center gap-2 border-b px-3\", className)}\n data-slot=\"emoji-picker-search-wrapper\"\n >\n <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n <EmojiPickerPrimitive.Search\n className=\"outline-none placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50\"\n data-slot=\"emoji-picker-search\"\n {...props}\n />\n </div>\n );\n}\n\nfunction EmojiPickerRow({ children, ...props }: EmojiPickerListRowProps) {\n return (\n <div {...props} className=\"scroll-my-1 px-1\" data-slot=\"emoji-picker-row\">\n {children}\n </div>\n );\n}\n\nfunction EmojiPickerEmoji({\n emoji,\n className,\n ...props\n}: EmojiPickerListEmojiProps) {\n return (\n <button\n {...props}\n className={cn(\n \"data-[active]:bg-accent flex size-7 items-center justify-center rounded-md text-base\",\n className\n )}\n data-slot=\"emoji-picker-emoji\"\n >\n {emoji.emoji}\n </button>\n );\n}\n\nfunction EmojiPickerCategoryHeader({\n category,\n ...props\n}: EmojiPickerListCategoryHeaderProps) {\n return (\n <div\n {...props}\n className=\"bg-popover text-muted-foreground px-3 pb-2 pt-3.5 text-xs leading-none\"\n data-slot=\"emoji-picker-category-header\"\n >\n {category.label}\n </div>\n );\n}\n\nfunction EmojiPickerContent({\n className,\n ...props\n}: React.ComponentProps<typeof EmojiPickerPrimitive.Viewport>) {\n return (\n <EmojiPickerPrimitive.Viewport\n className={cn(\"outline-none relative flex-1\", className)}\n data-slot=\"emoji-picker-viewport\"\n {...props}\n >\n <EmojiPickerPrimitive.Loading\n className=\"absolute inset-0 flex items-center justify-center text-muted-foreground\"\n data-slot=\"emoji-picker-loading\"\n >\n <LoaderIcon className=\"size-4 animate-spin\" />\n </EmojiPickerPrimitive.Loading>\n <EmojiPickerPrimitive.Empty\n className=\"absolute inset-0 flex items-center justify-center text-muted-foreground text-sm\"\n data-slot=\"emoji-picker-empty\"\n >\n No emoji found.\n </EmojiPickerPrimitive.Empty>\n <EmojiPickerPrimitive.List\n className=\"select-none pb-1\"\n components={{\n Row: EmojiPickerRow,\n Emoji: EmojiPickerEmoji,\n CategoryHeader: EmojiPickerCategoryHeader,\n }}\n data-slot=\"emoji-picker-list\"\n />\n </EmojiPickerPrimitive.Viewport>\n );\n}\n\nfunction EmojiPickerFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\n \"max-w-[--frimousse-viewport-width] flex w-full min-w-0 items-center gap-1 border-t p-2\",\n className\n )}\n data-slot=\"emoji-picker-footer\"\n {...props}\n >\n <EmojiPickerPrimitive.ActiveEmoji>\n {({ emoji }) =>\n emoji ? (\n <>\n <div className=\"flex size-7 flex-none items-center justify-center text-lg\">\n {emoji.emoji}\n </div>\n <span className=\"text-secondary-foreground truncate text-xs\">\n {emoji.label}\n </span>\n </>\n ) : (\n <span className=\"text-muted-foreground ml-1.5 flex h-7 items-center truncate text-xs\">\n Select an emoji…\n </span>\n )\n }\n </EmojiPickerPrimitive.ActiveEmoji>\n </div>\n );\n}\n\nexport {\n EmojiPicker,\n EmojiPickerSearch,\n EmojiPickerContent,\n EmojiPickerFooter,\n};"
0 commit comments