79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { cn } from "../../../lib/cn";
|
|
import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { GroupUpdate } from "./Groups";
|
|
|
|
export interface GroupItemProps {
|
|
id: number;
|
|
role: "menager" | "member" | "owner" | "viewer";
|
|
visible: boolean;
|
|
name: string;
|
|
description: string;
|
|
setUpdateActive: (value: any) => void;
|
|
setUpdateGroup: (value: GroupUpdate) => void;
|
|
}
|
|
|
|
|
|
interface IconComponentProps {
|
|
src: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const IconComponent: React.FC<IconComponentProps> = ({
|
|
src,
|
|
onClick
|
|
}) => {
|
|
|
|
return <img
|
|
src={src}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (onClick)
|
|
onClick();
|
|
}}
|
|
className="hover:bg-liquid-light rounded-[5px] cursor-pointer transition-all duration-300"
|
|
/>
|
|
}
|
|
|
|
const GroupItem: React.FC<GroupItemProps> = ({
|
|
id, name, visible, role, description, setUpdateGroup, setUpdateActive
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter cursor-pointer",
|
|
)}
|
|
onClick={() => navigate(`/group/${id}`)}
|
|
>
|
|
<div className="grid grid-cols-[100px,1fr] gap-[20px]">
|
|
<img src={Book} className="bg-liquid-brightmain rounded-[10px]"/>
|
|
<div className="grid grid-flow-row grid-rows-[1fr,24px]">
|
|
<div className="text-[18px] font-bold">
|
|
{name}
|
|
</div>
|
|
<div className=" flex gap-[10px]">
|
|
{
|
|
(role == "menager" || role == "owner") && <IconComponent src={UserAdd}/>
|
|
}
|
|
{
|
|
(role == "menager" || role == "owner") && <IconComponent src={Edit} onClick={() => {
|
|
|
|
setUpdateGroup({id, name, description });
|
|
setUpdateActive(true);
|
|
}} />
|
|
}
|
|
{
|
|
visible == false && <IconComponent src={EyeOpen} />
|
|
}
|
|
{
|
|
visible == true && <IconComponent src={EyeClosed} />
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GroupItem;
|