text: import { useState } from 'react';
  import useRequest from '../../hooks/useRequest';
  import Router from 'next/router';
  
  const NewTicket = () => {
    const [title, setTitle] = useState('');
    const [price, setPrice] = useState('');
    const { doRequest, errors } = useRequest({
      url: '/api/tickets',
      method: 'post',
      body: {
        title,
        price,
      },
      onSuccess: (ticket) => Router.push('/'),
    });
  
    const onBlur = () => {
      const value = parseFloat(price);
      if (isNaN(value)) {
        return;
      }
      setPrice(value.toFixed(2));
    };
  
    const onSubmit = (event) => {
      event.preventDefault();
      doRequest();
    };
  
    return (
      <div className="">
        <h1>Create a Ticket</h1>
        <form action="" onSubmit={onSubmit}>
          <div className="form-group">
            <label htmlFor="">Title</label>
            <input
              className="form-control"
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="">Price</label>
            <input
              className="form-control"
              type="text"
              value={price}
              onBlur={onBlur}
              onChange={(e) => setPrice(e.target.value)}
            />
          </div>
          <br />
          {errors}
          <button className="btn btn-primary">Submit</button>
        </form>
      </div>
    );
  };
  
  export default NewTicket;
  