👉 Click here to see on browser

yarn create react-app .  or npx create-react-app .

yarn add sass  or npm i sass

- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt

yarn start or npm start

OR

• Clone the Repo

  git clone

• Install NPM packages

  npm install or yarn

• Run the project

  npm start or yarn start

• Open the project on your browser

  http://localhost:3000/

• Enjoy! 🎉

nba legends (folder)
|
|----public (folder)
│     └── index.html
|----src (folder)
|    |--- components (folder)
│    │       ├── ContainerCard.jsx
│    │       ├── Header.jsx
│    │       ├── PlayerCard.jsx
│    │
|    |--- helper (folder)
|    |       |── data.js
│    │
│    |--- assets (folder)
|    |      ├── nba-logo.png
|    |
│    ├--- App.js
│    │--- data.js
│    |--- index.js
│    ├--- index.css
│
│
|-- .gitignore
|── package-lock.json
├── package.json
|── README.md
|── yarn.lock

• Lifting state up

  // src/App.jsx
      import CardContainer from "./components/cardcontainer/CardContainer";
  import Header from "./components/header/Header";
  
  import { useState } from "react";
  
  function App() {
     ** const [search, setSearch] = useState(""); **
      return (
          <div>
            **  <Header setSearch={setSearch} />**
            **  <CardContainer search={search} />**
          </div>
      );
  }
  
  export default App;
  
  
  // src/Header.jsx
  import img from "../../assets/nba-logo.png";
  
  **const Header = ({ setSearch }) => {**
      return (
          <div className="text-center mt-4 ">
              <img src={img} alt="" />
              <h1>NBA Legends</h1>
              <input
                  **onChange={(e) => setSearch(e.target.value)}**
                  className="form-control w-50 mx-auto m-5"
                  type="search"
                  name="name"
                  id="name"
                  placeholder="Search Player..."
              />
          </div>
      );
  };
  
  export default Header;
  
  
  
  // src/CardContainer.jsx
  import { data } from "../../helper/data";
  import PlayerCard from "../playercard/PlayerCard.jsx";
  const CardContainer = ({ search }) => {
      return (
          <div className="container">
              <div className=" row ">
                  {data
                      .filter((player) =>
                          player.name
                              .toLocaleLowerCase()
                              .includes(search.trim().toLocaleLowerCase())
                      )
                      .map((player, i) => (
                          <PlayerCard key={i} {...player} />
                      ))}
              </div>
          </div>
      );
  };

export default CardContainer;

    ```

• conditional rendering

  import Img from "./Img";
  import Ul from "./Ul";
  import "./PlayerCard.css";
  
  import { useState } from "react";
  
  const PlayerCard = ({ img, name, statistics }) => {
      const [visible, setVisible] = useState(true);
  
      const handleClick = () => {
          setVisible(!visible);
      };
  
      return (
          <div
              className=" col col-md-6 col-lg-4 col-xl-3 p-2"
              style={{ height: "450px" }}
          >
              <div onClick={handleClick} className="card h-100 border-0 ">
                  {visible ? (
                      <Img img={img} />
                  ) : (
                      <Ul statistics={statistics} />
                  )}
                  <div className="card-body h-25 ">
                      <h5 className="card-title">{name}</h5>
                  </div>
              </div>
          </div>
      );
  };
  
  export default PlayerCard;

• yükseklikleri farkli olan img leri esitlemek icin

  const Img = ({ img }) => {
      return (
          <div className="img-container h-75">
              <img
                  src={img}
                  className="card-img-top h-100 rounded-0"
                  alt="player"
              />
          </div>
      );
  };
  
  export default Img;

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

⌛ Happy Coding ✍