From a2904337e9743c86298592da298907e039165d2d Mon Sep 17 00:00:00 2001
From: rpidanny <abhishekmaharjan1993@gmail.com>
Date: Fri, 12 May 2023 00:28:39 +0200
Subject: [PATCH] feat: add tooltip

---
 .../src/components/PromptsList/index.tsx      | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/apps/chrome-extension/src/components/PromptsList/index.tsx b/apps/chrome-extension/src/components/PromptsList/index.tsx
index 599ab68..5643aa6 100644
--- a/apps/chrome-extension/src/components/PromptsList/index.tsx
+++ b/apps/chrome-extension/src/components/PromptsList/index.tsx
@@ -2,7 +2,7 @@ import './styles.css';
 
 import { StarOutlined, StarTwoTone } from '@ant-design/icons';
 import { IPrompt } from '@rpidanny/llm-prompt-templates';
-import { List, Tag, Typography } from 'antd';
+import { List, Tag, Tooltip, Typography } from 'antd';
 import React, { MouseEvent } from 'react';
 
 const { Text } = Typography;
@@ -69,20 +69,23 @@ const PromptsList: React.FC<Props> = ({
           onClick={() => handleItemClick(idx)}
           className={'template-list-item'}
         >
-          {favoritePromptsSet.has(item.name) ? (
-            <StarTwoTone
-              type="star"
-              twoToneColor="gold"
-              style={{ fontSize: '20px', marginRight: '12px' }}
-              onClick={(e) => handleFavoriteClick(item, e)}
-            />
-          ) : (
-            <StarOutlined
-              type="star"
-              style={{ fontSize: '20px', marginRight: '12px', color: 'gray' }}
-              onClick={(e) => handleFavoriteClick(item, e)}
-            />
-          )}
+          <Tooltip title="Favorite" color={'gold'}>
+            {favoritePromptsSet.has(item.name) ? (
+              <StarTwoTone
+                type="star"
+                twoToneColor="gold"
+                style={{ fontSize: '20px', marginRight: '12px' }}
+                onClick={(e) => handleFavoriteClick(item, e)}
+              />
+            ) : (
+              <StarOutlined
+                type="star"
+                style={{ fontSize: '20px', marginRight: '12px', color: 'gray' }}
+                onClick={(e) => handleFavoriteClick(item, e)}
+              />
+            )}
+          </Tooltip>
+
           <List.Item.Meta title={item.name} description={item.description} />
         </List.Item>
       )}