120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { Shield, Settings } from "lucide-react";
|
|
|
|
export default function SecurityPage() {
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "32px 48px",
|
|
fontFamily: '"Outfit", "Inter", sans-serif',
|
|
color: "#18181b",
|
|
maxWidth: 900,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
<div>
|
|
<h1
|
|
style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
|
|
>
|
|
Security
|
|
</h1>
|
|
<p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
|
|
Manage your permissions and security rules.{" "}
|
|
<a
|
|
href="#"
|
|
style={{ color: "#18181b", textDecoration: "underline" }}
|
|
>
|
|
Learn more
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<button
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<Settings size={16} color="#18181b" />
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px dashed #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "80px 32px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginTop: 32,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 48,
|
|
height: 48,
|
|
background: "#fafafa",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
<Shield size={24} color="#18181b" />
|
|
</div>
|
|
<h2
|
|
style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 12px 0" }}
|
|
>
|
|
Check the security of your app
|
|
</h2>
|
|
<p
|
|
style={{
|
|
fontSize: "0.95rem",
|
|
color: "#71717a",
|
|
textAlign: "center",
|
|
maxWidth: 460,
|
|
margin: "0 0 24px 0",
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
Review your configuration, identify potential risks, and learn how to
|
|
strengthen your app's protection
|
|
</p>
|
|
<button
|
|
style={{
|
|
background: "#18181b",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: 8,
|
|
padding: "10px 24px",
|
|
fontSize: "0.9rem",
|
|
fontWeight: 600,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Check Security
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|