55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { ActionIcon, Avatar, CopyButton, Flex, MantineSize, Text } from "@mantine/core";
|
|
import { SettingsPaper } from "../SettingsPaper/SettingsPaper";
|
|
import { IconCheck, IconCopy, IconLink } from "@tabler/icons-react";
|
|
import { useGroupInformation } from "@/app/providers/InformationProvider/useGroupInformation";
|
|
import { useGroups } from "@/app/providers/DialogProvider/useGroups";
|
|
import { useEffect, useState } from "react";
|
|
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
|
|
export interface GroupInviteProps {
|
|
groupId: string;
|
|
mt?: MantineSize;
|
|
}
|
|
|
|
export function GroupInvite(props: GroupInviteProps) {
|
|
const {groupInfo} = useGroupInformation(props.groupId);
|
|
const {constructGroupString, getGroupKey} = useGroups();
|
|
const [groupString, setGroupString] = useState<string>('');
|
|
const colors = useRosettaColors();
|
|
|
|
useEffect(() => {
|
|
initGroupString();
|
|
}, [props.groupId])
|
|
|
|
const initGroupString = async () => {
|
|
const groupKey = await getGroupKey(groupInfo.groupId);
|
|
if(!groupKey){
|
|
return;
|
|
}
|
|
const str = await constructGroupString(groupInfo.groupId, groupInfo.title, groupKey, groupInfo.description);
|
|
setGroupString(str);
|
|
}
|
|
|
|
return (
|
|
<SettingsPaper p={'xs'} mt={props.mt}>
|
|
<Flex direction={'row'} justify={'space-between'} align={'center'} gap={'sm'}>
|
|
<Flex align={'center'} gap={'md'}>
|
|
<Avatar size={45} color={'blue'}>
|
|
<IconLink size={25} />
|
|
</Avatar>
|
|
<Flex direction={'column'}>
|
|
<Text fz={13} c={colors.brandColor} fw={500}>Group Invite Code</Text>
|
|
<Text fz={10} c={'gray'}>Copy and share this invite code with any Rosetta users to the group.</Text>
|
|
</Flex>
|
|
</Flex>
|
|
<CopyButton value={groupString} timeout={1500}>
|
|
{({ copied, copy }) => (
|
|
<ActionIcon size={'lg'} component="span" color={copied ? 'teal' : 'blue'} variant="subtle" onClick={copy}>
|
|
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
|
|
</ActionIcon>
|
|
)}
|
|
</CopyButton>
|
|
</Flex>
|
|
</SettingsPaper>
|
|
)
|
|
} |