function BlogList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://api.zunoy.cms/v1/post", {
      headers: { "X-Zunoy-Key": import.meta.env.VITE_ZUNOY_KEY }
    })
      .then((res) => res.json())
      .then((data) => setPosts(data.entries));
  }, []);

  return posts.map((post) => (
    <article key={post.id}>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </article>
  ));
}

function useBlogPosts() {
  return useQuery({
    queryKey: ["posts"],
    queryFn: () =>
      fetch("https://api.zunoy.cms/v1/post", {
        headers: { "X-Zunoy-Key": import.meta.env.VITE_ZUNOY_KEY }
      }).then((r) => r.json())
  });
}

function ContactForm() {
  const [status, setStatus] = useState("idle");

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(e.target));

    const res = await fetch(
      "https://api.zunoy.cms/v1/forms/main/contact-us",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Zunoy-Key": import.meta.env.VITE_ZUNOY_KEY
        },
        body: JSON.stringify(data)
      }
    );

    setStatus(res.ok ? "sent" : "error");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
    </form>
  );
}

<form
  action="https://api.zunoy.cms/v1/forms/main/contact-us?redirect=/thanks"
  method="POST"
>
  <input name="email" type="email" required />
  <textarea name="message" required />
  <button type="submit">Send</button>
</form>

function AskBar() {
  const [question, setQuestion] = useState("");
  const [answer, setAnswer] = useState(null);

  async function ask(e) {
    e.preventDefault();
    const res = await fetch(
      `https://api.zunoy.cms/v1/_ask?q=${encodeURIComponent(question)}`,
      { headers: { "X-Zunoy-Key": import.meta.env.VITE_ZUNOY_KEY } }
    );
    setAnswer(await res.json());
  }

  return (
    <>
      <form onSubmit={ask}>
        <input
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
          placeholder="Ask about our product…"
        />
      </form>
      {answer && (
        <div>
          <p>{answer.answer}</p>
          <ul>
            {answer.sources.map((s) => (
              <li key={s.id}><a href={s.url}>{s.title}</a></li>
            ))}
          </ul>
        </div>
      )}
    </>
  );
}

import { ConsentProvider } from "@zunoy/consent";

function App({ children }) {
  return (
    <ConsentProvider
      options={{
        baseUrl: "https://api.zunoy.cms/v1/cms",
        apiKey: import.meta.env.VITE_ZUNOY_KEY
      }}
    >
      {children}
    </ConsentProvider>
  );
}

import { useConsent } from "@zunoy/consent";

function ConsentBanner() {
  const { needsConsent, acceptAll, rejectAll, dismiss } = useConsent();
  if (!needsConsent) return null;

  return (
    <div className="consent-banner">
      <p>We use cookies to improve your experience.</p>
      <button onClick={acceptAll}>Accept all</button>
      <button onClick={rejectAll}>Reject all</button>
      <button onClick={dismiss} aria-label="Close">×</button>
    </div>
  );
}