💒Create Custom Components

Faster and Reusable Work with ReactJS

Creating a Custom Component 👍

const CustomComponent = ({
  image,
  h2name,
  p1name,
  p2name,
  handleButtonClick,
}) => {
  return (
    <div className="w-full shadow-xl bg-gray-100 flex flex-col p-4 md:my-0 my-8 rounded-lg hover:scale-105 duration-300">
      <img
        className="w-20 mx-auto mt-[-3rem] bg-transparent"
        src={image}
        alt="/"
      />
      <h2 className="text-2xl font-bold text-center py-8">{h2name}</h2>

      <div className="text-center font-medium">
        <p className="py-2 border-b mx-8 mt-2">{p1name}</p>
        <p className="py-2 border-b mx-8">{p2name}</p>
      </div>
      <button
        className="bg-[#00df9a] text-[#000000] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3"
        onClick={handleButtonClick}
      >
        Live Demo
      </button>
    </div>
  );
};

export default CustomComponent;

Custom Component Looks Like This

Creating another Custom Component - 2 👍

const CustomComponent2 = ({
  image,
  h2name,
  p1name,
  p2name,
  handleButtonClick,
}) => {
  return (
    <div className="w-full shadow-xl bg-[#86efac] flex flex-col p-4 my-4 rounded-lg hover:scale-105 duration-300">
      <img className="w-20 mx-auto mt-[-3rem]" src={image} alt="/" />
      <h2 className="text-2xl font-bold text-center py-8">{h2name}</h2>
      <div className="text-center font-medium">
        <p className="py-2 border-b mx-8 mt-2">{p1name}</p>
        <p className="py-2 border-b mx-8">{p2name}</p>
      </div>
      <button
        className="bg-black text-[#00df9a] w-[200px] rounded-md font-medium my-6 mx-auto px-6 py-3"
        onClick={handleButtonClick}
      >
        Live Demo
      </button>
    </div>
  );
};

export default CustomComponent2;

Custom Component 2

Now Creating a Main Class using this Custom Components.

It helps us to reduce code and save time by preventing to write same code format again and again.

import Triple2 from "../assets/search.png";
import Triple3 from "../assets/cart.png";
import Triple7 from "../assets/dark2.png";
import NotificationIcon from "../assets/notification.png";
import Form from "../assets/form.png";
import { useNavigate } from "react-router-dom";
import Single from "../assets/password.png";

import CustomComponent from "./CustomComponent";
import CustomComponent2 from "./CustomComponent2";

const Cards = () => {
  const navigate = useNavigate();

  function handleButton1() {
    navigate("/password");
  }
  function handleButton5() {
    navigate("/searchfilter");
  }
  function handleButton6() {
    navigate("/shopping");
  }
  function handleButton7() {
    navigate("/darkmode");
  }
  function handleButtonToast() {
    navigate("/toastify");
  }
  function handleFormUI() {
    navigate("/reactformhook");
  }

  return (
    <div className="w-full py-[7rem] px-4 bg-[#e2e8f0]">
      <div
        className="max-w-[1240px] mx-auto grid md:grid-cols-3 gap-10"
        style={{ rowGap: "90px" }}
      >
        {/* row11 */}

        <CustomComponent2
          image={Triple7}
          h2name="Dark-Light Mode"
          p1name="Adaptive Dark Theme"
          p2name="Toggle Button : Complete Theme"
          handleButtonClick={handleButton7}
        />

        <CustomComponent
          image={Triple2}
          h2name="Search Filter System"
          p1name="Real-Time Searching"
          p2name="Validation of Searching Item"
          handleButtonClick={handleButton5}
        />

        <CustomComponent2
          image={Triple3}
          h2name="Shopping Cart System"
          p1name="Book Library Website"
          p2name="Tracking Cart Management"
          handleButtonClick={handleButton6}
        />

        {/* row2 */}

        <CustomComponent2
          image={Form}
          h2name="Form UI & Dynamicse"
          p1name="Built in UI Library"
          p2name="Template Login Form"
          handleButtonClick={handleFormUI}
        />

        <CustomComponent
          image={NotificationIcon}
          h2name="React Toastify"
          p1name="React notification made easy !"
          p2name="Tons of Feature"
          handleButtonClick={handleButtonToast}
        />

        <CustomComponent2
          image={Single}
          h2name="Password Generator Website"
          p1name="Both Number & Character"
          p2name="Length Up to 50"
          handleButtonClick={handleButton1}
        />

      </div>
    </div>
  );
};

export default Cards;

How it looks now resuing the components