gbanyan
f7f2451357
- Add homelab-device-hero component (Proxmox VE + Router icon, Switch, TrueNAS) - Dashed lines for network connections between devices - Custom not-found page (replace Next.js 404) - Homelab page uses CSS hero instead of feature image Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
'use client';
|
||
|
||
import { SiTruenas, SiProxmox } from 'react-icons/si';
|
||
import { FiServer } from 'react-icons/fi';
|
||
|
||
/**
|
||
* HomeLab 設備展示：Proxmox VE + VyOS、Switch、NAS (TrueNAS)
|
||
* 使用純 CSS 藝術，取代 HomeLab 頁的 feature_image
|
||
*/
|
||
export function HomeLabDeviceHero() {
|
||
return (
|
||
<div
|
||
className="homelab-device-hero -mx-4 mb-6 flex justify-center py-4 sm:-mx-12 sm:py-6 lg:-mx-20 lg:py-8 group-[.toc-open]:lg:-mx-4"
|
||
role="img"
|
||
aria-label="HomeLab 設備：Proxmox VE、VyOS、交換器、NAS (TrueNAS)"
|
||
>
|
||
<div className="homelab-device-scene w-full max-w-full">
|
||
<div className="homelab-rack">
|
||
{/* Proxmox VE + VyOS Host */}
|
||
<div className="homelab-router">
|
||
<div className="homelab-router-body">
|
||
<div className="homelab-router-leds">
|
||
<span className="homelab-led homelab-led-power" aria-hidden />
|
||
<span className="homelab-led homelab-led-wan" aria-hidden />
|
||
<span className="homelab-led homelab-led-lan" aria-hidden />
|
||
</div>
|
||
<div className="homelab-router-logos">
|
||
<SiProxmox className="homelab-proxmox-logo homelab-logo-svg" aria-label="Proxmox VE" />
|
||
<FiServer className="homelab-router-icon homelab-logo-svg" aria-label="VyOS Router" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 網路線 - 連接 Proxmox 與 Switch */}
|
||
<div className="homelab-cable" aria-hidden>
|
||
<span className="homelab-cable-line" />
|
||
</div>
|
||
|
||
{/* Switch */}
|
||
<div className="homelab-switch">
|
||
<div className="homelab-switch-body">
|
||
<div className="homelab-switch-ports">
|
||
{[1, 2].map((row) => (
|
||
<div key={row} className="homelab-port-row">
|
||
{Array.from({ length: 8 }).map((_, i) => (
|
||
<div key={i} className="homelab-port">
|
||
<span className="homelab-port-led homelab-port-led-active" aria-hidden />
|
||
</div>
|
||
))}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 網路線 - 連接 Switch 與 NAS */}
|
||
<div className="homelab-cable" aria-hidden>
|
||
<span className="homelab-cable-line" />
|
||
</div>
|
||
|
||
{/* NAS - TrueNAS */}
|
||
<div className="homelab-nas">
|
||
<div className="homelab-nas-body">
|
||
<div className="homelab-nas-drives">
|
||
{[1, 2, 3, 4].map((i) => (
|
||
<div key={i} className="homelab-drive-slot" aria-hidden />
|
||
))}
|
||
</div>
|
||
<div className="homelab-nas-logo" aria-label="TrueNAS logo">
|
||
<SiTruenas className="homelab-truenas-logo" size={28} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|