refactor: using shadcn ui to replace some components

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/style.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -18,17 +18,30 @@
     "@aptabase/tauri": "^0.2.0",
     "@polybase/client": "^0.6.6",
     "@polybase/eth": "^0.6.6",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
     "bluebird": "^3.7.2",
     "chart.js": "^4.3.0",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "color-diff": "^1.3.0",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
+    "react-router-dom": "^6.18.0",
     "react-tooltip": "^5.20.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss-animate": "^1.0.7",
     "tauri-plugin-sql-api": "https://github.com/tauri-apps/tauri-plugin-sql",
     "uuid": "^9.0.0",
     "yaml": "^2.2.2"
@@ -40,13 +53,17 @@
     "@types/color-diff": "^1.2.1",
     "@types/lodash": "^4.14.194",
     "@types/md5": "^2.3.2",
-    "@types/node": "^18.7.10",
+    "@types/node": "^20.8.10",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.2",
     "@types/yaml": "^1.9.7",
     "@vitejs/plugin-react": "^2.0.0",
+    "autoprefixer": "^10.4.16",
     "node-fetch": "^3.3.1",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
     "typescript": "^4.6.4",
     "vite": "^3.2.7"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src-tauri/tauri.conf.json

@@ -87,7 +87,7 @@
         "height": 800,
         "resizable": true,
         "title": "track3",
-        "width": 1000
+        "width": 1100
       }
     ]
   }

src/components/coins-amount-and-value-change/index.tsx

@@ -8,8 +8,8 @@ import {
   CurrencyRateDetail,
 } from "../../middlelayers/types";
 import Select from "../common/select";
-import "./index.css";
 import { currencyWrapper } from "../../utils/currency";
+import { ButtonGroup, ButtonGroupItem } from "../ui/button-group";
 
 const prefix = "caaavc";
 
@@ -32,12 +32,12 @@ const App = ({
 
   function getLabel() {
     // set first char to upper case
-    const val  =  _.upperFirst(currentType.replace(prefix, ""));
+    const val = _.upperFirst(currentType.replace(prefix, ""));
     if (val !== "Value") {
-      return val
+      return val;
     }
 
-    return `${currency.currency} ${val}`
+    return `${currency.currency} ${val}`;
   }
 
   function getWholeKey(key: string) {
@@ -131,28 +131,15 @@ const App = ({
 
   return (
     <>
-      <div
-        style={{
-          height: 34,
-        }}
-      >
-        <div className="button-group">
-          <button
-            id={getWholeKey("amount")}
-            onClick={() => onTypeSelectChange(getWholeKey("amount"))}
-            className="left active"
-          >
-            Amount
-          </button>
-          <button
-            id={getWholeKey("value")}
-            onClick={() => onTypeSelectChange(getWholeKey("value"))}
-            className="right"
-          >
-            Value
-          </button>
-        </div>
-        <div>
+      <div className="flex">
+        <ButtonGroup
+          defaultValue="amount"
+          onValueChange={(val: string) => onTypeSelectChange(getWholeKey(val))}
+        >
+          <ButtonGroupItem value="amount">Amount</ButtonGroupItem>
+          <ButtonGroupItem value="value">Value</ButtonGroupItem>
+        </ButtonGroup>
+        <div className="ml-5 mt-1">
           <Select
             height={34}
             options={data.map((d) => ({ value: d.coin, label: d.coin }))}
@@ -164,7 +151,6 @@ const App = ({
       <div
         style={{
           height: Math.max((size.height || 100) / 2, 350),
-          marginTop: 35,
         }}
       >
         <Line options={options} data={chartDataByCoin(currentCoinSelected)} />

src/components/comparison/index.tsx

@@ -9,9 +9,13 @@ import _ from "lodash";
 import Select from "../common/select";
 import viewIcon from "../../assets/icons/view-icon.png";
 import hideIcon from "../../assets/icons/hide-icon.png";
-import { currencyWrapper, prettyNumberToLocaleString } from "../../utils/currency";
+import {
+  currencyWrapper,
+  prettyNumberToLocaleString,
+} from "../../utils/currency";
 import { useWindowSize } from "../../utils/hook";
 import { parseDateToTS } from "../../utils/date";
+import { ButtonGroup, ButtonGroupItem } from "../ui/button-group";
 
 type ComparisonData = {
   name: string;
@@ -91,30 +95,6 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
     loadDataById(headId).then((data) => setHeadData(data));
   }, [headId]);
 
-  // update button style
-  useEffect(() => {
-    const buttons = document.getElementsByClassName("active");
-    for (let i = 0; i < buttons.length; i++) {
-      if (
-        ["7D", "1M", "1Q", "1Y"]
-          .map((i) => getQuickCompareWholeKey(i as QuickCompareType))
-          .includes(buttons[i].id)
-      ) {
-        buttons[i].classList.remove("active");
-      }
-    }
-
-    if (!currentQuickCompare) {
-      return;
-    }
-
-    document
-      .getElementById(
-        getQuickCompareWholeKey(currentQuickCompare as QuickCompareType)
-      )
-      ?.classList.add("active");
-  }, [currentQuickCompare]);
-
   // update quick compare data ( baseId and headId )
   useEffect(() => {
     if (!currentQuickCompare) {
@@ -314,7 +294,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
     }
     let res = "" + convertedNumber;
     if (!keepDecimal) {
-      res = prettyNumberToLocaleString(convertedNumber)
+      res = prettyNumberToLocaleString(convertedNumber);
     }
     if (convertCurrency) {
       return `${currency.symbol} ${res}`;
@@ -335,113 +315,44 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
     );
   }
 
-  function buttonGroupItemStyle() {
-    return {
-      height: 25,
-      width: 40,
-    };
-  }
-
-  function getQuickCompareWholeKey(type: QuickCompareType) {
-    return "quick-compare-" + type;
-  }
-
   function onQuickCompareButtonClick(type: QuickCompareType) {
     setCurrentQuickCompare(type);
   }
 
   return (
     <>
-      <h1
-        style={{
-          display: "inline-block",
-        }}
-      >
-        Comparison
-      </h1>
-      <a
-        href="#"
-        style={{
-          marginLeft: 10,
-        }}
-        onClick={onViewOrHideClick}
-      >
-        <img
-          src={showDetail ? viewIcon : hideIcon}
-          alt="view-or-hide"
-          width={25}
-          height={25}
-        />
-      </a>
-
       <div id="comparison-container" className="comparison-container">
-        <div
-          style={{
-            marginBottom: 10,
-            height: 25,
-          }}
-        >
-          <div
-            style={{
-              float: "right",
-            }}
-          >
-            <div
-              style={{
-                display: "inline-block",
-                color: "gray",
-                fontSize: 15,
-                overflow: "auto",
-                textAlign: "right",
-                marginRight: 20,
-              }}
-            >
+        <div>
+          <div className="flex mb-4 items-center justify-end">
+            <div className="mr-5">
+              <a onClick={onViewOrHideClick}>
+                <img
+                  className="view-or-hide-icon"
+                  src={showDetail ? viewIcon : hideIcon}
+                  alt="view-or-hide"
+                  width={25}
+                  height={25}
+                />
+              </a>
+            </div>
+            <div className="mr-2 text-gray-400 text-m flex items-center">
               Quick Compare
             </div>
-            <div
-              className="button-group"
-              style={{
-                display: "inline-block",
-                minWidth: "20%",
-              }}
+            <ButtonGroup
+              value={currentQuickCompare || ""}
+              onValueChange={(val: string) =>
+                onQuickCompareButtonClick(val as QuickCompareType)
+              }
             >
-              <button
-                id={getQuickCompareWholeKey("7D")}
-                className="quick-compare-button"
-                style={buttonGroupItemStyle()}
-                onClick={() => onQuickCompareButtonClick("7D")}
-              >
-                7D
-              </button>
-              <button
-                id={getQuickCompareWholeKey("1M")}
-                className="quick-compare-button"
-                style={buttonGroupItemStyle()}
-                onClick={() => onQuickCompareButtonClick("1M")}
-              >
-                1M
-              </button>
-              <button
-                id={getQuickCompareWholeKey("1Q")}
-                className="quick-compare-button"
-                style={buttonGroupItemStyle()}
-                onClick={() => onQuickCompareButtonClick("1Q")}
-              >
-                1Q
-              </button>
-              <button
-                id={getQuickCompareWholeKey("1Y")}
-                className="quick-compare-button"
-                style={buttonGroupItemStyle()}
-                onClick={() => onQuickCompareButtonClick("1Y")}
-              >
-                1Y
-              </button>
-            </div>
+              <ButtonGroupItem value="7D">7D</ButtonGroupItem>
+              <ButtonGroupItem value="1M">1M</ButtonGroupItem>
+              <ButtonGroupItem value="1Q">1Q</ButtonGroupItem>
+              <ButtonGroupItem value="1Y">1Y</ButtonGroupItem>
+            </ButtonGroup>
           </div>
         </div>
-        <div className="comparison-date-picker">
-          <div className="comparison-date-picker-item">
+        <div className="grid grid-cols-6 gap-4 mb-5">
+          <div className="col-start-2 col-end-4">
             <Select
               id="base"
               options={dateOptions}
@@ -450,7 +361,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
               width={150}
             />
           </div>
-          <div className="comparison-date-picker-item">
+          <div className="col-end-7 col-span-2">
             <Select
               id="head"
               options={dateOptions}