44 lines
1.0 KiB
JavaScript
44 lines
1.0 KiB
JavaScript
import React from "react";
|
|
import { TicketsTabStyled } from "./TicketsTab.style";
|
|
import { color } from "../../../../../style/varibles";
|
|
|
|
import BadgeComponent from "../../../../Base/Badge/BadgeComponent";
|
|
|
|
const TicketsTab = ({ text, id, setValueTab, valueTab, count }) => {
|
|
const [active, setActive] = React.useState(false);
|
|
|
|
const handleClick = ({ target }) => {
|
|
setValueTab(target.id);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
valueTab === id ? setActive(true) : setActive(false);
|
|
}, [valueTab, id]);
|
|
|
|
return (
|
|
<TicketsTabStyled
|
|
id={id}
|
|
valueTab={valueTab}
|
|
onClick={handleClick}
|
|
className={active ? "active" : ""}
|
|
>
|
|
{text}
|
|
{id !== "open" ? (
|
|
<BadgeComponent
|
|
counter={count}
|
|
position="absolute"
|
|
right="4px"
|
|
top="6px"
|
|
fontSize="12px"
|
|
bgcolor={id === "pending" ? color.status.warning : color.status.no}
|
|
/>
|
|
) : (
|
|
""
|
|
)}
|
|
</TicketsTabStyled>
|
|
);
|
|
};
|
|
|
|
export default TicketsTab;
|
|
|