Quote of the Day v1.0.0

qotd_001.tsx

function QuoteOfTheDay() {
  const [quote, setQuote] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.quotable.io/random")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Failed to fetch quote");
        }
        return response.json();
      })
      .then((data) => {
        setQuote(data.content);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setIsLoading(false);
      });
  }, []);

  return (
    <main className={styles.main}>
      <h1>Quote of the Day</h1>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error}</p>
      ) : (
        <blockquote>
          <p>{quote}</p>
        </blockquote>
      )}
    </main>
  );
}