add icon list in historical data page (#135)

* add icon list in historical data page

* fix height and width

src/components/common/image-stack/index.css

@@ -0,0 +1,15 @@
+.image-stack {
+  position: relative;
+  overflow: hidden;
+}
+
+.image-stack-child {
+  position: absolute;
+  transition: left 0.5s ease-in-out;
+}
+
+.image-stack-child img {
+  border-radius: 50%;
+  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3);
+  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
+}

src/components/common/image-stack/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import "./index.css";
+
+const ImageStack = ({
+  imageSrcs,
+  imageWidth,
+  imageHeight,
+}: {
+  imageSrcs: string[];
+  imageWidth: number;
+  imageHeight: number;
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleMouseEnter = () => {
+    setExpanded(true);
+  };
+
+  const handleMouseLeave = () => {
+    setExpanded(false);
+  };
+
+  return (
+    <div
+      className="image-stack"
+      style={{
+        height: imageHeight,
+        width:  imageWidth * 1.05 * imageSrcs.length
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {imageSrcs.map((image, index) => (
+        <div
+          className="image-stack-child"
+          style={{ left: expanded ? index * imageWidth * 1.05 : index * imageWidth * 0.7 }}
+          key={index}
+        >
+          <img
+            src={image}
+            alt={`Image ${index + 1}`}
+            style={{
+              width: imageWidth,
+              height: imageHeight,
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ImageStack;

src/components/historical-data/index.tsx

@@ -21,6 +21,7 @@ import { downloadCoinLogos } from "../../middlelayers/data";
 import { appCacheDir as getAppCacheDir } from "@tauri-apps/api/path";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
 import { useWindowSize } from "../../utils/hook";
+import ImageStack from "../common/image-stack";
 
 type RankData = {
   id: number;
@@ -217,6 +218,23 @@ const App = ({
                   />
                 </a>
               </div>
+              <div
+                style={{
+                  position: "absolute",
+                  left: '30%',
+                }}
+              >
+                <ImageStack
+                  imageSrcs={_(d.assets)
+                    .sortBy("value")
+                    .reverse()
+                    .take(7)
+                    .map((a) => getImageApiPath(a.symbol))
+                    .value()}
+                  imageWidth={25}
+                  imageHeight={25}
+                />
+              </div>
               <div
                 className="historical-data-card-bottom-changes"
                 style={{
@@ -264,11 +282,15 @@ const App = ({
       .value();
   }
 
-  function detailPage(data: RankData[]) {
+  function getImageApiPath(symbol: string) {
+    const filePath = `${appCacheDir}assets/coins/${symbol.toLowerCase()}.png`;
+    return convertFileSrc(filePath);
+  }
+
+  function renderDetailPage(data: RankData[]) {
     return _(data)
       .map((d) => {
-        const filePath = `${appCacheDir}assets/coins/${d.symbol.toLowerCase()}.png`;
-        const apiPath = convertFileSrc(filePath);
+        const apiPath = getImageApiPath(d.symbol);
         return (
           <tr key={d.id}>
             <td>
@@ -292,7 +314,10 @@ const App = ({
               }}
             >
               <p className="historical-data-detail-row">
-                {currency.symbol + prettyPriceNumberToLocaleString(currencyWrapper(currency)(d.price))}
+                {currency.symbol +
+                  prettyPriceNumberToLocaleString(
+                    currencyWrapper(currency)(d.price)
+                  )}
               </p>
             </td>
             <td
@@ -349,7 +374,7 @@ const App = ({
                 </th>
                 <th
                   style={{
-                    width: '30%',
+                    width: "30%",
                     minWidth: 180,
                     textAlign: "start",
                   }}
@@ -358,31 +383,31 @@ const App = ({
                 </th>
                 <th
                   style={{
-                    width: '20%',
+                    width: "20%",
                     textAlign: "end",
                   }}
                 >
                   Price
                 </th>
                 <th
                   style={{
-                    width: '25%',
+                    width: "25%",
                     textAlign: "end",
                   }}
                 >
                   Amount
                 </th>
                 <th
                   style={{
-                    width: '20%',
+                    width: "20%",
                     textAlign: "end",
                   }}
                 >
                   Value
                 </th>
               </tr>
             </thead>
-            <tbody>{detailPage(rankData)}</tbody>
+            <tbody>{renderDetailPage(rankData)}</tbody>
           </table>
         </div>
       </Modal>

src/components/overview/index.tsx

@@ -24,7 +24,7 @@ const App = ({
   topCoinsRankData,
   topCoinsPercentageChangeData,
 }: {
-  currency: CurrencyRateDetail,
+  currency: CurrencyRateDetail;
   totalValueData: {
     totalValue: number;
     changePercentage: number;
@@ -43,7 +43,10 @@ const App = ({
       <hr className="nice-hr" />
       <AssetChange currency={currency} data={assetChangeData} />
       <hr className="nice-hr" />
-      <CoinsAmountAndValueChange currency={currency} data={coinsAmountAndValueChangeData} />
+      <CoinsAmountAndValueChange
+        currency={currency}
+        data={coinsAmountAndValueChangeData}
+      />
       <hr className="nice-hr" />
       <TopCoinsRank data={topCoinsRankData} />
       <hr className="nice-hr" />