Add option to copy peer details (ip, public ip, hostname, domain name) in detailed peer view (#356)

src/app/(dashboard)/peer/page.tsx

@@ -306,6 +306,8 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
     <Card>
       <Card.List>
         <Card.ListItem
+          copy
+          copyText={"NetBird IP-Address"}
           label={
             <>
               <MapPin size={16} />
@@ -316,6 +318,8 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
         />
 
         <Card.ListItem
+          copy
+          copyText={"Public IP-Address"}
           label={
             <>
               <NetworkIcon size={16} />
@@ -325,6 +329,30 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           value={peer.connection_ip}
         />
 
+        <Card.ListItem
+          copy
+          copyText={"Domain name"}
+          label={
+            <>
+              <Globe size={16} />
+              Domain Name
+            </>
+          }
+          value={peer.dns_label}
+        />
+
+        <Card.ListItem
+          copy
+          copyText={"Hostname"}
+          label={
+            <>
+              <MonitorSmartphoneIcon size={16} />
+              Hostname
+            </>
+          }
+          value={peer.hostname}
+        />
+
         <Card.ListItem
           label={
             <>
@@ -353,24 +381,6 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
         />
 
-        <Card.ListItem
-          label={
-            <>
-              <Globe size={16} />
-              Domain Name
-            </>
-          }
-          value={peer.dns_label}
-        />
-        <Card.ListItem
-          label={
-            <>
-              <MonitorSmartphoneIcon size={16} />
-              Hostname
-            </>
-          }
-          value={peer.hostname}
-        />
         <Card.ListItem
           label={
             <>

src/components/Card.tsx

@@ -30,6 +30,7 @@ type CardListItemProps = {
   value: React.ReactNode;
   className?: string;
   copy?: boolean;
+  copyText?: string;
   tooltip?: boolean;
 };
 
@@ -38,6 +39,7 @@ function CardListItem({
   value,
   className,
   copy = false,
+  copyText,
   tooltip = true,
 }: CardListItemProps) {
   const [, copyToClipBoard] = useCopyToClipboard(value as string);
@@ -56,7 +58,10 @@ function CardListItem({
           copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
         )}
         onClick={() =>
-          copy && copyToClipBoard(`${label} has been copied to clipboard.`)
+          copy &&
+          copyToClipBoard(
+            `${copyText ? copyText : label} has been copied to clipboard.`,
+          )
         }
       >
         {tooltip ? (
@@ -64,7 +69,7 @@ function CardListItem({
         ) : (
           value
         )}
-        {copy && <Copy size={13} />}
+        {copy && <Copy size={13} className={"shrink-0"} />}
       </div>
     </li>
   );