87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
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 { GroupInvite, GroupUpdate } from './Groups';
|
|
|
|
interface GroupsBlockProps {
|
|
groups: Group[];
|
|
title: string;
|
|
className?: string;
|
|
setUpdateActive: (value: any) => void;
|
|
setUpdateGroup: (value: GroupUpdate) => void;
|
|
setInviteActive: (value: any) => void;
|
|
setInviteGroup: (value: GroupInvite) => void;
|
|
type: 'manage' | 'member';
|
|
}
|
|
|
|
const GroupsBlock: FC<GroupsBlockProps> = ({
|
|
groups,
|
|
title,
|
|
className,
|
|
setUpdateActive,
|
|
setUpdateGroup,
|
|
setInviteActive,
|
|
setInviteGroup,
|
|
type,
|
|
}) => {
|
|
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={() => {
|
|
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}
|
|
id={v.id}
|
|
visible={true}
|
|
description={v.description}
|
|
setUpdateActive={setUpdateActive}
|
|
setUpdateGroup={setUpdateGroup}
|
|
setInviteActive={setInviteActive}
|
|
setInviteGroup={setInviteGroup}
|
|
role={'owner'}
|
|
name={v.name}
|
|
type={type}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GroupsBlock;
|