Lagt til knapp for å kopiere link

Author: Sigurdomnes

frontend/public/icons/copy.svg

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import {apiRequest} from "../../util/api/apiRequest.ts";
 import {
+    IconContainer,
     StyledLink,
     StyledTable,
     TableCell,
@@ -47,6 +48,12 @@ export default function ShowAllUrls() {
             });
     }
 
+    function handleCopyClick(url: string) {
+        navigator.clipboard.writeText(url).then(() => {
+
+        });
+    }
+
     return (
         <TableContainer>
             {loading && <p>Loading...</p>}
@@ -70,9 +77,16 @@ export default function ShowAllUrls() {
                         <TableRow key={url.id}>
                             <TableCell>{url.id}</TableCell>
                             <TableCell>
-                                <StyledLink href={import.meta.env.VITE_BASE_URL + url.shortUrl} target="_blank" rel="noopener noreferrer">
-                                    {url.shortUrl}
-                                </StyledLink>
+                                <IconContainer>
+                                    <Icon icon="copy" onClick={() => {
+                                        handleCopyClick(import.meta.env.VITE_BASE_URL + url.shortUrl)
+                                    }}/>
+                                    <StyledLink href={import.meta.env.VITE_BASE_URL + url.shortUrl} target="_blank"
+                                                rel="noopener noreferrer">
+                                        {url.shortUrl}
+                                    </StyledLink>
+
+                                </IconContainer>
                             </TableCell>
                             <TableCell>
                                 <StyledLink href={url.longUrl} target="_blank" rel="noopener noreferrer">
@@ -82,7 +96,9 @@ export default function ShowAllUrls() {
                             <TableCell>{new Date(url.createdAt).toLocaleString()}</TableCell>
                             <TableCell>{url.createdBy || "Unknown"}</TableCell>
                             <TableCell>{url.clicks}</TableCell>
-                            <TableCell><Icon icon="close" onClick={() => {handleDeleteClick(url.id)}}></Icon></TableCell>
+                            <TableCell><Icon icon="close" onClick={() => {
+                                handleDeleteClick(url.id)
+                            }}></Icon></TableCell>
                         </TableRow>
                     ))}
                     </tbody>

frontend/src/components/ShowAll/ShowAll.tsx

@@ -30,6 +30,7 @@ export const TableRow = styled.tr`
 
 export const TableCell = styled.td`
     padding: 6px;
+    position: relative;
     border: 1px solid #ddd;
     text-align: left;
     font-size: 14px;
@@ -51,3 +52,10 @@ export const StyledLink = styled.a`
         text-decoration: underline;
     }
 `;
+
+export const IconContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: .4rem;
+    width: 100%;
+`

frontend/src/components/ShowAll/showall.style.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const StyledIcon = styled.img`
-    height: 1.1rem;
+    height: 1rem;
     &:hover {
         cursor: pointer;
     }