formatting

src/views/home/groups/GroupsBlock.tsx

@@ -1,9 +1,9 @@
-import { useState, FC } from "react";
-import GroupItem from "./GroupItem";
-import { cn } from "../../../lib/cn";
-import { ChevroneDown } from "../../../assets/icons/groups";
-import { Group } from "../../../redux/slices/groups";
-import { GroupUpdate } from "./Groups";
+import { useState, FC } from 'react';
+import GroupItem from './GroupItem';
+import { cn } from '../../../lib/cn';
+import { ChevroneDown } from '../../../assets/icons/groups';
+import { Group } from '../../../redux/slices/groups';
+import { GroupUpdate } from './Groups';
 
 interface GroupsBlockProps {
     groups: Group[];
@@ -13,46 +13,60 @@ interface GroupsBlockProps {
     setUpdateGroup: (value: GroupUpdate) => void;
 }
 
-
-const GroupsBlock: FC<GroupsBlockProps> = ({ groups, title, className, setUpdateActive, setUpdateGroup }) => {
-
-
-    const [active, setActive] = useState<boolean>(title != "Скрытые");
-
+const GroupsBlock: FC<GroupsBlockProps> = ({
+    groups,
+    title,
+    className,
+    setUpdateActive,
+    setUpdateGroup,
+}) => {
+    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"
+        <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={() => {
-                    setActive(!active)
-                }}>
+                    setActive(!active);
+                }}
+            >
                 <span>{title}</span>
-                <img src={ChevroneDown} className={cn("transition-all duration-300", 
-                    active && "rotate-180"
-                )}/>
+                <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={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} 
-                            id={v.id} 
-                            visible={true} 
-                            description={v.description}
-                            setUpdateActive={setUpdateActive}
-                            setUpdateGroup={setUpdateGroup}
-                            role={"owner"} 
-                            name={v.name}/>)
-                        }
+                        {groups.map((v, i) => (
+                            <GroupItem
+                                key={i}
+                                id={v.id}
+                                visible={true}
+                                description={v.description}
+                                setUpdateActive={setUpdateActive}
+                                setUpdateGroup={setUpdateGroup}
+                                role={'owner'}
+                                name={v.name}
+                            />
+                        ))}
                     </div>
                 </div>
             </div>