NixReaperandClaude Sonnet 4.6
c5498994c3
Frontend: - Extract Layout.tsx (801 lines) into navData.ts, Sidebar.tsx, and thin Layout.tsx - Split Settings.tsx into settings/FormControls, ContactTab, BasicTab, NameserversSection - Add server-configuration/ section with index card grid and one file per tool (13 tools) - Add shared SectionCard and ComingSoon components - Nav category headers with a section index link (optional `to` field on NavCategory) - /settings redirects to /server-configuration/basic-setup Backend: - Split accounts.ts (671 lines) into accounts/list, create, modify, status sub-plugins - Add GET /api/nixserver/system/network-interfaces for ETHDEV dropdown Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import { Link } from 'react-router-dom'
|
|
import type { ComponentType } from 'react'
|
|
|
|
interface SectionCardProps {
|
|
label: string
|
|
description?: string
|
|
to: string
|
|
icon?: ComponentType<{ size?: number; className?: string }>
|
|
comingSoon?: boolean
|
|
}
|
|
|
|
export default function SectionCard({ label, description, to, icon: Icon, comingSoon }: SectionCardProps) {
|
|
if (comingSoon) {
|
|
return (
|
|
<div className="flex items-start gap-3 p-4 rounded-xl border border-[#2a2d3e] bg-[#0f1117] opacity-50 cursor-not-allowed select-none">
|
|
{Icon && (
|
|
<div className="w-8 h-8 rounded-lg bg-[#1e2130] flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<Icon size={15} className="text-[#475569]" />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className="text-[#64748b] text-sm font-medium truncate">{label}</p>
|
|
{description && <p className="text-[#374151] text-xs mt-0.5 line-clamp-2">{description}</p>}
|
|
<span className="inline-block mt-1 text-[10px] text-[#374151] border border-[#2a2d3e] rounded px-1.5 py-0.5">Coming soon</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className="flex items-start gap-3 p-4 rounded-xl border border-[#2a2d3e] bg-[#0f1117] hover:bg-[#1a1d27] hover:border-indigo-500/40 transition-colors group"
|
|
>
|
|
{Icon && (
|
|
<div className="w-8 h-8 rounded-lg bg-indigo-600/10 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-indigo-600/20 transition-colors">
|
|
<Icon size={15} className="text-indigo-400" />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className="text-[#cbd5e1] text-sm font-medium truncate group-hover:text-white transition-colors">{label}</p>
|
|
{description && <p className="text-[#475569] text-xs mt-0.5 line-clamp-2">{description}</p>}
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|