commerce/components/common/Subscribe/subscribe.jsx

import { useState, useEffect } from 'react'
import { validate } from 'email-validator'
import { Button } from '@components/ui'
import useSubscribe from '@framework/subscriptions/use-subscribe'

const Subscribe = () => {
  const [loading, setLoading] = useState(false)
  const [email, setEmail] = useState('')

  const subscribe = useSubscribe()

  const handleChange = (event) => {
    setEmail(event.target.value)
  }

  const handleSubscribe = async (event) => {
    event.preventDefault()
    setLoading(true)
    try {
      await subscribe({
        email: email,
      })
      setLoading(false)
    } catch (err) {
      console.error(err)
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubscribe} class="w-full max-w-sm">
      <div class="flex items-center border-b border-teal-500 py-2">
        <input
          class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
          type="email"
          placeholder="janedoe@gmail.com"
          aria-label="Email"
          onChange={handleChange}
        />
        <Button variant="slim" className="mt-1 h-8 " loading={loading}>
          S'INSCRIRE
        </Button>
        {/* <button class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded" type="button">
      Sign Up
    </button> */}
      </div>
    </form>
  )
}

export default Subscribe