68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
||
import { useModalState } from "../../zustand/Modal";
|
||
import { ModalEnum } from "../../enums/Model";
|
||
import { FaMoneyBill } from "react-icons/fa";
|
||
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
|
||
|
||
const DivisionsHeaderSection = () => {
|
||
const [showAll, setShowAll] = useState<boolean>(false);
|
||
|
||
const toggleShowAll = () => {
|
||
setShowAll(!showAll);
|
||
};
|
||
|
||
const { isOpen, setIsOpen } = useModalState((state) => state);
|
||
|
||
const handelOpenModal = () => {
|
||
setIsOpen(ModalEnum?.DIVISION_ADD);
|
||
};
|
||
|
||
// Define the interface for your data
|
||
interface Item {
|
||
icon: JSX.Element;
|
||
name: string;
|
||
}
|
||
const data: Item[] = [
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
{ icon: <FaMoneyBill />, name: "الطالبات" },
|
||
];
|
||
|
||
return (
|
||
<div className="Divisions_header_section">
|
||
<div className="CountCards">
|
||
{data?.map((item: Item, index: number) => {
|
||
return (
|
||
<div
|
||
key={index}
|
||
className={`CountCard ${!showAll && index >= 5 ? "hidden" : ""}`}
|
||
>
|
||
<i>{item?.icon}</i>
|
||
<h4>{item?.name}</h4>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
{showAll ? (
|
||
<span className="Show_More_Button" onClick={toggleShowAll}>
|
||
<IoMdArrowDropup />
|
||
</span>
|
||
) : (
|
||
<span className="Show_More_Button" onClick={toggleShowAll}>
|
||
<IoMdArrowDropdown />
|
||
</span>
|
||
)}
|
||
<button className="Add_button" onClick={handelOpenModal}>
|
||
إضافة مادة
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DivisionsHeaderSection;
|