feat(component): implemented a copy link button for copying invited c…

…odes
bandada-infra · Dec 17, 2024 · 01e2268 · 01e2268
1 parent 1e9afee
commit 01e2268
Showing 1 changed file with 96 additions and 0 deletions.
diff --git a/apps/dashboard/src/pages/group.tsx b/apps/dashboard/src/pages/group.tsx
@@ -51,6 +51,18 @@ export default function GroupPage(): JSX.Element {
     const navigate = useNavigate()
     const addMembersModal = useDisclosure()
     const toast = useToast()
+    const [inviteCode, setInviteCode] = useState("")
+    const [inviteLink, setInviteLink] = useState<string>("")
+    const { hasCopied: hasCopiedInviteCode, onCopy: onCopyInviteCode } =
+        useClipboard(inviteCode)
+    const { hasCopied: hasCopiedInviteLink, onCopy: onCopyInviteLink } =
+        useClipboard(inviteLink || "")
+
+    const generateInviteCodeAndLink = () => {
+        const code = Math.random().toString(36).substring(2, 10).toUpperCase()
+        setInviteCode(code)
+        setInviteLink(`https://example.com/invite?code=${code}`)
+    }
     const { groupId, groupType } = useParams()
     const [_group, setGroup] = useState<Group | null>()
     // const { hasCopied, setValue: setApiKey, onCopy } = useClipboard("")
@@ -450,6 +462,90 @@ ${memberIds.join("\n")}
                         </Box>
                     </HStack>
                     (
+                    <Box
+                        bgColor="balticSea.50"
+                        p="25px 30px"
+                        borderRadius="8px"
+                    >
+                        {/* Invite Code Section */}
+                        <Text fontSize="20px">Invite Code</Text>
+                        <InputGroup size="lg" mt="10px">
+                            <Input
+                                pr="50px"
+                                placeholder="Invite Code"
+                                value={inviteCode} // This is a state variable holding the generated invite code
+                                isDisabled
+                            />
+                            <InputRightElement mr="5px">
+                                <Tooltip
+                                    label={
+                                        hasCopiedInviteCode ? "Copied!" : "Copy"
+                                    }
+                                    closeOnClick={false}
+                                    hasArrow
+                                >
+                                    <IconButton
+                                        variant="link"
+                                        aria-label="Copy Invite Code"
+                                        onClick={onCopyInviteCode} // Function to copy invite code
+                                        onMouseDown={(e) => e.preventDefault()}
+                                        icon={
+                                            <Icon
+                                                color="sunsetOrange.600"
+                                                boxSize="5"
+                                                as={FiCopy}
+                                            />
+                                        }
+                                    />
+                                </Tooltip>
+                            </InputRightElement>
+                        </InputGroup>
+
+                        {/* Invite Link Section */}
+                        <Text fontSize="20px" mt="20px">
+                            Invite Link
+                        </Text>
+                        <InputGroup size="lg" mt="10px">
+                            <Input
+                                pr="50px"
+                                placeholder="Invite Link"
+                                value={inviteLink} // This is a state variable holding the generated invite link
+                                isDisabled
+                            />
+                            <InputRightElement mr="5px">
+                                <Tooltip
+                                    label={
+                                        hasCopiedInviteLink ? "Copied!" : "Copy"
+                                    }
+                                    closeOnClick={false}
+                                    hasArrow
+                                >
+                                    <IconButton
+                                        variant="link"
+                                        aria-label="Copy Invite Link"
+                                        onClick={onCopyInviteLink} // Function to copy invite link
+                                        onMouseDown={(e) => e.preventDefault()}
+                                        icon={
+                                            <Icon
+                                                color="sunsetOrange.600"
+                                                boxSize="5"
+                                                as={FiCopy}
+                                            />
+                                        }
+                                    />
+                                </Tooltip>
+                            </InputRightElement>
+                        </InputGroup>
+
+                        {/* Generate Button */}
+                        <Button
+                            mt="20px"
+                            colorScheme="blue"
+                            onClick={generateInviteCodeAndLink} // Function to generate code and link
+                        >
+                            Generate new code
+                        </Button>
+                    </Box>
                     <Box
                         bgColor="balticSea.50"
                         p="25px 30px 25px 30px"