Skip to content
Snippets Groups Projects
Commit 9cee2c39 authored by SaifFGit's avatar SaifFGit
Browse files

Add initial table view

parent f19e2d17
No related branches found
No related tags found
2 merge requests!7Merge develop to main,!6Add a Table View for Cryptocurrencies
Hide whitespace changes
Inline Side-by-side
src/cryptometrics/components/coin/Coin.js 0 → 100644
+ 37
− 0
View file @ 9cee2c39
import React from "react";
const Coin = ({
name,
image,
symbol,
price,
volume,
priceChange,
marketcap,
}) => {
return (
<div className="coin-container">
<div className="coin-row">
<div className="coin">
<img src={image} alt="crypto" />
<p className="coin-name">{name}</p>
<p className="coin-symbol">{symbol}</p>
</div>
<div className="coin-data">
<p className="coin-price">$ {price}</p>
<p className="coin-volume">$ {volume}</p>
{priceChange < 0 ? (
<p className="coin-percent red">{priceChange.toFixed(2)}%</p>
) : (
<p className="coin-percent green">{priceChange.toFixed(2)}%</p>
)}
<p className="coin-marketcap">
Mkt Cap : {marketcap.toLocaleString()}
</p>
</div>
</div>
</div>
);
};
export default Coin;
src/cryptometrics/pages/index.js
+ 57
− 34
View file @ 9cee2c39
...@@ -12,39 +12,15 @@ import Sidebar from "../components/sidebar/Sidebar"; ...@@ -12,39 +12,15 @@ 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 { useState } from "react";
import Coin from "../components/coin/Coin";
export default function Home() { export default function Home() {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const listOfCoins = useCryptoList("usd", 21, false); const listOfCoins = useCryptoList("usd", 21, false);
const filteredCoins = listOfCoins.data const filteredCoins = listOfCoins.data?.filter((coin) => {
?.filter((coin) => { return coin.name.toLowerCase().includes(searchText.toLowerCase());
return coin.name.toLowerCase().includes(searchText.toLowerCase()); });
})
.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.[0000000]")}
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(
coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
true
)}
type="area"
/>
);
});
return ( return (
<div> <div>
<Head> <Head>
...@@ -71,17 +47,64 @@ export default function Home() { ...@@ -71,17 +47,64 @@ export default function Home() {
content={<CollectionIcon className="w-6 h-6 dark:text-white" />} content={<CollectionIcon className="w-6 h-6 dark:text-white" />}
> >
<div className="flex flex-wrap gap-x-10 gap-y-10 mt-3"> <div className="flex flex-wrap gap-x-10 gap-y-10 mt-3">
{!listOfCoins.isLoading && filteredCoins} {!listOfCoins.isLoading &&
filteredCoins.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.[0000000]")
}
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(
coin.price_change_percentage_24h > 0
? ["#3DBAA2"]
: ["#FF7A68"],
true
)}
type="area"
/>
);
})}
</div> </div>
</Tab> </Tab>
<Tab <Tab
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" />}
> >
{/* TODO: Add Table Component Here */} {!listOfCoins.isLoading &&
<div className="flex flex-wrap gap-x-10 gap-y-10 mt-3"> filteredCoins.map((coin) => {
<h1 className="dark:text-white">TABLE</h1> return (
</div> <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]"
)}
/>
);
})}
</Tab> </Tab>
</Tabs> </Tabs>
</Container> </Container>
......
src/cryptometrics/styles/globals.css
+ 111
− 0
View file @ 9cee2c39
...@@ -24,3 +24,114 @@ ...@@ -24,3 +24,114 @@
#nprogress .peg { #nprogress .peg {
box-shadow: 0 0 10px rgb(37 99 235), 0 0 5px rgb(37 99 235) !important; box-shadow: 0 0 10px rgb(37 99 235), 0 0 5px rgb(37 99 235) !important;
} }
.coin-app {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 64px;
color: white;
}
.coin-search {
margin-bottom: 64px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.coin-text {
margin-bottom: 32px;
text-align: center;
}
.coin-refresh {
/* padding-left: 8px; */
width: 100px;
height: 50px;
border-radius: 4px;
border: none;
background: linear-gradient(to right, #50c9c3, #96deda);
margin-bottom: 20px;
}
.coin-input {
padding-left: 16px;
width: 300px;
height: 50px;
border-radius: 4px;
border: none;
background-image: linear-gradient(to right, #f2709c, #ff9472);
}
.coin-input::placeholder {
color: #e2e2e2;
}
.coin-container {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 17px;
display: flex;
justify-content: center;
}
.coin-row {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 80px;
color: white;
width: 1500px;
}
.coin {
display: flex;
align-items: center;
padding-right: 24px;
min-width: 300px;
}
.coin .coin-name {
width: 250px;
}
.coin img {
height: 30px;
width: 30px;
margin-right: 10px;
}
.coin-symbol {
text-transform: uppercase;
}
.coin-data {
display: flex;
text-align: right;
justify-content: space-between;
width: 100%;
}
.coin-price {
width: 110px;
}
.coin-volume {
width: 155px;
}
.coin-marketcap {
width: 230px;
}
.coin-percent {
width: 100px;
}
.red {
color: #f00606;
}
.green {
color: #11d811;
}
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