Card Redesign

package.json

@@ -8,9 +8,10 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@usedapp/core": "^0.7.3",
-    "react": "^17.0.2",
+    "express": "^4.18.2",
+    "react": "^18.2.0",
     "react-color-extractor": "^1.1.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-elastic-carousel": "^0.11.5",
     "react-icons": "^4.3.1",
     "react-multi-carousel": "^2.8.2",

src/components/NFTCard.js

@@ -12,9 +12,10 @@ import { useARStatus } from "../hooks/isARStatus";
 
 
 
-const NFTCard = ({ username, nftName, price, nftSrc, likeCount, gradient, onClick }) => {
+const NFTCard = ({ username, nftName, price, nftSrc, likeCountProp, gradient, onClick }) => {
   const [isLike, setIsLike] = useState(false);
   const [colors, setColors] = useState([]);
+  const [likeCount,setLikeCount]=useState(0)
 
   const isARSupport = useARStatus(nftSrc);
 
@@ -23,12 +24,24 @@ const NFTCard = ({ username, nftName, price, nftSrc, likeCount, gradient, onClic
   }, [])
 
   const like = () => setIsLike(!isLike);
-
+ 
   const getColors = colors => {
     setColors(c => [...c, ...colors]);
     //console.log(colors);
   }
+  const toggleLike = () => {
+    if (isLike) {
+      setLikeCount(likeCount - 1);
+    } else {
+      setLikeCount(likeCount + 1);
+    }
+    setIsLike(!isLike);
+
+    like()
+  };
+
 
+
   return (
     <Card
       blurColor={colors[0]}
@@ -55,11 +68,11 @@ const NFTCard = ({ username, nftName, price, nftSrc, likeCount, gradient, onClic
           {/* <button className="buy-now">Buy Now</button> */}
           <Button color={Colors.buttons.primary} textContent="Buy Now" onClick={onClick} />
           <div className="like-container">
-            <button className="like" onClick={like}>
+            <button  id="like" className={isLike ? 'isLike' : ''} onClick={toggleLike}>
               {!isLike ? (
-                <AiOutlineHeart size="30" color="white" />
+                <AiOutlineHeart  size="30" color="white" />
               ) : (
-                <AiFillHeart size="30" style={{
+                <AiFillHeart className="like-count" size="30" style={{
                   stroke: `-webkit-linear-gradient(
                     to bottom,
                     #38ef7d,
@@ -68,10 +81,12 @@ const NFTCard = ({ username, nftName, price, nftSrc, likeCount, gradient, onClic
                 }} color='#00f5c966' />
               )}
             </button>
-            <p className="like-count">123</p>
+            <span className="like-count">{likeCount} </span>
+
           </div>
-        </div>
-      </>}>
+        </div>    
+      </>
+      }>
 
     </Card>
   );

src/components/Search.js

@@ -1,13 +1,92 @@
-import React from "react";
+import React,{useState} from "react";
 import TextInput from "./base/TextInput";
 import { AiOutlineSearch } from "react-icons/ai";
+import "../styles/Search.css"
+
+const Search = ({onSearch}) => {
+  const [statusFilters, setStatusFilters] = useState({
+    inStock: false,
+    outOfStock: false,
+  });
+  const [priceRange, setPriceRange] = useState([0, 100]);
+  const [collectionFilters, setCollectionFilters] = useState({
+    collection1: false,
+    collection2: false,
+    collection3: false,
+  });
+  const [categoryFilters, setCategoryFilters] = useState({
+    category1: false,
+    category2: false,
+    category3: false,
+  });
+
+  const handleSearch = () => {
+    const selectedFilters = {
+      status: statusFilters,
+      price: priceRange,
+      collections: collectionFilters,
+      categories: categoryFilters,
+    };
+    onSearch(selectedFilters);
+  };
 
-const Search = () => {
   return (
+    <>
     <TextInput
       placeholder="Explore NFTs"
       icon={<AiOutlineSearch size="30" color="rgba(48,118,234,1)" />}
     />
+    <div className="search-bar">
+      <div className="filter">
+        <h2>Status</h2>
+        <label>
+          <input
+            type="checkbox"
+            checked={statusFilters.inStock}
+            onChange={() =>
+              setStatusFilters({
+                ...statusFilters,
+                inStock: !statusFilters.inStock,
+              })
+            }
+          />
+          In Stock
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={statusFilters.outOfStock}
+            onChange={() =>
+              setStatusFilters({
+                ...statusFilters,
+                outOfStock: !statusFilters.outOfStock,
+              })
+            }
+          />
+          Out of Stock
+        </label>
+      </div>
+      <div className="filter">
+        <h2>Price</h2>
+        <input
+          type="range"
+          min={0}
+          max={100}
+          value={priceRange[1]}
+          onChange={(e) => setPriceRange([priceRange[0], e.target.value])}
+        />
+      </div>
+      <div className="filter">
+        <input type="checkbox"/>Collections                        {/*just a label without input*/}
+        {/* Similar structure as Status, but with collection filters */}
+      </div>
+      <div className="filter">
+        <input type="checkbox"/>Categories
+        {/* Similar structure as Status, but with category filters */}
+      </div>
+      <button onClick={handleSearch}>Search</button>
+    </div>
+    </>
   );
 };
 

src/pages/Create.js

@@ -1,4 +1,4 @@
-import react, { useEffect } from "react";
+import react, { useEffect ,useState} from "react";
 import Accordion from "../components/base/Accordion";
 import AccordionHeader from "../components/base/AccordionHeader";
 import Button from "../components/base/Button";
@@ -11,10 +11,36 @@ import { Colors } from "../constants/Colors";
 import {AiOutlineSearch} from 'react-icons/ai';
 import Header from "../components/Header";
 import { useEthers, useEtherBalance } from "@usedapp/core";
+import { FaEthereum } from "react-icons/fa";
+import '../styles/Create.css'
+import nft from '../assets/nft.jpg'
+import nft2 from '../assets/nft2.jpg'
+import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
+import { useARStatus } from "../hooks/isARStatus";
 
-const Create = () => {
+
+
+const Create = ({onClick}) => {
   const {activateBrowserWallet, account} = useEthers();
   const etherBalance = useEtherBalance(account);
+  const [isLike, setIsLike] = useState(false);
+  const [colors, setColors] = useState([]);
+  const [likeCount,setLikeCount]=useState(0)
+
+
+
+  const like = () => setIsLike(!isLike);
+
+  const toggleLike = () => {
+    if (isLike) {
+      setLikeCount(likeCount - 1);
+    } else {
+      setLikeCount(likeCount + 1);
+    }
+    setIsLike(!isLike);
+
+    like()
+  };
 
   useEffect(()=>{
     activateBrowserWallet();
@@ -23,6 +49,77 @@ const Create = () => {
   return (
     <>
       <Header />
+      <div className="nfts">
+      <div className="nft-card">
+      <img
+        src={nft}
+        alt="NFT Image"
+        className="nft-image"
+      />
+      <div className="nft-details">
+        <h3 className="nft-name">My NFT</h3>
+        <p className="nft-owner">Created by Shawn</p>
+        <FaEthereum /> 4.555
+      </div>
+
+      <div className="buttons">
+          {/* <button className="buy-now">Buy Now</button> */}
+
+          <div className="like-container">
+            <button  id="like" className={isLike ? 'isLike' : ''} onClick={toggleLike}>
+              {!isLike ? (
+                <AiOutlineHeart  size="30" color="white" />
+              ) : (
+                <AiFillHeart className="like-count" size="30" style={{
+                  stroke: `-webkit-linear-gradient(
+                    to bottom,
+                    #38ef7d,
+                    #11998e
+                  );`
+                }} color='#00f5c966' />
+              )}
+            </button>
+            <span className="like-count">{likeCount} </span>
+
+          </div>
+        </div>    
+      </div>
+{/*second */}
+<div className="nft-card">
+      <img
+        src={nft2}
+        alt="NFT Image"
+        className="nft-image"
+      />
+      <div className="nft-details">
+        <h3 className="nft-name">My NFT2</h3>
+        <p className="nft-owner">Created by New</p>
+        <FaEthereum /> 4.555
+      </div>
+
+      <div className="buttons">
+          {/* <button className="buy-now">Buy Now</button> */}
+
+          <div className="like-container">
+            <button  id="like" className={isLike ? 'isLike' : ''} onClick={toggleLike}>
+              {!isLike ? (
+                <AiOutlineHeart  size="30" color="white" />
+              ) : (
+                <AiFillHeart className="like-count" size="30" style={{
+                  stroke: `-webkit-linear-gradient(
+                    to bottom,
+                    #38ef7d,
+                    #11998e
+                  );`
+                }} color='#00f5c966' />
+              )}
+            </button>
+            <span className="like-count">{likeCount} </span>
+
+          </div>
+        </div>    
+      </div>
+      </div>
     </>
   );
 };