commerce/components/generate/GenerateStoryComponent.tsx

'use-client';
import chatOperations from 'operations/chatOperations';
import { useState } from 'react';

export default function GenerateStory() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();

  const getStory = async () => {
    setLoading(true);
    const data = await chatOperations.createStoryAsync();
    setData(data);
    setLoading(false);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <button
        onClick={getStory}
        className="mb-10 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
      >
        Run A New Story
      </button>

      {loading ? <div className="mb10">Loading...</div> : null}
      {JSON.stringify(data)}
    </main>
  );
}