feat: created a new crypto page

client/src/App.jsx

@@ -1,6 +1,18 @@
 import {lazy,Suspense} from "react"
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./App.css";
+import Homepage from "./pages/Homepage";
+import Dashboard from "./pages/Dashboard";
+import Stocks from "./pages/Stocks";
+import Cryptocurrencies from "./pages/Cryptocurrencies";
+import News from "./pages/News";
+import NFT from "./pages/NFT";
+import Trade from "./pages/Trade";
+import Institutional from "./pages/Institutional";
+import Derivatives from "./pages/Derivatives";
+import Support from "./pages/Support";
+import NotFound from "./components/NotFound.jsx";
+import CoinDetails from "./components/crypto/CoinDetails";
 import NotFound from "./components/NotFound";
 import {FaCircleNotch} from 'react-icons/fa'
 
@@ -15,10 +27,27 @@ const Derivatives = lazy(()=> import("./pages/Derivatives"));
 const NFT = lazy(()=> import("./pages/NFT"))
 const Support = lazy(()=> import("./pages/Support"));
 
+
 const App = () => {
   return (
     <div className="App">
       <BrowserRouter>
+
+        <Routes>
+          <Route path="/" element={<Homepage />} />
+          <Route path="/Dashboard" element={<Dashboard />} />
+          <Route path="/Stocks" element={<Stocks />} />
+          <Route path="/Cryptocurrencies" element={<Cryptocurrencies />} />
+          <Route path="/coin/:id" element= { <CoinDetails/> }/>
+          <Route path="/News" element={<News />} />
+          <Route path="/NFT" element={<NFT />} />
+          <Route path="/Trade" element={<Trade />} />
+          <Route path="/Institutional" element={<Institutional />} />
+          <Route path="/Derivatives" element={<Derivatives />} />
+          <Route path="/Support" element={<Support />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+
         <Suspense fallback={<FaCircleNotch className="spinner" size="5em"/>} >
           <Routes>
             <Route path="/" element={<Homepage />} />
@@ -34,6 +63,7 @@ const App = () => {
             <Route path="*" element={<NotFound />} />
           </Routes>
         </Suspense>
+
       </BrowserRouter>
     </div>
   );

client/src/components/crypto/Chart.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Line } from 'react-chartjs-2'
+import { Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,  
+    registerables} from 'chart.js'
+
+    ChartJS.register( CategoryScale,
+        LinearScale,
+        PointElement,
+        LineElement,
+        Title,
+        Tooltip,
+        Legend )
+const Chart = ({arr=[],currency,days}) => {
+    const prices=[];
+    const date=[];
+    for(let i=0;i<arr.length;i++){
+        if(days==="24hr"){
+            date.push( new Date(arr[i][0]).toLocaleTimeString());
+        }
+        else{
+            date.push( new Date(arr[i][0]).toLocaleDateString());
+        }
+        prices.push(arr[i][1]);
+    }
+
+  return (
+    <div>Chart
+        <Line
+        options={{
+            responsive:true
+        }}
+        data={{
+            labels:date,
+            datasets:[{
+                label:`price in ${currency}`,
+                data:prices,borderColor:"rgb(255,99,132)",
+                backgroundColor:"rgba(255,99,132,0.5)"
+            }]
+        }}
+        />
+    </div>
+  )
+}
+
+export default Chart

client/src/components/crypto/CoinCard.css

@@ -0,0 +1,119 @@
+.radio_btns{
+    display: flex;
+    gap: 2rem;
+    font-size: 1.4rem;
+}
+/* Add the following CSS styles inside your CoinCard.css file */
+
+.topi {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin: 2rem;
+}
+
+  .card {
+    border: 2px solid black;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    border-radius: 0.7cm;
+    transition: all 0.3s ease-in-out;
+    box-shadow: rgba(0,0,0,0.7);
+    width: 20rem;
+    height: 20rem;
+  }
+
+  .card:hover {
+    transform: scale(1.1);
+  }
+
+  .image {
+    width: 10rem;
+    height: auto;
+  }
+
+  .content h2 {
+    font-size: 2rem;
+  }
+
+  .content p{
+    font-size: 1.4rem;
+  }
+
+
+@media (max-width: 1019px) {
+  .topi {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .main_container {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+
+  .chart {
+    width: 100%;
+  }
+
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .chart-button {
+    margin-bottom: 0.5rem;
+  }
+
+  .radio_btns {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .info {
+    margin-top: 1rem;
+  }
+
+  .rank {
+    margin-top: 1rem;
+  }
+
+  .high_low {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 1rem;
+  }
+
+  .high,
+  .low {
+    margin: 0.5rem;
+  }
+
+  .supply {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .max_supply,
+  .circulating_supply,
+  .market_cap,
+  .all_time_high,
+  .all_time_low {
+    margin: 0.5rem 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .topi {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Add any other responsive styles as needed */
+
+

client/src/components/crypto/CoinCard.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import "./CoinCard.css"
+
+const CoinCard = ({ id, name, symbol, price, image, currencySymbol }) => {
+  return (
+    <>
+    <div className="top">
+    <div className="container">
+      <Link to={`/coin/${id}`}>
+        <div className="card">
+          <div className="image">
+            <img src={image} alt={name} />
+          </div>
+          <div className="content">
+            <h2>{name}</h2> 
+            <p>Symbol: {symbol}</p>
+            <p>Price: {currencySymbol} {price}</p>
+          </div>
+        </div>
+      </Link>
+    </div>
+    </div>
+    </>
+  );
+};
+
+export default CoinCard;
+
+

client/src/components/crypto/CoinDetails.css

@@ -0,0 +1,118 @@
+.main_container{
+    border:2px solid black;
+    padding: 2rem;
+    border-radius: 0.4cm;
+    width: 90rem;
+    height: auto;
+}
+
+img{
+    width: 12rem;
+    height: auto;
+}
+
+.name{
+    display: flex;
+    font-size: 1.5rem;
+    margin: 1rem;
+}
+
+.symbol{
+    display: flex;
+    font-size: 1.5rem;
+    margin: 1rem;
+}
+
+.rank{
+    display: flex;
+    font-size: 1.4rem;
+    margin: 1rem;
+}
+
+.high{
+    display: flex;
+    font-size: 1.4rem;
+    margin: 1rem;
+}
+
+.low{
+    display: flex;
+    font-size: 1.4rem;
+    margin: 1rem;
+}
+
+.supply{
+    /* border: 12px solid red; */
+    width: 45rem;
+    display: flex;
+    flex-direction: column;
+    margin-left:34rem ;
+    margin-top: -22rem;
+}
+
+.max_supply,
+.circulating_supply,
+.market_cap,
+.all_time_high,
+.all_time_low{
+    display: flex;
+    justify-content: flex-end;
+    font-size: 1.4rem;
+    margin: 1rem;
+}
+
+.buttons {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .chart-button {
+    padding: 8px 16px;
+    border: none;
+    background-color: #ccc;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .chart-button.active {
+    background-color: #333;
+    font-weight: bold;
+  }
+
+  .radio_btns{
+    display: flex;
+    gap: 2rem;
+    font-size: 1.4rem;
+}
+
+.back-button {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background-color: #333;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .back-button:hover {
+    background-color: #555;
+  }
+
+  .back-icon {
+    font-size: 18px;
+  }
+
+  .time{
+    font-size: 1rem;
+    opacity: 0.5;
+
+  }
+