4e4afe2545
Replaces the 2-column masonry layout with a horizontal pill tab bar matching the admin page pattern. Extracts all sections into self-contained components under components/Settings/ and reduces SettingsPage.tsx from 1554 lines to 93. Adds i18n tab label keys across all 13 language files.
23 lines
820 B
TypeScript
23 lines
820 B
TypeScript
import React from 'react'
|
|
import type { LucideIcon } from 'lucide-react'
|
|
|
|
interface SectionProps {
|
|
title: string
|
|
icon: LucideIcon
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export default function Section({ title, icon: Icon, children }: SectionProps): React.ReactElement {
|
|
return (
|
|
<div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', marginBottom: 24 }}>
|
|
<div className="px-6 py-4 border-b flex items-center gap-2" style={{ borderColor: 'var(--border-secondary)' }}>
|
|
<Icon className="w-5 h-5" style={{ color: 'var(--text-secondary)' }} />
|
|
<h2 className="font-semibold" style={{ color: 'var(--text-primary)' }}>{title}</h2>
|
|
</div>
|
|
<div className="p-6 space-y-4">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|