From e34c8524b7a88f046e108adb40cc4bf0c1da7c21 Mon Sep 17 00:00:00 2001
From: Pijus Kamandulis <pkpjuklas@gmail.com>
Date: Sat, 12 Oct 2024 10:24:52 +0300
Subject: [PATCH] Added invite link to estimation session

---
 src/components/CopyInput.tsx        | 39 +++++++++++++++++++++++++++++
 src/pages/Estimation/Estimation.tsx |  7 ++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/CopyInput.tsx

diff --git a/src/components/CopyInput.tsx b/src/components/CopyInput.tsx
new file mode 100644
index 0000000..460cc5c
--- /dev/null
+++ b/src/components/CopyInput.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+interface CopyInputProps {
+  value: string;
+}
+
+const CopyInput: React.FC<CopyInputProps> = ({ value }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+    }
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      <input
+        type="text"
+        value={value}
+        readOnly
+        className="w-full rounded-md border border-gray-300 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-600 dark:bg-nero-800 dark:text-gray-100"
+      />
+
+      <button
+        onClick={handleCopy}
+        className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-500"
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  );
+};
+
+export default CopyInput;
diff --git a/src/pages/Estimation/Estimation.tsx b/src/pages/Estimation/Estimation.tsx
index 0aab900..6854706 100644
--- a/src/pages/Estimation/Estimation.tsx
+++ b/src/pages/Estimation/Estimation.tsx
@@ -6,6 +6,7 @@ import VoteSelection from './components/VoteSelection';
 import VoteList from './components/VoteList';
 import { Button, ButtonColor, Drawer } from '../../components';
 import CreateTicketForm from './components/CreateTicketForm';
+import CopyInput from '../../components/CopyInput';
 
 const fibonacciSequence = [1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 100];
 
@@ -47,6 +48,12 @@ const Estimation: React.FC = () => {
       />
 
       <div className="flex w-full flex-grow flex-col p-6">
+        <div className="flex items-center justify-center gap-2">
+          <span className="align-middle text-xl font-semibold">
+            Invite others to join your session
+          </span>
+          <CopyInput value={`${window.location.origin}/join/${sessionId}`} />
+        </div>
         {currentTicket ? (
           <>
             <h1 className="mb-4 text-2xl font-bold">{currentTicket.name}</h1>