sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-04-17 16:06:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Badge Tooltip (#293)

Browse Source
This commit is contained in:
Pascal Fischer
2025-03-21 16:27:20 +01:00
committed by GitHub
parent fcb05855b3
commit 42ef357778
4 changed files with 80 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Badge.jsx
View File

@@ -1,26 +1,81 @@
export function Badge({ status, text }) {
import { useState } from 'react';
export function Badge({ status, text, hoverText }) {
const [isHovered, setIsHovered] = useState(false);
const getStatusStyles = (status) => {
switch (status) {
case 'info':
// Never tested colors
return 'bg-blue-300/30 text-blue-400 dark:bg-blue-400/10 dark:text-blue-400';
return 'text-blue-400';
case 'warning':
return 'bg-orange-300/30 text-orange-400 dark:bg-yellow-600/10 dark:text-yellow-600';
return 'text-yellow-600';
case 'error':
// Never tested colors
return 'bg-red-300/30 text-red-400 dark:bg-red-400/10 dark:text-red-400';
return 'text-red-400';
case 'cloud-only':
return 'bg-orange-200/50 text-orange-400 dark:bg-orange-600/20 dark:text-orange-400';
return 'text-orange-400';
case 'experimental':
return 'bg-teal-200/50 text-teal-400 dark:bg-teal-500/15 dark:text-teal-400';
return 'text-teal-400';
default:
return 'bg-gray-500/30 text-gray-600 dark:bg-gray-400/10 dark:text-gray-400';
return 'text-gray-400';
}
};
const baseStyle = 'rounded-md py-0.5 px-2 text-sm';
const getStatusBorder = (status) => {
switch (status) {
case 'info':
return 'border-blue-400';
case 'warning':
return 'border-yellow-600';
case 'error':
return 'border-red-400';
case 'cloud-only':
return 'border-orange-400';
case 'experimental':
return 'border-teal-400';
default:
return 'border-gray-400';
}
};
const statusStyle = getStatusStyles(status);
const getBadgeBg = (status) => {
switch (status) {
case 'info':
return 'bg-blue-300/30 dark:bg-blue-400/10';
case 'warning':
return 'bg-orange-300/30 dark:bg-yellow-600/10';
case 'error':
return 'bg-red-300/30 dark:bg-red-400/10';
case 'cloud-only':
return 'bg-orange-200/50 dark:bg-orange-600/20';
case 'experimental':
return 'bg-teal-200/50 dark:bg-teal-500/15';
default:
return 'bg-gray-500/30 dark:bg-gray-400/10';
}
};
return <span className={`${baseStyle} ${statusStyle}`}>{text}</span>;
}
const baseStyle = 'relative inline-block rounded-md py-0.5 px-2 text-sm';
const textColor = getStatusStyles(status);
const bgColor = getBadgeBg(status);
const borderStyle = getStatusBorder(status);
return (
<span
className={`${baseStyle} ${bgColor} ${textColor}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{text}
{hoverText && isHovered && (
<div className={`
absolute z-10 left-1/2 -translate-x-1/2 mt-2 w-max max-w-xs p-3
rounded-md whitespace-pre-line
dark:bg-zinc-900/5 bg-white-900/5 backdrop-blur-md border ${borderStyle}
${textColor} shadow-lg
`}>
{hoverText}
</div>
)}
</span>
);
}

2
src/pages/ipa/resources/events.mdx
View File

@@ -211,7 +211,7 @@ echo $response;
---
## List all Network Traffic Events <Badge status="cloud-only" text="Cloud-Only" /> <Badge status="experimental" text="Experimental" /> {{ tag: 'GET' , label: '/api/events/network-traffic' }}
## List all Network Traffic Events <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> <Badge status="experimental" text="Experimental" hoverText="This feature is experimental. The endpoint will likely change and does not guarantee backwards compatibility." /> {{ tag: 'GET' , label: '/api/events/network-traffic' }}
<Row>
<Col>

20
src/pages/ipa/resources/ingress-ports.mdx
View File

@@ -2,7 +2,7 @@ export const title = 'Ingress Ports'
## List all Port Allocations <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports' }}
## List all Port Allocations <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports' }}
<Row>
<Col>
@@ -226,7 +226,7 @@ echo $response;
---
## Create a Port Allocation <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'POST' , label: '/api/peers/{peerId}/ingress/ports' }}
## Create a Port Allocation <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'POST' , label: '/api/peers/{peerId}/ingress/ports' }}
<Row>
<Col>
@@ -614,7 +614,7 @@ echo $response;
---
## Retrieve a Port Allocation <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
## Retrieve a Port Allocation <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'GET' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
<Row>
<Col>
@@ -830,7 +830,7 @@ echo $response;
---
## Update a Port Allocation <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'PUT' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
## Update a Port Allocation <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'PUT' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
<Row>
<Col>
@@ -1222,7 +1222,7 @@ echo $response;
---
## Delete a Port Allocation <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'DELETE' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
## Delete a Port Allocation <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'DELETE' , label: '/api/peers/{peerId}/ingress/ports/{allocationId}' }}
<Row>
<Col>
@@ -1390,7 +1390,7 @@ echo $response;
---
## List all Ingress Peers <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'GET' , label: '/api/ingress/peers' }}
## List all Ingress Peers <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'GET' , label: '/api/ingress/peers' }}
<Row>
<Col>
@@ -1590,7 +1590,7 @@ echo $response;
---
## Create a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'POST' , label: '/api/ingress/peers' }}
## Create a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'POST' , label: '/api/ingress/peers' }}
<Row>
<Col>
@@ -1848,7 +1848,7 @@ echo $response;
---
## Retrieve a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'GET' , label: '/api/ingress/peers/{ingressPeerId}' }}
## Retrieve a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'GET' , label: '/api/ingress/peers/{ingressPeerId}' }}
<Row>
<Col>
@@ -2052,7 +2052,7 @@ echo $response;
---
## Update a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'PUT' , label: '/api/ingress/peers/{ingressPeerId}' }}
## Update a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'PUT' , label: '/api/ingress/peers/{ingressPeerId}' }}
<Row>
<Col>
@@ -2306,7 +2306,7 @@ echo $response;
---
## Delete a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" /> {{ tag: 'DELETE' , label: '/api/ingress/peers/{ingressPeerId}' }}
## Delete a Ingress Peer <Badge status="cloud-only" text="Cloud-Only" hoverText="This feature is only available in the cloud version of NetBird." /> {{ tag: 'DELETE' , label: '/api/ingress/peers/{ingressPeerId}' }}
<Row>
<Col>