siam-ui-utils 2.2.7 → 2.2.9

package/index.d.ts

@@ -82,4 +82,7 @@ declare module 'siam-ui-utils' {
 
   //VIDEO CALL ROOM
   export function WhereByRoom(props);
+
+  //COPY LINK
+  export function CopyLink(props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.7",
+  "version": "2.2.9",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/App.jsx

@@ -11,6 +11,7 @@ import './index.css';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
 import { WhereByRoom } from './where-by-room';
+import CopyLink from './copy-link';
 
 const App = () => {
   const [open, setOpen] = useState('0');
@@ -110,6 +111,12 @@ const App = () => {
             />
           </AccordionBody>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="2">Copy-Link</AccordionHeader>
+          <AccordionBody accordionId="2">
+            <CopyLink link="https://linkdepruebaparaelcopylink.com" />
+          </AccordionBody>
+        </AccordionItem>
       </Accordion>
     </div>
   );

package/src/copy-link/index.jsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { Button } from 'reactstrap';
+import './styles.scss';
+
+const copyToClipboard = async (text) => {
+  try {
+    if (!text) return false;
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const CopyLink = ({ link }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await copyToClipboard(link);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <span className="copy-link-container">
+      <span
+        title={link}
+        className={`copy-link-text${copied ? ' copied' : ''}`}
+        onClick={handleCopy}
+      >
+        {link}
+      </span>
+      <Button
+        color="link"
+        size="sm"
+        onClick={handleCopy}
+        title="Copiar link"
+        className="copy-link-btn"
+      >
+        📋
+      </Button>
+      {copied && (
+        <span className="copy-link-copied">
+          ¡Copiado!
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default CopyLink;

package/src/copy-link/styles.scss

@@ -0,0 +1,39 @@
+.copy-link-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  position: relative;
+}
+
+.copy-link-text {
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-weight: 500;
+  color: #007bff;
+
+  &.copied {
+    color: #28a745;
+  }
+}
+
+.copy-link-btn {
+  padding: 0;
+  font-size: 16px;
+}
+
+.copy-link-copied {
+  color: #28a745;
+  font-size: 13px;
+  margin-left: 8px;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  white-space: nowrap;
+}

package/src/index.js

@@ -7,4 +7,4 @@ export * from './CustomSelectInput';
 export * from './tomar-foto';
 export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
-
+export * from './copy-link';