Teteh Wesha

App.jsx

import { useState } from 'react'

function App() {
  const [inputPage, setInputPage] = useState(false)
  const [success, setSuccess] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [inputValue, setInputValue] = useState("")

  const onNope  = e => {
    const randomX = Math.floor(Math.random() * window.innerWidth - 100)
    const randomY = Math.floor(Math.random() * window.innerHeight - 100)

    e.target.style.position = "absolute"
    e.target.style.top = `${randomY}px`
    e.target.style.left = `${randomX}px`

  }

  const onSubmit = async () => {
    if (inputValue.length === 0) return alert("Please input your number, teh")

    setSubmitting(true)
    try {
      const response = await fetch(
        "https://sheetdb.io/api/v1/897mn4zjg43co",
        {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
          body: JSON.stringify(
            {
              data: [
                {
                  number: inputValue,
                  submitted_at: new Date().toISOString()
                }
              ]
            }
          )
        }
      )

      if (!response.ok) alert("Something went wrong, teh")
      else setSuccess(true)
    } catch (error) {
      alert("Something went wrong, teh", error)
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="h-screen px-4 bg-slate-100 flex flex-col justify-center items-center">
      {
        success ? (
          <p className="text-2xl text-center font-bold text-slate-900">
            Thank youu, teteh 🤩🤩🚀
          </p>
        ) : (
          <>
            <div className="space-y-6">
              <div className="space-y-4">
                <p className="text-2xl text-center font-bold text-slate-900">
                  {!inputPage ? "Would you share your number to me, teh🥺" : "😍😍😍"}
                </p>
                <p className="text-lg text-center text-slate-700">
                  {!inputPage ? "Click the button below 👇👇": "Enter your number below, teh"}
                </p>
              </div>
              {
                inputPage ? (
                  <div className="flex  justify-center space-x-4">
                    <input 
                      value={inputValue}
                      onChange={e => setInputValue(e.target.value)}
                      type="tel" 
                      className="border border-slate-300 rounded-lg px-4 py-2 text-slate-900" 
                    />
                    <button key="submit" disabled={submitting} onClick={onSubmit} className="bg-teal-300 px-6 py-3 rounded-lg font-bold text-slate-900 disabled:opacity-50">
                      {submitting ? 'Sending....' : 'Send'} 🚀
                    </button>
                  </div>
                ) : (
                  <div className="flex justify-center space-x-4">
                    <button onClick={() => setInputPage(true)} className="bg-teal-300 px-6 py-3 rounded-lg font-bold text-slate-900">
                      Sure 😍
                    </button>
                    <button key="nope" onClick={onNope} className="bg-red-400 px-6 py-3 rounded-lg font-bold text-slate-900">
                      Nope 😒
                    </button>
                  </div>
                )
              }
            </div>
          </>
        )
      }
    </div>
  )
}

export default App