Configure initial index page with chart components

2e4e8dfb · Aggarwal Himanshu · 823fc1c6 · 2e4e8dfb · 2e4e8dfb · 2e4e8dfb
Commit 2e4e8dfb authored 3 years ago by Aggarwal Himanshu
--- a/src/cryptometrics/constants/constants.js
+++ b/src/cryptometrics/constants/constants.js
+export const cryptoChartOptions = (dark = false) => {
+  return {
+    chart: {
+      toolbar: {
+        show: false,
+      },
+      sparkline: {
+        enabled: true,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        shadeIntensity: 0.9,
+        opacityFrom: dark ? 0.9 : 0.7,
+        opacityTo: dark ? 0.4 : 0.9,
+        stops: [0, 100],
+        shade: dark ? "dark" : "light",
+      },
+    },
+    xaxis: {
+      type: "datetime",
+      labels: {
+        show: false,
+      },
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    yaxis: {
+      tickAmount: 3,
+      floating: false,
+      labels: {
+        show: false,
+      },
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
+    grid: {
+      show: false,
+      padding: {
+        top: 2,
+        right: 0,
+        bottom: 0,
+        left: -10,
+      },
+    },
+    stroke: {
+      curve: "smooth",
+    },
+    tooltip: {
+      enabled: false,
+    },
+  };
+};
+
+export const cryptocurrencies = ["bitcoin"];
--- a/src/cryptometrics/constants/index.js
+++ b/src/cryptometrics/constants/index.js
+export * from "./constants";
--- a/src/cryptometrics/next.config.js
+++ b/src/cryptometrics/next.config.js
 module.exports = {
  reactStrictMode: true,
-}
+  images: {
+    domains: ["assets.coingecko.com"],
+  },
+};
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -3,8 +3,44 @@ import Container from "../components/content/Container";
 import Main from "../components/content/Main";
 import SearchInput from "../components/inputs/SearchInput";
 import BoldGradientHeading from "../components/titles/BoldGradientHeading";
+import CryptoChartCard from "../components/cards/CryptoChartCard";
+import { cryptoChartOptions } from "../constants";
+import { useCryptoList, useCryptoTimeSeriesData } from "../queries";
+import numeral from "numeral";
+import Wrapper from "../components/content/Wrapper";
+import Sidebar from "../components/sidebar/Sidebar";

 export default function Home() {
+  const bitcoin = useCryptoTimeSeriesData("bitcoin", 7);
+  const listOfCoins = useCryptoList("usd", 5, false);
+  const filteredCoins = listOfCoins.data?.map((coin) => {
+    return (
+      <CryptoChartCard
+        key={coin.symbol}
+        currencyId={coin.id}
+        currencyName={coin.name}
+        symbol={coin.symbol.toUpperCase()}
+        icon={coin.image}
+        info={"$" + numeral(coin.current_price).format("0,0.[00]")}
+        detail={
+          numeral(coin.price_change_percentage_24h).format("+0.0[00]") + "%"
+        }
+        detailColor={
+          coin.price_change_percentage_24h > 0
+            ? "text-green-500"
+            : "text-red-500"
+        }
+        options={cryptoChartOptions(true)}
+        series={[
+          {
+            name: "bitcoin",
+            data: bitcoin.data?.prices || [],
+          },
+        ]}
+        type="area"
+      />
+    );
+  });
  return (
    <div>
      <Head>
@@ -12,14 +48,24 @@ export default function Home() {
        <meta name="description" content="CryptoMetrics" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
-      <Main>
-        <Container>
-          <div className="flex flex-row justify-between">
-            <BoldGradientHeading>CryptoMetrics</BoldGradientHeading>
-            <SearchInput />
-          </div>
-        </Container>
-      </Main>
+      <Wrapper>
+        <Sidebar />
+        <Main>
+          <Container>
+            {/* Header */}
+            <div className="flex flex-row justify-between">
+              {/* Main Project Title */}
+              <BoldGradientHeading>Home</BoldGradientHeading>
+              {/* Search Field */}
+              <SearchInput />
+            </div>
+
+            <div className="flex flex-row flex-wrap mb-16 p-2">
+              {!listOfCoins.isLoading && filteredCoins}
+            </div>
+          </Container>
+        </Main>
+      </Wrapper>
    </div>
  );
 }