Last active
January 23, 2022 16:10
-
-
Save eyupucmaz/a887a794c234c76ba3f33def94d2533c to your computer and use it in GitHub Desktop.
Coin Component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import styles from "./Coin.module.css"; // using module css for styling | |
| import { AiFillCaretDown, AiFillCaretUp } from "react-icons/ai"; // icons for show increase and decrease | |
| import { useContext } from "react"; // hook for getting state of currency | |
| import { CoinContext } from "../../Context/CoinContext"; // context | |
| // Components take a data prop which is an object of each coin data | |
| const Coin = ({ data }) => { | |
| // getting currency state with context hook | |
| const { currency } = useContext(CoinContext); | |
| return ( | |
| <> | |
| <div className={styles.container}> | |
| <div className={styles.card}> | |
| <div className={styles.card__top}> | |
| // Showing icon of coin, and geting a name of coin for alt attribute | |
| <img className={styles.icon} src={data.icon} alt={`Icon of ${data.name}`}/> | |
| <div className={styles.coin__info}> | |
| // showing name of coin | |
| <p className={styles.coin__name}>{data.name}</p> | |
| <p className={styles.coin__price}> | |
| // in this case looking for price of coin | |
| // if its less than 1, showing 8 digits of number after 0(zero) | |
| // if its not, showing data 3 digits | |
| <strong> | |
| {data.price < 1 | |
| ? data.price.toFixed(8) | |
| : data.price.toFixed(3)} | |
| </strong> | |
| // this is where i using currency state (BTC/USD) | |
| <span className={styles.coin__price__currency}> | |
| {` ${data.symbol}/${currency}`} | |
| </span> | |
| </p> | |
| <p className={styles.coin__changes}> | |
| // I also showing a daily changes of currency | |
| // in reason i checking the currency changes is under 0 or not | |
| // if under the zero showing red down arrow if is not showing green arrow | |
| {data.priceChange1d < 0 ? ( | |
| <span className={styles.price_down}> | |
| <AiFillCaretDown /> | |
| {data.priceChange1d} | |
| </span> | |
| ) : ( | |
| <span className={styles.price_up}> | |
| <AiFillCaretUp /> | |
| {data.priceChange1d} | |
| </span> | |
| )} | |
| </p> | |
| </div> | |
| </div> | |
| <div className={styles.card__bottom}> | |
| <p className={styles.coin__market}> | |
| // Showing market cap of coin | |
| <span className={styles.coin__market__text}>Market Cap: </span> | |
| // also using currency state to show how much is it | |
| {`${data.marketCap} ${currency}`}{" "} | |
| </p> | |
| // there is where you can visit website of coin | |
| <a | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| href={data.websiteUrl} | |
| className={styles.coin__website} | |
| > | |
| Official Web Site | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </> | |
| ); | |
| }; | |
| export default Coin; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment