mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-05-14 04:55:01 +00:00
MacRimi
224 lines
8.3 KiB
TypeScript
224 lines
8.3 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
import {
|
|
Github,
|
|
Heart,
|
|
BookOpen,
|
|
MessageSquare,
|
|
Bug,
|
|
Sparkles,
|
|
Scale,
|
|
ExternalLink,
|
|
} from "lucide-react"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card"
|
|
import { APP_VERSION } from "./release-notes-modal"
|
|
|
|
// Issue #191: a dedicated About tab. Centralises project metadata
|
|
// (version, license, author) and every external link the project
|
|
// already exposes — GitHub, docs, donation. Replaces the lone
|
|
// "Support and contribute to the project" footer link with a proper
|
|
// information surface that's easy to extend with new social channels
|
|
// without re-cluttering the dashboard footer.
|
|
|
|
interface LinkRow {
|
|
label: string
|
|
description: string
|
|
href: string
|
|
Icon: React.ComponentType<{ className?: string }>
|
|
accent?: keyof typeof ACCENT_CLASSES
|
|
}
|
|
|
|
// Tailwind only emits classes that appear as literal strings in the
|
|
// source. A dynamic `bg-${accent}/10` template does not survive the
|
|
// purge step, so each accent maps to a fully-spelled class pair below.
|
|
const ACCENT_CLASSES = {
|
|
gray: "bg-gray-500/10 text-gray-400",
|
|
blue: "bg-blue-500/10 text-blue-500",
|
|
purple: "bg-purple-500/10 text-purple-400",
|
|
red: "bg-red-500/10 text-red-500",
|
|
pink: "bg-pink-500/10 text-pink-500",
|
|
} as const
|
|
|
|
const PROJECT_LINKS: LinkRow[] = [
|
|
{
|
|
label: "GitHub repository",
|
|
description: "Source code, releases and issue tracker.",
|
|
href: "https://github.com/MacRimi/ProxMenux",
|
|
Icon: Github,
|
|
accent: "gray",
|
|
},
|
|
{
|
|
label: "Documentation",
|
|
description: "Full user guide for ProxMenux and the Monitor.",
|
|
href: "https://proxmenux.com",
|
|
Icon: BookOpen,
|
|
accent: "blue",
|
|
},
|
|
{
|
|
label: "Discussions",
|
|
description: "Ask questions, share custom AI prompts, swap ideas.",
|
|
href: "https://github.com/MacRimi/ProxMenux/discussions",
|
|
Icon: MessageSquare,
|
|
accent: "purple",
|
|
},
|
|
{
|
|
label: "Report a bug or request a feature",
|
|
description: "Open an issue on GitHub — bugs, ideas, regressions.",
|
|
href: "https://github.com/MacRimi/ProxMenux/issues",
|
|
Icon: Bug,
|
|
accent: "red",
|
|
},
|
|
]
|
|
|
|
const SUPPORT_LINKS: LinkRow[] = [
|
|
{
|
|
label: "Support the project on Ko-fi",
|
|
description: "ProxMenux is free and open source. Donations cover hosting and dev time.",
|
|
href: "https://ko-fi.com/macrimi",
|
|
Icon: Heart,
|
|
accent: "pink",
|
|
},
|
|
]
|
|
|
|
function LinkCard({ row }: { row: LinkRow }) {
|
|
const accentClass = ACCENT_CLASSES[row.accent ?? "blue"]
|
|
// Style mirrors the PCI Devices cards in the Hardware tab: subtle
|
|
// translucent background by default, slightly lighter on hover, no
|
|
// accent-coloured borders or text colour changes — keeps the look
|
|
// consistent with the rest of the project.
|
|
return (
|
|
<a
|
|
href={row.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="cursor-pointer flex items-start gap-3 rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-3 transition-colors"
|
|
>
|
|
<span
|
|
className={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md ${accentClass}`}
|
|
>
|
|
<row.Icon className="h-4 w-4" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
|
|
{row.label}
|
|
<ExternalLink className="h-3 w-3 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">{row.description}</p>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export function About() {
|
|
return (
|
|
<div className="space-y-4 md:space-y-6">
|
|
{/* Hero — logo, name, version, one-line description. */}
|
|
<Card>
|
|
<CardContent className="pt-6 pb-6">
|
|
<div className="flex flex-col md:flex-row items-center md:items-start gap-4 md:gap-6">
|
|
<div className="relative w-24 h-24 md:w-28 md:h-28 flex-shrink-0">
|
|
<Image
|
|
src="/images/proxmenux-logo.png"
|
|
alt="ProxMenux logo"
|
|
fill
|
|
priority
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
<div className="text-center md:text-left flex-1 min-w-0">
|
|
<h2 className="text-2xl md:text-3xl font-semibold text-foreground">
|
|
ProxMenux Monitor
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
A web dashboard and management layer for Proxmox VE — health monitoring,
|
|
notifications, terminal, optimization tracker and more, packaged as a single
|
|
AppImage.
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center md:justify-start gap-2 mt-3">
|
|
<span className="inline-flex items-center gap-1.5 rounded-md bg-blue-500/10 text-blue-500 border border-blue-500/30 px-2.5 py-1 text-xs font-mono">
|
|
<Sparkles className="h-3 w-3" />
|
|
v{APP_VERSION}
|
|
</span>
|
|
{/* Changelog goes to the web — the in-app modal version
|
|
duplicated content and lacked a close affordance on
|
|
some viewports, forcing a page refresh. The web
|
|
changelog is canonical and auto-syncs with releases. */}
|
|
<a
|
|
href="https://proxmenux.com/changelog"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-md bg-muted hover:bg-muted/70 transition-colors text-foreground border border-border px-2.5 py-1 text-xs"
|
|
>
|
|
Changelog
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Project links — GitHub, docs, discussions, bug tracker. */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Github className="h-4 w-4 text-muted-foreground" />
|
|
Project
|
|
</CardTitle>
|
|
<CardDescription>Repository, documentation and community channels.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{PROJECT_LINKS.map(row => (
|
|
<LinkCard key={row.href} row={row} />
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Support + License combined — donation link and licensing
|
|
info in one card. The previous layout had a separate "Author"
|
|
block that has been removed by request. */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Heart className="h-4 w-4 text-pink-500" />
|
|
Support & License
|
|
</CardTitle>
|
|
<CardDescription>
|
|
ProxMenux is free and open source under the GPL-3.0 license. If it's useful to
|
|
you, a one-off contribution helps keep it that way.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{SUPPORT_LINKS.map(row => (
|
|
<LinkCard key={row.href} row={row} />
|
|
))}
|
|
<a
|
|
href="https://github.com/MacRimi/ProxMenux/blob/main/LICENSE"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="cursor-pointer flex items-start gap-3 rounded-lg border border-white/10 sm:border-border bg-white/5 sm:bg-card sm:hover:bg-white/5 p-3 transition-colors"
|
|
>
|
|
<span className="inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-gray-500/10 text-gray-400">
|
|
<Scale className="h-4 w-4" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
|
|
GPL-3.0 license
|
|
<ExternalLink className="h-3 w-3 text-muted-foreground" />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-0.5 leading-snug">
|
|
Free software — see the LICENSE file for the full text.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|