```tsx import React from "react"; import { createClient } from "@supabase/supabase-js"; const supabaseUrl = "https://your-supabase-url.supabase.co"; const supabaseAnonKey = "your-anon-key"; const supabase = createClient(supabaseUrl, supabaseAnonKey); export default function App() { const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [username, setUsername] = React.useState(""); const [password, setPassword] = React.useState(""); const [posts, setPosts] = React.useState([]); const handleLogin = () => { if (username === "admin" && password === "admin123") { setIsLoggedIn(true); } else { alert("Invalid credentials"); } }; const fetchPosts = async () => { const { data } = await supabase.from("posts").select("*"); setPosts(data); }; React.useEffect(() => { if (isLoggedIn) { fetchPosts(); } }, [isLoggedIn]); return (

{!isLoggedIn ? (

Admin Login

setUsername(e.target.value)} className="p-2 border rounded mb-4 w-full" /> setPassword(e.target.value)} className="p-2 border rounded mb-4 w-full" />

) : (

Blog Posts

{posts.map((post) => (

{post.title}

{post.content}

))}

)}

); } ```