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 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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