feat: billing guest access

src/components/ButtonCopy/ButtonCopy.tsx

@@ -0,0 +1,54 @@
+import {Button, rem, Tooltip} from '@mantine/core';
+import {IconCheck, IconCopy} from '@tabler/icons-react';
+import {FC} from "react";
+import {useClipboard} from "@mantine/hooks";
+
+type Props = {
+    children: string;
+    value: string
+    onCopiedLabel: string;
+}
+
+export const ButtonCopy: FC<Props> = ({children, onCopiedLabel, value}) => {
+    const clipboard = useClipboard();
+
+    return (
+        <Tooltip
+            label={onCopiedLabel}
+            offset={5}
+            position="bottom"
+            radius="xl"
+            transitionProps={{duration: 100, transition: 'slide-down'}}
+            opened={clipboard.copied}
+        >
+            <Button
+                variant="light"
+                rightSection={
+                    clipboard.copied ? (
+                        <IconCheck
+                            style={{width: rem(20), height: rem(20)}}
+                            stroke={1.5}
+                        />
+                    ) : (
+                        <IconCopy
+                            style={{width: rem(20), height: rem(20)}}
+                            stroke={1.5}
+                        />
+                    )
+                }
+                radius="xl"
+                size="md"
+                styles={{
+                    root: {
+                        paddingRight: rem(14),
+                    },
+                    section: {marginLeft: rem(22)},
+                }}
+                onClick={() => clipboard.copy(value)}
+            >
+                {children}
+            </Button>
+        </Tooltip>
+    );
+}
+export default ButtonCopy;