feat: add sections components
This commit is contained in:
parent
f46a8d66d3
commit
ab85b5e1fa
|
|
@ -6,6 +6,7 @@ import { createProjectApiKey, listApiKeys } from '@/lib/actions/apiKeyActions';
|
|||
import KeyDisplay from '@/components/admin/KeyDisplay';
|
||||
import AdminFormInput from '@/components/admin/AdminFormInput';
|
||||
import AdminButton from '@/components/admin/AdminButton';
|
||||
import { Section } from '@/components/shared/Section';
|
||||
|
||||
const STORAGE_KEY = 'banatie_master_key';
|
||||
|
||||
|
|
@ -68,7 +69,7 @@ export default function ApiKeysPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-6 py-8">
|
||||
<Section>
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<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>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { bootstrapMasterKey } from '@/lib/actions/apiKeyActions';
|
|||
import KeyDisplay from '@/components/admin/KeyDisplay';
|
||||
import AdminFormInput from '@/components/admin/AdminFormInput';
|
||||
import AdminButton from '@/components/admin/AdminButton';
|
||||
import { NarrowSection } from '@/components/shared/NarrowSection';
|
||||
|
||||
const STORAGE_KEY = 'banatie_master_key';
|
||||
|
||||
|
|
@ -66,7 +67,7 @@ export default function MasterKeyPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-6 py-8">
|
||||
<NarrowSection>
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<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
|
||||
</AdminButton>
|
||||
</div>
|
||||
</div>
|
||||
</NarrowSection>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue