60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { cn } from "../../../lib/cn";
|
|
import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";
|
|
|
|
export interface GroupItemProps {
|
|
id: number;
|
|
role: "menager" | "member" | "owner" | "viewer";
|
|
visible: boolean;
|
|
name: string;
|
|
}
|
|
|
|
|
|
interface IconComponentProps {
|
|
src: string;
|
|
}
|
|
|
|
const IconComponent: React.FC<IconComponentProps> = ({
|
|
src
|
|
}) => {
|
|
|
|
return <img
|
|
src={src}
|
|
className="hover:bg-liquid-light rounded-[5px] cursor-pointer transition-all duration-300"
|
|
/>
|
|
}
|
|
|
|
const GroupItem: React.FC<GroupItemProps> = ({
|
|
id, name, visible, role
|
|
}) => {
|
|
console.log(id);
|
|
return (
|
|
<div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter",
|
|
)}>
|
|
<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}/>
|
|
}
|
|
{
|
|
visible == false && <IconComponent src={EyeOpen} />
|
|
}
|
|
{
|
|
visible == true && <IconComponent src={EyeClosed} />
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GroupItem;
|