sendnrw/netbird-docs
2
0
Fork 0
mirror of https://github.com/netbirdio/docs.git synced 2026-08-27 02:01:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Self Hosted Quickstart and Other Changes (#543)

Browse Source
This commit is contained in:
Brandon Hopkins
2026-01-13 01:59:05 -08:00
committed by GitHub
parent 2901b505ba
commit 105e6774db
21 changed files with 196 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Button.jsx
View File

@@ -23,6 +23,8 @@ const variantStyles = {
'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-netbird dark:text-white dark:hover:bg-netbird-dark',
outline:
'rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white',
'outline-arrow':
'rounded-[5px] text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white duration-300 relative overflow-hidden group',
text: 'text-netbird hover:text-netbird-dark dark:text-netbird dark:hover:text-netbird-light',
}
@@ -52,12 +54,16 @@ export function Button({
/>
)
if (variant === 'primary') {
if (variant === 'primary' || variant === 'outline-arrow') {
return (
<div className="relative inline-flex group transition-all" onClick={props.href ? undefined : props.onClick}>
<span className="absolute h-full w-full left-0 top-0 blur-sm bg-netbird z-0 transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
{variant === 'primary' && (
<span className="absolute h-full w-full left-0 top-0 blur-sm bg-netbird z-0 transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
)}
<Component className={className} {...props}>
<span className="absolute h-full w-full left-0 top-0 z-10 bg-gradient-to-br from-netbird to-netbird-dark transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
{variant === 'primary' && (
<span className="absolute h-full w-full left-0 top-0 z-10 bg-gradient-to-br from-netbird to-netbird-dark transition-all duration-200 transform-gpu opacity-0 group-hover:opacity-100 pointer-events-none"></span>
)}
<span className="z-20 relative flex gap-2 items-center transition-all">
{arrow === 'left' && arrowIcon}
{children}

2
src/components/Header.jsx
View File

@@ -77,7 +77,7 @@ export const Header = forwardRef(function Header({ className }, ref) {
<ModeToggle />
</div>
<div className="hidden min-[416px]:contents">
<Button href="https://app.netbird.io/" target="_blank">Try NetBird</Button>
<Button href="https://app.netbird.io/" target="_blank" className="!py-1.5 !px-3 text-xs">Try NetBird</Button>
</div>
</div>
</motion.div>

20
src/components/Tiles.jsx
View File

@@ -42,16 +42,26 @@ function TilePattern({ mouseX, mouseY }) {
*
* @param {string} title - The heading title for the tiles section
* @param {string} [id] - Optional id for the heading anchor
* @param {string} [description] - Optional description text to display below the title
* @param {Array<{href: string, name: string, description: string}>} items - Array of tile items
* @param {string} [buttonText='Read more'] - Optional button text (defaults to "Read more")
*/
export function Tiles({ title, id, items, buttonText = 'Read more' }) {
export function Tiles({ title, id, description, items, buttonText = 'Read more' }) {
const hasHeader = title || description;
return (
<div className="my-16 xl:max-w-none">
<Heading level={2} id={id} anchor={!!id}>
{title}
</Heading>
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2">
{title && (
<Heading level={2} id={id} anchor={!!id}>
{title}
</Heading>
)}
{description && (
<div className={`text-sm text-zinc-600 dark:text-zinc-400 ${title ? 'mt-4' : ''}`}>
{description}
</div>
)}
<div className={`not-prose grid grid-cols-1 gap-8 sm:grid-cols-2 ${hasHeader ? 'mt-4 border-t border-zinc-900/5 pt-10 dark:border-white/5' : ''}`}>
{items.map((item) => {
let mouseX = useMotionValue(0)
let mouseY = useMotionValue(0)