stoat-for-desktop/components/modal/modals/UserProfileMutualGroups.tsx

48 lines
1.2 KiB
TypeScript

import { For } from "solid-js";
import { Trans } from "@lingui-solid/solid/macro";
import { useNavigate } from "@solidjs/router";
import { Avatar, Dialog, DialogProps, List, OverflowingText } from "@revolt/ui";
import { useModals } from "..";
import { Modals } from "../types";
export function UserProfileMutualGroupsModal(
props: DialogProps & Modals & { type: "user_profile_mutual_groups" },
) {
const navigate = useNavigate();
const { closeAll } = useModals();
return (
<Dialog
minWidth={420}
show={props.show}
onClose={props.onClose}
title={<Trans>Mutual Groups</Trans>}
actions={[{ text: <Trans>Close</Trans> }]}
>
<List>
<For each={props.groups}>
{(group) => (
<List.Item
onClick={() => {
navigate(group.path);
closeAll();
}}
>
<Avatar
slot="icon"
size={36}
src={group.animatedIconURL}
fallback={group.name}
/>
<OverflowingText>{group.name}</OverflowingText>
</List.Item>
)}
</For>
</List>
</Dialog>
);
}