From 1480ea967911495f0d3dea2beb65ee34e05cf98f Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Mon, 3 Jul 2023 01:30:56 +0900
Subject: [PATCH] feat: highlight emoji completion

---
 src/hooks/useEmojiComplete.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useEmojiComplete.tsx b/src/hooks/useEmojiComplete.tsx
index 6837d9b..4084729 100644
--- a/src/hooks/useEmojiComplete.tsx
+++ b/src/hooks/useEmojiComplete.tsx
@@ -26,7 +26,7 @@ const useEmojiComplete = () => {
           },
           template: (config: CustomEmojiConfig) => {
             const e = (
-              <div class="flex gap-1 pb-1">
+              <div class="flex gap-1 border-b px-2 py-1">
                 <img class="h-6 max-w-[3rem]" src={config.url} alt={config.shortcode} />
                 <div>{config.shortcode}</div>
               </div>
@@ -38,7 +38,11 @@ const useEmojiComplete = () => {
       ],
       {
         dropdown: {
-          className: 'px-2 pt-2 pb-1 bg-white shadow rounded',
+          className: 'bg-white shadow rounded',
+          item: {
+            className: 'cursor-pointer',
+            activeClassName: 'bg-rose-100 cursor-pointer',
+          },
         },
       },
     );