import { AuthModal } from "crefy-connect";

export default function App() {
  return (
    <div>
      <h1>My App</h1>
      <AuthModal />
    </div>
  );
}

import { AuthModal } from "crefy-connect";
import "./styles.css";

export default function App() {
  return (
    <div>
      <h1>Custom AuthModal Example</h1>
      <AuthModal buttonClassName="my-custom-btn" />
    </div>
  );
}

/* styles.css */
.my-custom-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.my-custom-btn:hover {
  transform: translateY(-2px);
}

import { AuthModal } from "crefy-connect";

export default function App() {
  return (
    <div>
      <h1>Custom AuthModal Example</h1>
      <AuthModal
        buttonStyle={{
          background: "#111",
          color: "#fff",
          borderRadius: "12px",
          padding: "10px 18px",
          border: "1px solid #333",
          cursor: "pointer",
        }}
      />
    </div>
  );
}

import { AuthModal } from "crefy-connect";

export default function App() {
  return (
    <div>
      <h1>Custom AuthModal Example</h1>
      <AuthModal
        buttonClassName="my-custom-btn"
        buttonStyle={{
          fontSize: "18px",
          fontWeight: "bold",
        }}
      />
    </div>
  );
}

import { AuthModal, useCrefy } from "crefy-connect";

export default function App() {
  const { isAuthenticated, user } = useCrefy();

  return (
    <div>
      {!isAuthenticated ? (
        <AuthModal />
      ) : (
        <div>
          <p>Welcome, {user?.userData?.email}!</p>
          {/* Your authenticated content */}
        </div>
      )}
    </div>
  );
}