61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { FC } from 'react';
|
||
|
||
export const GroupRightPanel: FC = () => {
|
||
const items = [
|
||
{
|
||
name: 'Игнат Герасименко',
|
||
role: 'Администратор',
|
||
},
|
||
{
|
||
name: 'Алиса Макаренко',
|
||
role: 'Модератор',
|
||
},
|
||
{
|
||
name: 'Федор Картман',
|
||
role: 'Модератор',
|
||
},
|
||
{
|
||
name: 'Карина Механаджанович',
|
||
role: 'Участник',
|
||
},
|
||
{
|
||
name: 'Михаил Ангрский',
|
||
role: 'Участник',
|
||
},
|
||
{
|
||
name: 'newuser',
|
||
role: 'Участник (Вы)',
|
||
},
|
||
];
|
||
return (
|
||
<div className="h-screen w-full overflow-y-scroll thin-dark-scrollbar p-[20px] gap-[5px] flex flex-col">
|
||
<div className="text-liquid-white font-bold text-[18px]">
|
||
Пользователи
|
||
</div>
|
||
|
||
{items.map((v, i) => {
|
||
return (
|
||
<>
|
||
{
|
||
<div className="text-liquid-light text-[16px] grid grid-cols-[40px,1fr] gap-[10px] items-center cursor-pointer hover:bg-liquid-lighter transition-all duration-300 rounded-[10px] p-[5px]">
|
||
<div className="h-[40px] w-[40px] rounded-[10px] bg-[#D9D9D9]"></div>
|
||
<div className="flex flex-col">
|
||
<div className="text-liquid-white font-bold text-[16px] leading-5">
|
||
{v.name}
|
||
</div>
|
||
<div className="text-liquid-light font-normal text-[16px] leading-5">
|
||
{v.role}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
{i + 1 != items.length && (
|
||
<div className="h-[1px] w-full bg-liquid-lighter"></div>
|
||
)}
|
||
</>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|