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