Skip to content
Snippets Groups Projects
Commit 5295a969 authored by SaifFGit's avatar SaifFGit
Browse files

Add search functionality

parent d094ec5a
No related branches found
No related tags found
2 merge requests!7Merge develop to main,!3Add search functionality
Hide whitespace changes
Inline Side-by-side
src/cryptometrics/components/inputs/SearchInput.js
+ 2
− 1
View file @ 5295a969
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" />
......
src/cryptometrics/pages/index.js
+ 32
− 26
View file @ 5295a969
......@@ -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 */}
......
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