-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0737922
commit 44d42f4
Showing
7 changed files
with
196 additions
and
50 deletions.
There are no files selected for viewing
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React from 'react'; | ||
|
|
||
| const CoinData = ({ data }) => { | ||
| console.log(data); // Ensure data is received and logged properly | ||
|
|
||
| if (!data || Object.keys(data).length === 0) { | ||
| return <div className="text-red-500">Not valid data</div>; | ||
| } | ||
|
|
||
| const coin = data[0]; | ||
| console.log(coin); | ||
|
|
||
| return ( | ||
| <div className="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 rounded-xl shadow-lg transform transition duration-500 hover:scale-105 w-full max-w-lg mx-auto"> | ||
| <div className="flex justify-center mb-4"> | ||
| <img src={coin.image} alt={coin.name} className="h-16 w-16 rounded-full shadow-md" /> | ||
| </div> | ||
| <h2 className="text-2xl font-bold text-center text-white mb-4"> | ||
| {coin.name} ({coin.symbol ? coin.symbol.toUpperCase() : ''}) | ||
| </h2> | ||
| <div className="text-center space-y-2"> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Current Price:</p> | ||
| <p className="text-white">${coin.current_price.toFixed(2)}</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Market Cap:</p> | ||
| <p className="text-white">${coin.market_cap.toLocaleString()}</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Total Volume:</p> | ||
| <p className="text-white">${coin.total_volume.toLocaleString()}</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Circulating Supply:</p> | ||
| <p className="text-white">{coin.circulating_supply.toLocaleString()} {coin.symbol ? coin.symbol.toUpperCase() : ''}</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">High 24h:</p> | ||
| <p className="text-white">${coin.high_24h.toFixed(2)}</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Low 24h:</p> | ||
| <p className="text-white">${coin.low_24h.toFixed(2)}</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Price Change (24h):</p> | ||
| <p className="text-white">${coin.price_change_24h.toFixed(2)} ({coin.price_change_percentage_24h.toFixed(2)}%)</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">All-time High:</p> | ||
| <p className="text-white">${coin.ath.toFixed(2)} ({new Date(coin.ath_date).toLocaleDateString()})</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">All-time Low:</p> | ||
| <p className="text-white">${coin.atl.toFixed(2)} ({new Date(coin.atl_date).toLocaleDateString()})</p> | ||
| </div> | ||
| <div className="flex justify-between"> | ||
| <p className="text-gray-200">Last Updated:</p> | ||
| <p className="text-white">{new Date(coin.last_updated).toLocaleString()}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CoinData; |
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| // src/components/Footer.jsx | ||
| import React from 'react'; | ||
|
|
||
| const Footer = () => { | ||
| return ( | ||
| <footer className="bg-gradient-to-b from-indigo-950 to-purple-800 text-white py-4 px-5"> | ||
| <div className="container mx-auto text-center grid grid-cols-1 md:grid-cols-3 gap-4"> | ||
| <div> | ||
| <h2 className="text-2xl font-bold mb-1">CryptoMania</h2> | ||
| <p className="mb-2">Stay updated with the latest trends in cryptocurrency.</p> | ||
|
|
||
| </div> | ||
| <div className='hidden md:block'> | ||
| <h2 className="text-xl font-bold mb-1">Navigation</h2> | ||
| <ul className="flex justify-center space-x-2"> | ||
| <li><a href="#" className="hover:underline">Home</a></li> | ||
| <li><a href="#" className="hover:underline">Market</a></li> | ||
| <li><a href="#" className="hover:underline">News</a></li> | ||
|
|
||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h2 className="text-xl font-bold mb-1">Follow Us</h2> | ||
| <ul className="flex justify-center space-x-4"> | ||
| <li><a href="#" className="hover:underline">Instagram</a></li> | ||
| <li><a href="#" className="hover:underline">LinkedIn</a></li> | ||
| <li><a href="#" className="hover:underline">Contact</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </div> | ||
| <p className='flex text-center justify-center mt-2'>© 2024 Md Saquib Hussain. All rights reserved.</p> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Footer; |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,75 @@ | ||
| import React, { useContext } from 'react' | ||
| import { CoinContext } from '../../context/CoinContext'; | ||
| import React, { useContext, useState } from 'react'; | ||
| import { CoinContext } from '../../context/CoinContext'; | ||
| import CoinData from '../../components/CoinData'; | ||
|
|
||
| const Market = () => { | ||
| const [searchQuery, setSearchQuery] = useState(''); | ||
| const { coins } = useContext(CoinContext); | ||
| const [filteredCoins, setFilteredCoins] = useState([]); | ||
| const [val, setVal] = useState(''); | ||
|
|
||
| const {val,setval}=useContext(CoinContext); | ||
|
|
||
|
|
||
| function update(){ | ||
| setval((old)=>old+1+old); | ||
| console.log(val); | ||
| } | ||
| const handleInputChange = (e) => { | ||
| const { value } = e.target; | ||
| setSearchQuery(value); | ||
| //console.log("hande",value); | ||
|
|
||
| return ( | ||
| <div className='bg-custom h-screen text-blue-500 flex flex-col items-center justify-center'> | ||
| <h1 className=' text-4xl'>Welcome to Market Section</h1> | ||
| <h2 className='text-xl'>Your one stop solution for crypto</h2> | ||
| <h2 className='text-xl'>The value is {val}</h2> | ||
| <button onClick={update} className='bg-indigo-500'> | ||
| Hit me !! | ||
| </button> | ||
| <div> | ||
| <input type="search" name="coinsearch" id="" | ||
| className='bg-blue-400 rounded-xl py-1 my-4 px-4 text-blue-100' /> | ||
| </div> | ||
| // Filter coins based on input value | ||
| const filtered = coins.filter((coin) => | ||
| coin.name.toLowerCase().includes(value.toLowerCase()) | ||
| ); | ||
|
|
||
| // Take only the first three valid matches | ||
| const firstThreeMatches = filtered.slice(0, 3); | ||
|
|
||
| </div> | ||
| setFilteredCoins(firstThreeMatches); | ||
| }; | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| const filtered = coins.filter((coin) => | ||
| coin.name.toLowerCase().includes(searchQuery.toLowerCase()) | ||
| ); | ||
|
|
||
| setVal(filtered); | ||
| setSearchQuery(""); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className='bg-custom h-screen text-blue-500 flex flex-col text-center items-center justify-center'> | ||
| <h1 className=' text-4xl'>Welcome to Market Section</h1> | ||
| <h2 className='text-xl'>Your one stop solution for crypto</h2> | ||
|
|
||
| <div className='flex flex-col items-center justify-center min-w-fit'> | ||
|
|
||
| <form onSubmit={handleSubmit} className='bg-blue-800 w-fit py-1 rounded-xl m-4 px-2'> | ||
| <input | ||
| type="search" | ||
| name="coinsearch" | ||
| placeholder='Search Coins' | ||
| value={searchQuery} | ||
| onChange={handleInputChange} | ||
| required | ||
| list="coinlist" | ||
| className='bg-blue-800 rounded-xl py-1 w-4/6 px-4 mx-3 text-blue-100' | ||
| /> | ||
| <datalist id="coinlist" className="bg-blue-800 rounded-xl py-1 w-4/6 px-4 mx-3 text-blue-100"> | ||
| {filteredCoins.map((coin, index) => ( | ||
| <option key={index} value={coin.name}></option> | ||
| ))} | ||
| </datalist> | ||
| <button type='submit' className='bg-slate-950 rounded-md p-1 px-2 border-2 border-violet-700'> | ||
| submit | ||
| </button> | ||
| </form> | ||
|
|
||
|
|
||
| </div> | ||
| <CoinData data={val} /> {/* Pass data as a prop */} | ||
| </div> | ||
|
|
||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Market | ||
| export default Market; |