pages

src/views/home/groups/GroupItem.tsx

@@ -0,0 +1,59 @@
+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;