adjusted css to object-fit cover

This commit is contained in:
oriofir 2022-08-29 15:04:48 -07:00
parent 8f707afb64
commit 369f46defe
5 changed files with 38 additions and 1 deletions

19
package-lock.json generated
View File

@ -55,6 +55,7 @@
"@types/node": "^17.0.25",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@types/react-google-recaptcha": "^2.1.5",
"@types/tiny-json-http": "^7.3.1",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
@ -2654,6 +2655,15 @@
"@types/react": "^17"
}
},
"node_modules/@types/react-google-recaptcha": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz",
"integrity": "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
@ -13592,6 +13602,15 @@
"@types/react": "^17"
}
},
"@types/react-google-recaptcha": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz",
"integrity": "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/react-transition-group": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",

View File

@ -65,6 +65,7 @@
"@types/node": "^17.0.25",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"@types/react-google-recaptcha": "^2.1.5",
"@types/tiny-json-http": "^7.3.1",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",

View File

@ -1,4 +1,5 @@
import { useState } from 'react'
import { useRef, useState } from 'react'
import { ReCAPTCHA } from 'react-google-recaptcha'
import Select from 'react-select'
import { Container } from '~/components/layout/container'
@ -39,6 +40,7 @@ const CustomForm = ({ data }: FormProps) => {
const [errorMsg, setErrorMsg] = useState('')
const [isFormSent, setIsFormSent] = useState(false)
const [isSending, setIsSending] = useState(false)
const reRef = useRef<ReCAPTCHA>()
const handleSubmit = async (e: any) => {
e.preventDefault()
@ -59,6 +61,8 @@ const CustomForm = ({ data }: FormProps) => {
inquiry: selectedOption.value
}
const token = await reRef.current.executeAsync()
await fetch(`${process.env.NEXT_PUBLIC_API}/api/contact`, {
method: 'POST',
mode: 'no-cors',
@ -123,6 +127,11 @@ const CustomForm = ({ data }: FormProps) => {
onChange={(e) => setText(e.target.value)}
></textarea>
</label>
<ReCAPTCHA
siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
size="invisible"
ref={reRef}
/>
<Button size="medium" variant="primary">
{data?.formLabelButton}
</Button>

View File

@ -145,6 +145,7 @@
> img {
object-fit: cover;
height: 100%;
width: 100%;
}
}

View File

@ -1362,6 +1362,13 @@
dependencies:
"@types/react" "^17"
"@types/react-google-recaptcha@^2.1.5":
"integrity" "sha512-iWTjmVttlNgp0teyh7eBXqNOQzVq2RWNiFROWjraOptRnb1OcHJehQnji0sjqIRAk9K0z8stjyhU+OLpPb0N6w=="
"resolved" "https://registry.npmjs.org/@types/react-google-recaptcha/-/react-google-recaptcha-2.1.5.tgz"
"version" "2.1.5"
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.4.0":
"integrity" "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug=="
"resolved" "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz"