Clean up and tweak card layout
This commit is contained in:
@@ -1,223 +0,0 @@
|
||||
sections:
|
||||
- id: "system"
|
||||
title: "System"
|
||||
icon: "Server"
|
||||
cardStyle:
|
||||
background: "bg-blue-50 dark:bg-blue-950/30"
|
||||
iconColor: "text-blue-600 dark:text-blue-400"
|
||||
|
||||
- id: "media"
|
||||
title: "Media"
|
||||
icon: "Play"
|
||||
cardStyle:
|
||||
background: "bg-orange-50 dark:bg-orange-950/30"
|
||||
iconColor: "text-orange-600 dark:text-orange-400"
|
||||
|
||||
- id: "monitoring"
|
||||
title: "Monitoring"
|
||||
icon: "Activity"
|
||||
cardStyle:
|
||||
background: "bg-emerald-50 dark:bg-emerald-950/30"
|
||||
iconColor: "text-emerald-600 dark:text-emerald-400"
|
||||
|
||||
- id: "tools"
|
||||
title: "Tools"
|
||||
icon: "Settings"
|
||||
cardStyle:
|
||||
background: "bg-purple-50 dark:bg-purple-950/30"
|
||||
iconColor: "text-purple-600 dark:text-purple-400"
|
||||
|
||||
- id: "acot"
|
||||
title: "ACOT"
|
||||
icon: "LayoutDashboard"
|
||||
cardStyle:
|
||||
background: "bg-sky-50 dark:bg-sky-950/30"
|
||||
iconColor: "text-sky-600 dark:text-sky-400"
|
||||
|
||||
- id: "home"
|
||||
title: "Home"
|
||||
icon: "Home"
|
||||
cardStyle:
|
||||
background: "bg-indigo-50 dark:bg-indigo-950/30"
|
||||
iconColor: "text-indigo-600 dark:text-indigo-400"
|
||||
|
||||
services:
|
||||
- name: "Portainer"
|
||||
description: "Container Management"
|
||||
url: "https://portainer.kent.pw"
|
||||
iconName: "portainer"
|
||||
category: "system"
|
||||
cardStyle:
|
||||
background: "bg-blue-50 dark:bg-blue-950/30"
|
||||
iconColor: "text-blue-600 dark:text-blue-400"
|
||||
|
||||
- name: "Gitea"
|
||||
description: "Git Server"
|
||||
url: "https://gitea.kent.pw"
|
||||
iconName: "gitea"
|
||||
category: "system"
|
||||
cardStyle:
|
||||
background: "bg-green-50 dark:bg-green-950/30"
|
||||
iconColor: "text-green-600 dark:text-green-400"
|
||||
|
||||
- name: "Cockpit"
|
||||
description: "Server Management"
|
||||
url: "https://cockpit.kent.pw"
|
||||
iconName: "cockpit"
|
||||
category: "system"
|
||||
|
||||
- name: "DiskStation"
|
||||
description: "Synology NAS"
|
||||
url: "https://diskstation.kent.pw"
|
||||
iconName: "synology"
|
||||
category: "system"
|
||||
monitorName: "Synology Diskstation"
|
||||
cardStyle:
|
||||
background: "bg-slate-50 dark:bg-slate-950/30"
|
||||
iconColor: "text-slate-600 dark:text-slate-400"
|
||||
|
||||
- name: "Plex"
|
||||
description: "Media Server"
|
||||
url: "https://plex.kent.pw"
|
||||
iconName: "plex"
|
||||
category: "media"
|
||||
cardStyle:
|
||||
background: "bg-orange-50 dark:bg-orange-950/30"
|
||||
iconColor: "text-orange-600 dark:text-orange-400"
|
||||
|
||||
- name: "Sonarr"
|
||||
description: "TV Show Management"
|
||||
url: "https://sonarr.kent.pw"
|
||||
iconName: "sonarr"
|
||||
category: "media"
|
||||
cardStyle:
|
||||
background: "bg-blue-50 dark:bg-blue-950/30"
|
||||
iconColor: "text-blue-600 dark:text-blue-400"
|
||||
|
||||
- name: "Jackett"
|
||||
description: "Torrent Indexer"
|
||||
url: "https://jackett.kent.pw"
|
||||
iconName: "jackett"
|
||||
category: "media"
|
||||
|
||||
- name: "Deluge"
|
||||
description: "Torrent Client"
|
||||
url: "https://deluge.kent.pw"
|
||||
iconName: "deluge"
|
||||
category: "media"
|
||||
cardStyle:
|
||||
background: "bg-green-50 dark:bg-green-950/30"
|
||||
iconColor: "text-green-600 dark:text-green-400"
|
||||
|
||||
- name: "Uptime"
|
||||
description: "Service Monitoring"
|
||||
url: "https://uptime.kent.pw"
|
||||
iconName: "uptime-kuma"
|
||||
category: "monitoring"
|
||||
monitorName: "Uptime Kuma"
|
||||
cardStyle:
|
||||
background: "bg-emerald-50 dark:bg-emerald-950/30"
|
||||
iconColor: "text-emerald-600 dark:text-emerald-400"
|
||||
|
||||
- name: "AdGuard"
|
||||
description: "Network Ad Blocking"
|
||||
url: "https://adguard.kent.pw"
|
||||
iconName: "adguard-home"
|
||||
category: "system"
|
||||
monitorName: "Adguard Home"
|
||||
cardStyle:
|
||||
background: "bg-emerald-50 dark:bg-emerald-950/30"
|
||||
iconColor: "text-emerald-600 dark:text-emerald-400"
|
||||
|
||||
- name: "NocoDB"
|
||||
description: "Database Platform"
|
||||
url: "https://noco.kent.pw"
|
||||
iconName: "nocodb"
|
||||
category: "tools"
|
||||
monitorName: "NocoDB"
|
||||
|
||||
- name: "IT Tools"
|
||||
description: "Developer Utilities"
|
||||
url: "https://ittools.kent.pw"
|
||||
iconName: "it-tools"
|
||||
category: "tools"
|
||||
monitorName: "IT Tools"
|
||||
|
||||
- name: "Firefox"
|
||||
description: "Browser Instance"
|
||||
url: "https://firefox.kent.pw"
|
||||
iconName: "firefox"
|
||||
category: "tools"
|
||||
cardStyle:
|
||||
background: "bg-orange-50 dark:bg-orange-950/30"
|
||||
iconColor: "text-orange-600 dark:text-orange-400"
|
||||
|
||||
- name: "Speedtest"
|
||||
description: "Network Speed Monitor"
|
||||
url: "https://speedtest.kent.pw"
|
||||
iconName: "speedtest-tracker"
|
||||
category: "monitoring"
|
||||
monitorName: "Speedtest Tracker"
|
||||
cardStyle:
|
||||
background: "bg-blue-50 dark:bg-blue-950/30"
|
||||
iconColor: "text-blue-600 dark:text-blue-400"
|
||||
|
||||
- name: "Netdata"
|
||||
description: "Monitoring Dashboard"
|
||||
url: "https://netdata.kent.pw"
|
||||
iconName: "netdata"
|
||||
category: "monitoring"
|
||||
monitorName: "Netdata"
|
||||
cardStyle:
|
||||
background: "bg-purple-50 dark:bg-purple-950/30"
|
||||
iconColor: "text-purple-600 dark:text-purple-400"
|
||||
|
||||
- name: "File Browser"
|
||||
description: "Edit Server Files"
|
||||
url: "https://files.kent.pw"
|
||||
iconName: "file-browser"
|
||||
category: "monitoring"
|
||||
monitorName: "File Browser"
|
||||
cardStyle:
|
||||
background: "bg-blue-50 dark:bg-blue-950/30"
|
||||
iconColor: "text-blue-600 dark:text-blue-400"
|
||||
|
||||
- name: "Drive"
|
||||
description: "File Storage"
|
||||
url: "https://drive.kent.pw"
|
||||
iconName: "synology"
|
||||
category: "tools"
|
||||
monitorName: "Synology Drive"
|
||||
|
||||
- name: "Dashboard"
|
||||
description: "ACOT Dashboard"
|
||||
url: "https://dashboard.kent.pw"
|
||||
iconName: "lucide-layout-dashboard"
|
||||
category: "acot"
|
||||
cardStyle:
|
||||
background: "bg-sky-50 dark:bg-sky-950/30"
|
||||
iconColor: "text-sky-600 dark:text-sky-400"
|
||||
|
||||
- name: "Inventory"
|
||||
description: "ACOT Inventory"
|
||||
url: "https://inventory.kent.pw"
|
||||
iconName: "lucide-box"
|
||||
category: "acot"
|
||||
|
||||
- name: "Homebridge"
|
||||
description: "HomeKit Bridge"
|
||||
url: "https://homebridge.kent.pw"
|
||||
iconName: "homebridge"
|
||||
category: "home"
|
||||
cardStyle:
|
||||
background: "bg-purple-50 dark:bg-purple-950/30"
|
||||
iconColor: "text-purple-600 dark:text-purple-400"
|
||||
|
||||
- name: "Scrypted"
|
||||
description: "Smart Home Integration"
|
||||
url: "https://scrypted.kent.pw"
|
||||
iconName: "scrypted"
|
||||
category: "home"
|
||||
cardStyle:
|
||||
background: "bg-indigo-50 dark:bg-indigo-950/30"
|
||||
iconColor: "text-indigo-600 dark:text-indigo-400"
|
||||
@@ -43,7 +43,7 @@ sections:
|
||||
|
||||
services:
|
||||
- name: "Portainer"
|
||||
description: "Container Management"
|
||||
description: "Docker Manager"
|
||||
url: "https://portainer.kent.pw"
|
||||
iconName: "portainer"
|
||||
category: "system"
|
||||
@@ -86,7 +86,7 @@ services:
|
||||
iconColor: "text-orange-600 dark:text-orange-400"
|
||||
|
||||
- name: "Sonarr"
|
||||
description: "TV Show Management"
|
||||
description: "TV Manager"
|
||||
url: "https://sonarr.kent.pw"
|
||||
iconName: "sonarr"
|
||||
category: "media"
|
||||
@@ -120,14 +120,14 @@ services:
|
||||
iconColor: "text-emerald-600 dark:text-emerald-400"
|
||||
|
||||
- name: "AdGuard"
|
||||
description: "Network Ad Blocking"
|
||||
description: "DNS Ad Blocking"
|
||||
url: "https://adguard.kent.pw"
|
||||
iconName: "adguard-home"
|
||||
category: "system"
|
||||
monitorName: "Adguard Home"
|
||||
cardStyle:
|
||||
background: "bg-emerald-50 dark:bg-emerald-950/30"
|
||||
iconColor: "text-emerald-600 dark:text-emerald-400"
|
||||
background: "bg-green-50 dark:bg-green-950/30"
|
||||
iconColor: "text-green-600 dark:text-green-400"
|
||||
|
||||
- name: "NocoDB"
|
||||
description: "Database Platform"
|
||||
@@ -153,7 +153,7 @@ services:
|
||||
iconColor: "text-orange-600 dark:text-orange-400"
|
||||
|
||||
- name: "Speedtest"
|
||||
description: "Network Speed Monitor"
|
||||
description: "Internet Speed"
|
||||
url: "https://speedtest.kent.pw"
|
||||
iconName: "speedtest-tracker"
|
||||
category: "monitoring"
|
||||
@@ -163,7 +163,7 @@ services:
|
||||
iconColor: "text-blue-600 dark:text-blue-400"
|
||||
|
||||
- name: "Netdata"
|
||||
description: "Monitoring Dashboard"
|
||||
description: "Server Monitoring"
|
||||
url: "https://netdata.kent.pw"
|
||||
iconName: "netdata"
|
||||
category: "monitoring"
|
||||
@@ -175,8 +175,8 @@ services:
|
||||
- name: "FileBrowser"
|
||||
description: "Edit Server Files"
|
||||
url: "https://files.kent.pw"
|
||||
iconName: "file-browser"
|
||||
category: "monitoring"
|
||||
iconName: "lucide-file-terminal"
|
||||
category: "tools"
|
||||
monitorName: "File Browser"
|
||||
cardStyle:
|
||||
background: "bg-blue-50 dark:bg-blue-950/30"
|
||||
@@ -214,10 +214,30 @@ services:
|
||||
iconColor: "text-purple-600 dark:text-purple-400"
|
||||
|
||||
- name: "Scrypted"
|
||||
description: "Smart Home Integration"
|
||||
description: "Manage Cameras"
|
||||
url: "https://scrypted.kent.pw"
|
||||
iconName: "scrypted"
|
||||
category: "home"
|
||||
cardStyle:
|
||||
background: "bg-indigo-50 dark:bg-indigo-950/30"
|
||||
iconColor: "text-indigo-600 dark:text-indigo-400"
|
||||
|
||||
- name: "3D Printer"
|
||||
description: "Fluidd Interface"
|
||||
url: "https://print.kent.pw"
|
||||
iconName: "fluidd"
|
||||
category: "home"
|
||||
monitorName: "Printer"
|
||||
cardStyle:
|
||||
background: "bg-sky-50 dark:bg-sky-950/30"
|
||||
iconColor: "text-sky-600 dark:text-sky-400"
|
||||
|
||||
- name: "Go2RTC"
|
||||
description: "Stream Cameras"
|
||||
url: "https://go2rtc.kent.pw"
|
||||
iconName: "lucide-webcam"
|
||||
category: "home"
|
||||
monitorName: "Go2RTC"
|
||||
cardStyle:
|
||||
background: "bg-orange-50 dark:bg-orange-950/30"
|
||||
iconColor: "text-orange-600 dark:text-orange-400"
|
||||
12
src/App.tsx
12
src/App.tsx
@@ -145,7 +145,7 @@ function ServiceSection({ section, services, metrics }: {
|
||||
<h2 className="text-2xl font-bold">{section.title}</h2>
|
||||
<Separator className="flex-1 ml-4" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
|
||||
{services.map((service) => {
|
||||
const serviceMetrics = metrics[service.monitorName || service.name] || {
|
||||
status: 'pending',
|
||||
@@ -166,13 +166,13 @@ function ServiceSection({ section, services, metrics }: {
|
||||
rel="noopener noreferrer"
|
||||
className="transition-transform hover:scale-105"
|
||||
>
|
||||
<Card className={`${style.background} hover:${style.background}`}>
|
||||
<CardHeader className={`flex flex-row items-center justify-between space-y-0 pb-2 ${style.background}`}>
|
||||
<Card className={`${style.background} hover:${style.background} overflow-hidden`}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 md:pb-1">
|
||||
<div className="flex items-center">
|
||||
<div className={style.iconColor}>
|
||||
<ServiceIcon service={service} section={section} isDark={isDark} />
|
||||
</div>
|
||||
<CardTitle className="ml-2">{service.name}</CardTitle>
|
||||
<CardTitle className="ml-1.5">{service.name}</CardTitle>
|
||||
</div>
|
||||
<StatusIndicator
|
||||
status={serviceMetrics.status}
|
||||
@@ -180,8 +180,8 @@ function ServiceSection({ section, services, metrics }: {
|
||||
certDaysRemaining={serviceMetrics.certDaysRemaining}
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent className={style.background}>
|
||||
<CardDescription>{service.description}</CardDescription>
|
||||
<CardContent className="p-4 pt-1 hidden md:block">
|
||||
<CardDescription className="text-sm text-foreground-muted">{service.description}</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
|
||||
@@ -5,6 +5,16 @@ export default {
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /^bg-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
|
||||
variants: ['hover', 'dark']
|
||||
},
|
||||
{
|
||||
pattern: /^text-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
|
||||
variants: ['dark']
|
||||
}
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
|
||||
Reference in New Issue
Block a user