feat: remove tooltip for repo

AttackOnMorty · May 22, 2024 · 523b889 · 523b889
1 parent f99fb91
commit 523b889
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "react-tooltip": "^5.26.4",
     "web-vitals": "^3.5.2"
   },
   "scripts": {

diff --git a/src/api/index.js b/src/api/index.js
@@ -21,13 +21,11 @@ export const getRepositories = async (value) => {
       owner: { avatar_url },
       description,
       stargazers_count,
-      html_url,
     }) => ({
       fullName: full_name,
       avatarUrl: avatar_url,
       description,
       currentStars: stargazers_count,
-      htmlUrl: html_url,
     }),
   );
 };

diff --git a/src/components/searchInput.jsx b/src/components/searchInput.jsx
@@ -1,44 +1,20 @@
 import { Select, Spin, Tag } from 'antd';
 import { useState } from 'react';
-import { Tooltip } from 'react-tooltip';
 
 import { getRepositories } from '../api';
 
 const { Option } = Select;
 
 const COLORS = [
-  {
-    base: 'rgb(54, 162, 235)',
-    hoverClass: 'hover:!bg-[#0E90E4]',
-  },
-  {
-    base: 'rgb(255, 99, 132)',
-    hoverClass: 'hover:!bg-[#FF3863]',
-  },
-  {
-    base: 'rgb(255, 159, 64)',
-    hoverClass: 'hover:!bg-[#F3800E]',
-  },
-  {
-    base: 'rgb(255, 205, 86)',
-    hoverClass: 'hover:!bg-[#EAB32F]',
-  },
-  {
-    base: 'rgb(75, 192, 192)',
-    hoverClass: 'hover:!bg-[#2CA6A6]',
-  },
-  {
-    base: 'rgb(153, 102, 255)',
-    hoverClass: 'hover:!bg-[#7E3FFF]',
-  },
-  {
-    base: 'rgb(201, 203, 207)',
-    hoverClass: 'hover:!bg-[#9CA1AB]',
-  },
+  'rgb(54, 162, 235)',
+  'rgb(255, 99, 132)',
+  'rgb(255, 159, 64)',
+  'rgb(255, 205, 86)',
+  'rgb(75, 192, 192)',
+  'rgb(153, 102, 255)',
+  'rgb(201, 203, 207)',
 ];
 
-const SHADOWS = COLORS.map((color) => `0 0 16px -8px ${color.base}`);
-
 let timeout;
 let currentValue;
 
@@ -90,40 +66,19 @@ function SearchInput({
       event.preventDefault();
       event.stopPropagation();
     };
-
-    const { htmlUrl } = data.find((repo) => repo.fullName === value) || {};
-
     return (
       <Tag
-        color={COLORS[index].base}
+        color={COLORS[index]}
         onMouseDown={onPreventMouseDown}
         closable={closable}
         onClose={onClose}
-        className={`${COLORS[index].hoverClass} cursor-pointer`}
         style={{
           margin: 2,
           fontSize: 14,
           lineHeight: '26px',
         }}
       >
-        <a
-          data-tooltip-id={label}
-          data-tooltip-show={100}
-          data-tooltip-place="bottom"
-          href={htmlUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {label}
-        </a>
-        <Tooltip
-          id={label}
-          noArrow
-          className="p-0 opacity-100"
-          style={{ boxShadow: SHADOWS[index] }}
-        >
-          <img src={`https://gh-card.dev/repos/${label}.svg`} alt={label} />
-        </Tooltip>
+        {label}
       </Tag>
     );
   };

diff --git a/src/index.css b/src/index.css
@@ -4,13 +4,10 @@
 
 #root {
   height: 100%;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
 }
 
 svg {
   vertical-align: baseline;
 }
-
-a {
-  @apply transition-all;
-}
diff --git a/src/index.jsx b/src/index.jsx
@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom/client';
 
 import 'antd/dist/reset.css';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import 'react-tooltip/dist/react-tooltip.css';
 
 import App from './App';
 import reportWebVitals from './reportWebVitals';