Skip to content
Snippets Groups Projects

Merge develop to main

Merged Merge develop to main
develop into main
Merged Aggarwal Himanshu requested to merge develop into main
Viewing commit f1a420ba
Prev Next
Show latest version
1 file
+ 112
− 21
Compare changes
  • Side-by-side
  • Inline
src/cryptometrics/pages/index.js
+ 112
− 21
import React, { useState } from "react";
import Head from "next/head";
import Container from "../components/content/Container";
import Main from "../components/content/Main";
@@ -11,8 +12,11 @@ import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab";
import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
import { useState } from "react";
import Coin from "../components/coin/Coin";
import { Table, TableCell, TableRow } from "../components/table/Table";
import Image from "next/image";
import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
import classNames from "classnames";
import Link from "next/link";
export default function Home() {
const [searchText, setSearchText] = useState("");
@@ -86,25 +90,112 @@ export default function Home() {
id="list-view"
content={<TableIcon className="w-6 h-6 dark:text-white" />}
>
{!listOfCoins.isLoading &&
filteredCoins.map((coin) => {
return (
<Coin
key={coin.id}
name={coin.name}
image={coin.image}
symbol={coin.symbol}
marketcap={coin.market_cap}
price={numeral(coin.current_price).format(
"0,0.[0000000]"
)}
priceChange={coin.price_change_percentage_24h}
volume={numeral(coin.total_volume).format(
"0,0.[0000000]"
)}
/>
);
})}
<Table>
{!listOfCoins.isLoading &&
filteredCoins.map((coin, index) => {
return (
<Link
key={"table_row_" + index}
href={`/coins/${coin.id}`}
passHref
>
<a>
<TableRow>
<TableCell className="w-6">
<Image
src={coin.image}
width="32px"
height="32px"
alt={`${coin.id}_icon`}
layout="fixed"
></Image>
</TableCell>
<TableCell className="w-24">
<p className="font-medium text-base text-center">
{coin.name}
</p>
<p className="font-light text-gray-300 text-sm mt-1">
{coin.symbol.toUpperCase()}
</p>
</TableCell>
<TableCell className="w-24">
<p className="font-medium text-base">Price</p>
<p className="font-light text-sm text-blue-500 mt-1">
$
{numeral(coin.current_price).format(
"0,0.[0000000]"
)}
</p>
</TableCell>
<TableCell className="w-[10%]">
<p className="font-medium text-base">
Market Cap
</p>
<p className="font-light text-sm text-pink-400 mt-1">
$
{numeral(coin.market_cap).format(
"0,0.[000]a"
)}
</p>
</TableCell>
<TableCell className="w-40">
<p className="font-medium text-base">
24h change in %
</p>
<p
className={classNames(
"font-light text-sm mt-1",
{
"text-red-400":
coin.price_change_percentage_24h < 0,
"text-green-400":
coin.price_change_percentage_24h >= 0,
}
)}
>
{numeral(
coin.price_change_percentage_24h
).format("+0.0[00]")}
%
</p>
</TableCell>
<TableCell className="w-40">
<p className="font-medium text-base">
24h change in $
</p>
<p
className={classNames(
"font-light text-sm mt-1",
{
"text-red-400": coin.price_change_24h < 0,
"text-green-400":
coin.price_change_24h >= 0,
}
)}
>
{numeral(coin.price_change_24h).format(
"$0,0.[0000]"
)}
</p>
</TableCell>
<TableCell>
<div className="h-[50px] w-52">
<CryptoRowLineChart
currencyId={coin.id}
color={
coin.price_change_24h >= 0
? "#10B981"
: "#EF4444"
}
/>
</div>
</TableCell>
</TableRow>
</a>
</Link>
);
})}
</Table>
</Tab>
</Tabs>
</Container>