'init'

2026-01-30 05:01:05 +02:00
commit 83f38dc63f
327 changed files with 18725 additions and 0 deletions
--- a/app/components/GroupInvite/GroupInvite.tsx
+++ b/app/components/GroupInvite/GroupInvite.tsx
@@ -0,0 +1,55 @@
+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>
+    )
+}