diff --git a/src/cryptometrics/components/inputs/SearchInput.js b/src/cryptometrics/components/inputs/SearchInput.js
index 32731bfeebdd90a0cbe4d821986ad8cdd00f1a29..a4bdec5ae4d8199db1f54086cfd8d17831c8d138 100644
--- a/src/cryptometrics/components/inputs/SearchInput.js
+++ b/src/cryptometrics/components/inputs/SearchInput.js
@@ -1,13 +1,14 @@
import React from "react";
import { SearchIcon } from "@heroicons/react/outline";
-function SearchInput() {
+function SearchInput({ onChange }) {
return (
<div className="relative">
<input
className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
placeholder="Search"
type="text"
+ onChange={onChange}
></input>
<button className="absolute top-0 right-3 bottom-0 w-6">
<SearchIcon className="w-6 h-6 dark:text-white" />
diff --git a/src/cryptometrics/pages/index.js b/src/cryptometrics/pages/index.js
index 8bedf729853a0e2fc144b807596099efa653ec15..1d0d41ed7165c26ba18396d50e66b9af9e83c321 100644
--- a/src/cryptometrics/pages/index.js
+++ b/src/cryptometrics/pages/index.js
@@ -11,34 +11,40 @@ import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab";
import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
+import { useState } from "react";
export default function Home() {
+ const [searchText, setSearchText] = useState("");
const listOfCoins = useCryptoList("usd", 21, false);
- const filteredCoins = listOfCoins.data?.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"
- />
- );
- });
+ const filteredCoins = listOfCoins.data
+ ?.filter((coin) => {
+ 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 (
<div>
<Head>
@@ -55,7 +61,7 @@ export default function Home() {
{/* Main Project Title */}
<BoldGradientHeading>Home</BoldGradientHeading>
{/* Search Field */}
- <SearchInput />
+ <SearchInput onChange={(e) => setSearchText(e?.target.value)} />
</div>
{/* Main Content */}