get groups

src/views/home/groups/GroupItem.tsx

@@ -1,5 +1,6 @@
 import { cn } from "../../../lib/cn";
 import { Book, UserAdd, Edit, EyeClosed, EyeOpen } from "../../../assets/icons/groups";
+import { useNavigate } from "react-router-dom";
 
 export interface GroupItemProps {
     id: number;
@@ -26,9 +27,13 @@ const IconComponent: React.FC<IconComponentProps> = ({
 const GroupItem: React.FC<GroupItemProps> = ({
     id, name, visible, role
 }) => {
+    const navigate = useNavigate();
+
     return (
-        <div className={cn("w-full h-[120px] box-border relative rounded-[10px] p-[10px] text-liquid-white bg-liquid-lighter",
-        )}>
+        <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]">