feat: add sections components

This commit is contained in:
Oleg Proskurin 2025-10-25 22:01:26 +07:00
parent f46a8d66d3
commit ab85b5e1fa
4 changed files with 40 additions and 4 deletions

View File

@ -6,6 +6,7 @@ import { createProjectApiKey, listApiKeys } from '@/lib/actions/apiKeyActions';
import KeyDisplay from '@/components/admin/KeyDisplay'; import KeyDisplay from '@/components/admin/KeyDisplay';
import AdminFormInput from '@/components/admin/AdminFormInput'; import AdminFormInput from '@/components/admin/AdminFormInput';
import AdminButton from '@/components/admin/AdminButton'; import AdminButton from '@/components/admin/AdminButton';
import { Section } from '@/components/shared/Section';
const STORAGE_KEY = 'banatie_master_key'; const STORAGE_KEY = 'banatie_master_key';
@ -68,7 +69,7 @@ export default function ApiKeysPage() {
} }
return ( return (
<div className="max-w-6xl mx-auto px-6 py-8"> <Section>
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-4xl font-bold text-white mb-2">Project API Keys</h1> <h1 className="text-4xl font-bold text-white mb-2">Project API Keys</h1>
@ -188,6 +189,6 @@ export default function ApiKeysPage() {
</div> </div>
)} )}
</div> </div>
</div> </Section>
); );
} }

View File

@ -5,6 +5,7 @@ import { bootstrapMasterKey } from '@/lib/actions/apiKeyActions';
import KeyDisplay from '@/components/admin/KeyDisplay'; import KeyDisplay from '@/components/admin/KeyDisplay';
import AdminFormInput from '@/components/admin/AdminFormInput'; import AdminFormInput from '@/components/admin/AdminFormInput';
import AdminButton from '@/components/admin/AdminButton'; import AdminButton from '@/components/admin/AdminButton';
import { NarrowSection } from '@/components/shared/NarrowSection';
const STORAGE_KEY = 'banatie_master_key'; const STORAGE_KEY = 'banatie_master_key';
@ -66,7 +67,7 @@ export default function MasterKeyPage() {
}; };
return ( return (
<div className="max-w-4xl mx-auto px-6 py-8"> <NarrowSection>
{/* Page Header */} {/* Page Header */}
<div className="mb-8"> <div className="mb-8">
<h1 className="text-4xl font-bold text-white mb-2">Master Key Management</h1> <h1 className="text-4xl font-bold text-white mb-2">Master Key Management</h1>
@ -132,6 +133,6 @@ export default function MasterKeyPage() {
Save Manual Key Save Manual Key
</AdminButton> </AdminButton>
</div> </div>
</div> </NarrowSection>
); );
} }

View File

@ -0,0 +1,17 @@
import { ReactNode } from 'react';
interface NarrowSectionProps {
children: ReactNode;
className?: string;
bgClassName?: string;
}
export const NarrowSection = ({ children, className = '', bgClassName = '' }: NarrowSectionProps) => {
return (
<div className={bgClassName}>
<div className={`max-w-4xl mx-auto px-6 py-8 ${className}`}>
{children}
</div>
</div>
);
};

View File

@ -0,0 +1,17 @@
import { ReactNode } from 'react';
interface SectionProps {
children: ReactNode;
className?: string;
bgClassName?: string;
}
export const Section = ({ children, className = '', bgClassName = '' }: SectionProps) => {
return (
<div className={bgClassName}>
<div className={`max-w-7xl mx-auto px-6 py-8 ${className}`}>
{children}
</div>
</div>
);
};