Skip to content
Snippets Groups Projects
Commit f19e2d17 authored by Saif Fadhel's avatar Saif Fadhel
Browse files

Merge branch 'search-feat' into 'develop' 

Add search functionality

See merge request !3
parents 97822ff2 5295a969
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 @ f19e2d17
import React from "react"; import React from "react";
import { SearchIcon } from "@heroicons/react/outline"; import { SearchIcon } from "@heroicons/react/outline";
function SearchInput() { function SearchInput({ onChange }) {
return ( return (
<div className="relative"> <div className="relative">
<input <input
className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700" 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" placeholder="Search"
type="text" type="text"
onChange={onChange}
></input> ></input>
<button className="absolute top-0 right-3 bottom-0 w-6"> <button className="absolute top-0 right-3 bottom-0 w-6">
<SearchIcon className="w-6 h-6 dark:text-white" /> <SearchIcon className="w-6 h-6 dark:text-white" />
......
src/cryptometrics/pages/index.js
+ 32
− 26
View file @ f19e2d17
...@@ -11,34 +11,40 @@ import Wrapper from "../components/content/Wrapper"; ...@@ -11,34 +11,40 @@ import Wrapper from "../components/content/Wrapper";
import Sidebar from "../components/sidebar/Sidebar"; import Sidebar from "../components/sidebar/Sidebar";
import { Tabs, Tab } from "../components/tabs/Tab"; import { Tabs, Tab } from "../components/tabs/Tab";
import { CollectionIcon, TableIcon } from "@heroicons/react/outline"; import { CollectionIcon, TableIcon } from "@heroicons/react/outline";
import { useState } from "react";
export default function Home() { export default function Home() {
const [searchText, setSearchText] = useState("");
const listOfCoins = useCryptoList("usd", 21, false); const listOfCoins = useCryptoList("usd", 21, false);
const filteredCoins = listOfCoins.data?.map((coin) => { const filteredCoins = listOfCoins.data
return ( ?.filter((coin) => {
<CryptoChartCard return coin.name.toLowerCase().includes(searchText.toLowerCase());
key={coin.symbol} })
currencyId={coin.id} .map((coin) => {
currencyName={coin.name} return (
symbol={coin.symbol.toUpperCase()} <CryptoChartCard
icon={coin.image} key={coin.symbol}
info={"$" + numeral(coin.current_price).format("0,0.[0000000]")} currencyId={coin.id}
detail={ currencyName={coin.name}
numeral(coin.price_change_percentage_24h).format("+0.0[00]") + "%" symbol={coin.symbol.toUpperCase()}
} icon={coin.image}
detailColor={ info={"$" + numeral(coin.current_price).format("0,0.[0000000]")}
coin.price_change_percentage_24h > 0 detail={
? "text-green-500" numeral(coin.price_change_percentage_24h).format("+0.0[00]") + "%"
: "text-red-500" }
} detailColor={
options={cryptoChartOptions( coin.price_change_percentage_24h > 0
coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"], ? "text-green-500"
true : "text-red-500"
)} }
type="area" options={cryptoChartOptions(
/> coin.price_change_percentage_24h > 0 ? ["#3DBAA2"] : ["#FF7A68"],
); true
}); )}
type="area"
/>
);
});
return ( return (
<div> <div>
<Head> <Head>
...@@ -55,7 +61,7 @@ export default function Home() { ...@@ -55,7 +61,7 @@ export default function Home() {
{/* Main Project Title */} {/* Main Project Title */}
<BoldGradientHeading>Home</BoldGradientHeading> <BoldGradientHeading>Home</BoldGradientHeading>
{/* Search Field */} {/* Search Field */}
<SearchInput /> <SearchInput onChange={(e) => setSearchText(e?.target.value)} />
</div> </div>
{/* Main Content */} {/* 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