From ddb2758d061609ef5262b3759d9810f7cc774333 Mon Sep 17 00:00:00 2001 From: guusvanmeerveld Date: Tue, 25 May 2021 11:36:08 +0100 Subject: [PATCH] Added recaptcha --- package.json | 21 +- src/components/Contact.tsx | 76 +- src/components/Footer.tsx | 3 +- src/pages/index.tsx | 4 +- src/styles/sass/contact.scss | 4 + yarn.lock | 1965 +++++++++++++++++++++++++++++----- 6 files changed, 1784 insertions(+), 289 deletions(-) diff --git a/package.json b/package.json index f26745d..253e4d7 100644 --- a/package.json +++ b/package.json @@ -10,17 +10,20 @@ }, "dependencies": { "milligram": "^1.4.1", - "next": "10.0.8", - "next-themes": "^0.0.12", - "react": "17.0.1", - "react-dom": "17.0.1", + "next": "^10.2.3", + "next-themes": "^0.0.14", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-google-recaptcha": "^2.1.0", "react-icons": "^4.2.0", - "sass": "^1.32.8" + "react-recaptcha-google": "^1.1.1", + "sass": "^1.34.0" }, "devDependencies": { - "@types/node": "^14.14.32", - "@types/react": "^17.0.3", - "prettier": "^2.2.1", - "typescript": "^4.2.3" + "@types/node": "^15.6.1", + "@types/react": "^17.0.6", + "@types/react-google-recaptcha": "^2.1.0", + "prettier": "^2.3.0", + "typescript": "^4.2.4" } } diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index 74d6767..db1efae 100644 --- a/src/components/Contact.tsx +++ b/src/components/Contact.tsx @@ -1,33 +1,51 @@ -const Contact = () => ( -
-
-
- Contact +import { FormEventHandler, useRef, useState } from 'react'; +import ReCAPTCHA from 'react-google-recaptcha'; +import { useTheme } from 'next-themes'; + +const formURL = 'http://localhost:4000/portfolio'; + +const Contact = () => { + const { theme, setTheme } = useTheme(); + + return ( +
+
+
+ Contact +
+
+ + + + + + + + + + + + +
-
- - - - - - - -
-
-); + ); +}; export default Contact; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index c308f2b..2352d39 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,14 +1,13 @@ import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa'; const Footer = () => { - const year = new Date().getFullYear(); return (