Skip to content
Snippets Groups Projects
Commit f1a420ba authored by Aggarwal Himanshu's avatar Aggarwal Himanshu
Browse files

Replace old table model with new one

parent aed9141d
No related branches found
No related tags found
3 merge requests!7Merge develop to main,!6Add a Table View for Cryptocurrencies,!4Improve Table UI and make it more modular
Hide whitespace changes
Inline Side-by-side
src/cryptometrics/pages/index.js
+ 112
− 21
View file @ f1a420ba
import React, { useState } from "react";
import Head from "next/head"; import Head from "next/head";
import Container from "../components/content/Container"; import Container from "../components/content/Container";
import Main from "../components/content/Main"; import Main from "../components/content/Main";
...@@ -11,8 +12,11 @@ import Wrapper from "../components/content/Wrapper"; ...@@ -11,8 +12,11 @@ import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar"; import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab"; import { Tabs, Tab } from "../components/tabs/Tab";
import { CollectionIcon, TableIcon } from "@heroicons/react/outline"; import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
import { useState } from "react"; import { Table, TableCell, TableRow } from "../components/table/Table";
import Coin from "../components/coin/Coin"; import Image from "next/image";
import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
import classNames from "classnames";
import Link from "next/link";
export default function Home() { export default function Home() {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
...@@ -86,25 +90,112 @@ export default function Home() { ...@@ -86,25 +90,112 @@ export default function Home() {
id="list-view" id="list-view"
content={<TableIcon className="w-6 h-6 dark:text-white" />} content={<TableIcon className="w-6 h-6 dark:text-white" />}
> >
{!listOfCoins.isLoading && <Table>
filteredCoins.map((coin) => { {!listOfCoins.isLoading &&
return ( filteredCoins.map((coin, index) => {
<Coin return (
key={coin.id} <Link
name={coin.name} key={"table_row_" + index}
image={coin.image} href={`/coins/${coin.id}`}
symbol={coin.symbol} passHref
marketcap={coin.market_cap} >
price={numeral(coin.current_price).format( <a>
"0,0.[0000000]" <TableRow>
)} <TableCell className="w-6">
priceChange={coin.price_change_percentage_24h} <Image
volume={numeral(coin.total_volume).format( src={coin.image}
"0,0.[0000000]" 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> </Tab>
</Tabs> </Tabs>
</Container> </Container>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment