refactor(SettingsPage): replace SectionCard with SectionHeading for simplified section layout
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
This commit is contained in:
@@ -230,22 +230,17 @@ export default function SettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Карточка секции (контент без коллапса — разделы переключаются через боковое меню)
|
||||
function SectionCard({ id, title, icon: Icon, children }) {
|
||||
// Заголовок секции без вложенной карточки (контент в общем card-body)
|
||||
function SectionHeading({ title, icon: Icon }) {
|
||||
return (
|
||||
<div className="card mb-0" data-section-id={id}>
|
||||
<div className="card-header py-3">
|
||||
<h3 className="card-title m-0 d-flex align-items-center">
|
||||
{Icon && (
|
||||
<span className="me-2 d-flex align-items-center text-muted">
|
||||
<Icon size={20} />
|
||||
</span>
|
||||
)}
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="card-body">{children}</div>
|
||||
</div>
|
||||
<h2 className="h3 mb-4 d-flex align-items-center">
|
||||
{Icon && (
|
||||
<span className="me-2 d-flex align-items-center text-muted">
|
||||
<Icon size={22} />
|
||||
</span>
|
||||
)}
|
||||
{title}
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -374,11 +369,8 @@ export default function SettingsPage() {
|
||||
<div className="col-12 col-md-9 d-flex flex-column">
|
||||
<div className="card-body">
|
||||
{activeSection === 'live-doh' && (
|
||||
<SectionCard
|
||||
id="live-doh"
|
||||
title="BGP Live и DNS (DoH)"
|
||||
icon={IconPlugConnected}
|
||||
>
|
||||
<>
|
||||
<SectionHeading title="BGP Live и DNS (DoH)" icon={IconPlugConnected} />
|
||||
<div className="row g-3">
|
||||
<div className="col-12">
|
||||
<FormField
|
||||
@@ -407,15 +399,12 @@ export default function SettingsPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeSection === 'network-as' && (
|
||||
<SectionCard
|
||||
id="network-as"
|
||||
title="Сеть и AS"
|
||||
icon={IconNetwork}
|
||||
>
|
||||
<>
|
||||
<SectionHeading title="Сеть и AS" icon={IconNetwork} />
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<FormField
|
||||
@@ -430,15 +419,12 @@ export default function SettingsPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeSection === 'ping' && (
|
||||
<SectionCard
|
||||
id="ping"
|
||||
title="Пинг через MikroTik"
|
||||
icon={IconCloud}
|
||||
>
|
||||
<>
|
||||
<SectionHeading title="Пинг через MikroTik" icon={IconCloud} />
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<FormField
|
||||
@@ -466,15 +452,12 @@ export default function SettingsPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeSection === 'ping-services' && (
|
||||
<SectionCard
|
||||
id="ping-services"
|
||||
title="Пинг сервисов на главной"
|
||||
icon={IconChartPie}
|
||||
>
|
||||
<>
|
||||
<SectionHeading title="Пинг сервисов на главной" icon={IconChartPie} />
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Источник пинга</label>
|
||||
<select
|
||||
@@ -541,15 +524,12 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</SectionCard>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeSection === 'ptr-zone' && (
|
||||
<SectionCard
|
||||
id="ptr-zone"
|
||||
title="Настройка PTR зоны"
|
||||
icon={IconWorld}
|
||||
>
|
||||
<>
|
||||
<SectionHeading title="Настройка PTR зоны" icon={IconWorld} />
|
||||
<div className="row g-3">
|
||||
<div className="col-md-6">
|
||||
<FormField
|
||||
@@ -576,7 +556,7 @@ export default function SettingsPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user