pages

src/views/home/groups/GroupsBlock.tsx

@@ -0,0 +1,60 @@
+import { useState, FC } from "react";
+import GroupItem from "./GroupItem";
+import { cn } from "../../../lib/cn";
+import { ChevroneDown } from "../../../assets/icons/groups";
+
+
+export interface Group {
+    id: number;
+    role: "menager" | "member" | "owner" | "viewer";
+    visible: boolean;
+    name: string;
+}
+
+interface GroupsBlockProps {
+    groups: Group[];
+    title: string;
+    className?: string;
+}
+
+
+const GroupsBlock: FC<GroupsBlockProps> = ({ groups, title, className }) => {
+
+
+    const [active, setActive] = useState<boolean>(title != "Скрытые");
+
+
+    return (
+
+        <div className={cn(" border-b-[1px] border-b-liquid-lighter rounded-[10px]",
+            className
+        )}>
+            <div className={cn(" h-[40px] text-[24px] font-bold flex gap-[10px] border-b-[1px] border-b-transparent items-center cursor-pointer transition-all duration-300",
+               active &&  " border-b-liquid-lighter"
+            )}
+                onClick={() => {
+                    console.log(active);
+                    setActive(!active)
+                }}>
+                <span>{title}</span>
+                <img src={ChevroneDown} className={cn("transition-all duration-300", 
+                    active && "rotate-180"
+                )}/>
+            </div>
+            <div className={cn(" grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300",
+                active && "grid-rows-[1fr] opacity-100"
+            )}>
+                <div className="overflow-hidden">
+
+                    <div className="grid grid-cols-3 gap-[20px] pt-[20px] pb-[20px] box-border">
+                        {
+                            groups.map((v, i) => <GroupItem key={i} {...v} />)
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default GroupsBlock;