diff --git a/.github/workflows/netlify.yml b/.github/workflows/netlify.yml index c6bf310..32ca40e 100644 --- a/.github/workflows/netlify.yml +++ b/.github/workflows/netlify.yml @@ -11,7 +11,7 @@ jobs: steps: - name: Check out code uses: actions/checkout@v2 - + - name: Build and Test run: | npm install --legacy-peer-deps diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..ebf20f1 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +node_modules +# Ignore artifacts: +build +coverage \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3734ef6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/README.md b/README.md index c8a950b..9a94a7c 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Curio, a web application which is serving as an open platform where anyone can c ## Tech stack Curio is using - Frontend - For the Frontend we are using ReactJs & NodeJs in order to bring functionality to it and for styling purposes we have used CSS3 along with some SASS. We are also making use of a number of react compatible modules to optimise things i.e. React Router DOM, RSuite, Semantic UI React etc. + For the Frontend we are using ReactJs & NodeJs in order to bring functionality to it and for styling purposes we have used CSS3 along with some SASS. We are also making use of a number of react compatible modules to optimise things i.e. React Router DOM, RSuite, Semantic UI React etc. - API We are taking use of Youtube V3 api to get the video data & search results based on the query & along with that we have also made a couple of APIs in order to connect the frontend to the backend usin AXIOS. - Backend diff --git a/api/helloWorld.js b/api/helloWorld.js index 50ab260..ddec4c8 100644 --- a/api/helloWorld.js +++ b/api/helloWorld.js @@ -1,4 +1,4 @@ export default (req, res) => { - res.statusCode = 200; - res.send({ message: "helloWorld" }); - }; \ No newline at end of file + res.statusCode = 200; + res.send({ message: "helloWorld" }); +}; diff --git a/api/sendMessage.js b/api/sendMessage.js index 4610659..1672167 100644 --- a/api/sendMessage.js +++ b/api/sendMessage.js @@ -1,24 +1,24 @@ -require('dotenv'); +require("dotenv"); const client = require("twilio")( - process.env.REACT_APP_TWILIO_ACCOUNT_SID, - process.env.REACT_APP_TWILIO_AUTH_TOKEN - ); - - export default async (req, res) => { - res.statusCode = 200; - res.setHeader("Content-Type", "application/json"); + process.env.REACT_APP_TWILIO_ACCOUNT_SID, + process.env.REACT_APP_TWILIO_AUTH_TOKEN, +); - client.messages.create({ - from: process.env.REACT_APP_TWILIO_PHONE_NUMBER, - to: req.body.to, - body: req.body.body, - }) - .then(() => { - res.send(JSON.stringify({ success: true })); - }) - .catch((err) => { - console.log(err); - res.send(JSON.stringify({ success: false })); - }); - - } \ No newline at end of file +export default async (req, res) => { + res.statusCode = 200; + res.setHeader("Content-Type", "application/json"); + + client.messages + .create({ + from: process.env.REACT_APP_TWILIO_PHONE_NUMBER, + to: req.body.to, + body: req.body.body, + }) + .then(() => { + res.send(JSON.stringify({ success: true })); + }) + .catch((err) => { + console.log(err); + res.send(JSON.stringify({ success: false })); + }); +}; diff --git a/package-lock.json b/package-lock.json index d9f685d..d6fcce9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -48,6 +48,7 @@ "devDependencies": { "autoprefixer": "^10.4.12", "postcss": "^8.4.31", + "prettier": "3.0.3", "tailwindcss": "^3.1.8" } }, @@ -14862,6 +14863,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 016c1ab..8e5698d 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "devDependencies": { "autoprefixer": "^10.4.12", "postcss": "^8.4.31", + "prettier": "3.0.3", "tailwindcss": "^3.1.8" } } diff --git a/postcss.config.js b/postcss.config.js index 96af6e1..de012b6 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,8 @@ module.exports = { plugins: [ - require('postcss-import'), - require('tailwindcss/nesting')(require('postcss-nesting')), - require('autoprefixer'), - require('tailwindcss'), - ] -} \ No newline at end of file + require("postcss-import"), + require("tailwindcss/nesting")(require("postcss-nesting")), + require("autoprefixer"), + require("tailwindcss"), + ], +}; diff --git a/prettierrc.json b/prettierrc.json new file mode 100644 index 0000000..ef58ff9 --- /dev/null +++ b/prettierrc.json @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": false, + "singleQuote": true +} diff --git a/public/index.html b/public/index.html index a2eeeb0..e3d4d7c 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ /> Curio - +
diff --git a/src/App.css b/src/App.css index 2ac453f..a469e63 100644 --- a/src/App.css +++ b/src/App.css @@ -1,88 +1,107 @@ * { - box-sizing: border-box; - padding: 0%; - margin: 0%; - scroll-behavior: smooth; + box-sizing: border-box; + padding: 0%; + margin: 0%; + scroll-behavior: smooth; } -body{ - background-color: var(--color-bg); +body { + background-color: var(--color-bg); } -.gradient__bg -{ - background:-moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); +.gradient__bg { + background: -moz-radial-gradient( + circle at 3% 25%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 25% + ); /* safari 5.1+,chrome 10+ */ - background:-webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); + background: -webkit-radial-gradient( + circle at 3% 25%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 25% + ); /* opera 11.10+ */ - background:-o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); + background: -o-radial-gradient( + circle at 3% 25%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 25% + ); /* ie 10+ */ - background:-ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); + background: -ms-radial-gradient( + circle at 3% 25%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 25% + ); /* global 92%+ browsers support */ - background:radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); + background: radial-gradient( + circle at 3% 25%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 25% + ); } -.gradient__text{ - background: var(--gradient-text); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; +.gradient__text { + background: var(--gradient-text); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -.section__padding{ - padding: 4rem 6rem; +.section__padding { + padding: 4rem 6rem; } -.section__margin{ - margin: 4rem 6rem; +.section__margin { + margin: 4rem 6rem; } .scale-up-center { - -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; - animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) + both; + animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; } - @-webkit-keyframes scale-up-center { - 0% { - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } +@-webkit-keyframes scale-up-center { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } - @keyframes scale-up-center { - 0% { - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes scale-up-center { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@media screen and (max-width: 700px) { + .section__padding { + padding: 4rem; } - - @media screen and (max-width: 700px) { - .section__padding { - padding: 4rem; - } - - .section__margin { - margin: 4rem; - } + .section__margin { + margin: 4rem; } - - @media screen and (max-width: 550px) { - .section__padding { - padding: 4rem 2rem; - } - - .section__margin { - margin: 4rem 2rem; - } - } \ No newline at end of file +} + +@media screen and (max-width: 550px) { + .section__padding { + padding: 4rem 2rem; + } + + .section__margin { + margin: 4rem 2rem; + } +} diff --git a/src/App.tsx b/src/App.tsx index 51a8c4a..d09bfcf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,105 +1,116 @@ -import React from 'react'; -import { BrowserRouter as Router , Route , Switch } from 'react-router-dom'; -import HeaderCurio from './components/Header/Header'; -import SearchBar from './components/UnderHeader/Searchbar'; -import youtube from './apis/youtube'; -import VideoList from './components/Video/VideoList'; -import RecordView from './components/Recorder/Recorder'; -import Player from './components/Video/Player'; -import Footer from './components/Footer/Footer'; -import './style/styles.css'; -import './App.css' -import UnderHeader from './components/UnderHeader/UnderHeader'; +import React from "react"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; +import { AxiosError } from "axios"; +import HeaderCurio from "./components/Header/Header"; +import SearchBar from "./components/UnderHeader/Searchbar"; +import APIError from "./components/UnderHeader/APIError"; +import youtube from "./apis/youtube"; +import VideoList from "./components/Video/VideoList"; +import RecordView from "./components/Recorder/Recorder"; +import Player from "./components/Video/Player"; +import Footer from "./components/Footer/Footer"; +import "./style/styles.css"; +import "./App.css"; +import UnderHeader from "./components/UnderHeader/UnderHeader"; // import Awsup from './Awsup' class App extends React.Component { - state = { - videos: [], - vidId : "", - audioProps: { - playback: 1, - playing: false, - time: 0, - maxTime: 0, - }, - showUnderHeader: true - } - - getAudio = () => { - return this.state.audioProps - } + state = { + videos: [], + vidId: "", + audioProps: { + playback: 1, + playing: false, + time: 0, + maxTime: 0, + }, + showUnderHeader: true, + apiResponse: "", + }; - setAudio = (prop: any) => { - this.setState( - { - audioProps: prop - } - ) - } + getAudio = () => { + return this.state.audioProps; + }; - handleSubmit = async (termFromSearchBar: string) => { - const response = await youtube.get('/search', { - params: { - q: termFromSearchBar - } - }) + setAudio = (prop: any) => { + this.setState({ + audioProps: prop, + }); + }; - if (response.data.items.length === 0) { - this.setState({showUnderHeader: true}) - } - else { - this.setState({showUnderHeader: false}) - } + handleSubmit = async (termFromSearchBar: string) => { + try { + const response = await youtube.get("/search", { + params: { + q: termFromSearchBar, + }, + }); + this.setState({ + videos: response.data.items, + apiResponse: "", + }); + console.log("this is resp", response); + } catch (error) { + if (error && error instanceof AxiosError) { this.setState({ - videos: response.data.items - }) - console.log("this is resp",response); - }; - setVidId = (vidId: string) => { - this.setState({vidId : vidId}) - window.location.href = `/play/${vidId}` + apiResponse: error?.response?.data.error.message, + }); + console.log(error?.response?.data.error.message); + } } - setRecId = (vidId: string) => { - this.setState({vidId : vidId}) - window.location.href = `/record/${vidId}` - } - - - render() { - return ( - <> -
- - {/* */} - - + }; + setVidId = (vidId: string) => { + this.setState({ vidId: vidId }); + window.location.href = `/play/${vidId}`; + }; + setRecId = (vidId: string) => { + this.setState({ vidId: vidId }); + window.location.href = `/record/${vidId}`; + }; + render() { + return ( + <> +
+ + {/* */} + + + + + - - - + + + + - - - - - - -
- - {this.state.showUnderHeader ? : null} - -
- - - - -
-
- - ) - } + +
+ + {this.state.apiResponse !== "" ? ( + + ) : null} + {this.state.showUnderHeader ? : null} + +
+ + + +
+ + ); + } } -export default App; \ No newline at end of file +export default App; diff --git a/src/Awsup.tsx b/src/Awsup.tsx index 6536222..64d5d00 100644 --- a/src/Awsup.tsx +++ b/src/Awsup.tsx @@ -1,78 +1,84 @@ -import React, { Component, ChangeEvent } from 'react'; -import axios from 'axios'; +import React, { Component, ChangeEvent } from "react"; +import axios from "axios"; class Awsup extends Component { - state = { - selectedFile: null as File | null, - fileUploadedSuccessfully: false, - } + state = { + selectedFile: null as File | null, + fileUploadedSuccessfully: false, + }; - onFileChange = (event: ChangeEvent) => { - const file = event.target.files?.[0]; - if (file) { - this.setState({ selectedFile: file }); - } + onFileChange = (event: ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + this.setState({ selectedFile: file }); } + }; - onFileUpload = () => { - const { selectedFile } = this.state; + onFileUpload = () => { + const { selectedFile } = this.state; - if (selectedFile) { - const formData = new FormData(); - formData.append( - "demo file", - selectedFile, - selectedFile.name - ); + if (selectedFile) { + const formData = new FormData(); + formData.append("demo file", selectedFile, selectedFile.name); - axios.post("https://vcor7lap28.execute-api.ap-south-1.amazonaws.com/prod/audio-upload", formData).then(() => { - this.setState({ selectedFile: null, fileUploadedSuccessfully: true }); - }); - } + axios + .post( + "https://vcor7lap28.execute-api.ap-south-1.amazonaws.com/prod/audio-upload", + formData, + ) + .then(() => { + this.setState({ selectedFile: null, fileUploadedSuccessfully: true }); + }); } + }; - fileData = () => { - const { selectedFile, fileUploadedSuccessfully } = this.state; + fileData = () => { + const { selectedFile, fileUploadedSuccessfully } = this.state; - if (selectedFile) { - return ( -
-

File Details

-

File Name : {selectedFile.name}

-

File Type : {selectedFile.type}

-

Last Modified : {selectedFile.lastModified ? new Date(selectedFile.lastModified).toDateString() : 'N/A'}

-
- ); - } else if (fileUploadedSuccessfully) { - return ( -
-

Your File Has Been Uploaded Successfully.

-
- ); - } else { - return ( -
-
-

Choose A File And Press Upload Button

-
- ); - } + if (selectedFile) { + return ( +
+

File Details

+

File Name : {selectedFile.name}

+

File Type : {selectedFile.type}

+

+ Last Modified :{" "} + {selectedFile.lastModified + ? new Date(selectedFile.lastModified).toDateString() + : "N/A"} +

+
+ ); + } else if (fileUploadedSuccessfully) { + return ( +
+

Your File Has Been Uploaded Successfully.

+
+ ); + } else { + return ( +
+
+

Choose A File And Press Upload Button

+
+ ); } + }; - render() { - return ( - <> -
-

Audio Uploader

-
- - -
- {this.fileData()} -
- - ); - } + render() { + return ( + <> +
+

Audio Uploader

+
+ + +
+ {this.fileData()} +
+ + ); + } } export default Awsup; diff --git a/src/apis/youtube.tsx b/src/apis/youtube.tsx index 1cee104..ef9163a 100644 --- a/src/apis/youtube.tsx +++ b/src/apis/youtube.tsx @@ -1,11 +1,11 @@ -import axios from 'axios'; +import axios from "axios"; const KEY = process.env.REACT_APP_YT; // mention your youtube API key here export default axios.create({ - baseURL: 'https://www.googleapis.com/youtube/v3/', - params: { - part: 'snippet', - maxResults: 50, - key: KEY - } -}) \ No newline at end of file + baseURL: "https://www.googleapis.com/youtube/v3/", + params: { + part: "snippet", + maxResults: 50, + key: KEY, + }, +}); diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 0e6ab3d..a3eb8a2 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -1,125 +1,125 @@ .curio_footer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; - background: var(--color-footer); + background: var(--color-footer); } .curio_footer-heading { - display: flex; - justify-content: center; - width: 100%; - text-align: center; + display: flex; + justify-content: center; + width: 100%; + text-align: center; - margin-bottom: 3rem; + margin-bottom: 3rem; } .curio_footer-heading h1 { - font-family: var(--font-family); - font-weight: 800; - font-size: 3.7rem; - line-height: 75px; + font-family: var(--font-family); + font-weight: 800; + font-size: 3.7rem; + line-height: 75px; } .curio_footer-btn { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; - padding: 1rem; - border: 1px solid #fff; - text-align: center; + padding: 1rem; + border: 1px solid #fff; + text-align: center; - margin-bottom: 10rem; - cursor: pointer; + margin-bottom: 10rem; + cursor: pointer; } .curio_footer-btn p { - font-size: 1.1rem; - font-family: var(--font-family); - line-height: 21px; - color: #fff; - word-spacing: 2px; + font-size: 1.1rem; + font-family: var(--font-family); + line-height: 21px; + color: #fff; + word-spacing: 2px; } .curio_footer_links { - display: flex; - justify-content: space-between; - align-items: flex-start; - flex-direction: row; - flex-wrap: wrap; + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-direction: row; + flex-wrap: wrap; - width: 100%; - text-align: left; + width: 100%; + text-align: left; } .curio_footer_links div { - width: 250px; - margin: 1rem; + width: 250px; + margin: 1rem; } .curio_footer_links_logo { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .curio_footer_links_logo img { - width: 20vw; - height: 20vw; + width: 20vw; + height: 20vw; - margin-bottom: 1rem; + margin-bottom: 1rem; } .curio_footer_links_logo p { - font-family: var(--font-family); - font-size: .85rem; - line-height: 15px; - color: #fff; + font-family: var(--font-family); + font-size: 0.85rem; + line-height: 15px; + color: #fff; } .curio_footer_links_div { - display: flex; - justify-content: flex-start; - flex-direction: column; + display: flex; + justify-content: flex-start; + flex-direction: column; } .curio_footer_links_div h4 { - font-size: 1rem; - line-height: 17px; - font-family: var(--font-family); - color: #fff; + font-size: 1rem; + line-height: 17px; + font-family: var(--font-family); + color: #fff; - margin-bottom: 0.9rem; + margin-bottom: 0.9rem; } .curio_footer_links_div p { - font-size: .7rem; - line-height: 15px; - font-family: var(--font-family); - color: #fff; + font-size: 0.7rem; + line-height: 15px; + font-family: var(--font-family); + color: #fff; - margin: 0.5rem 0; - cursor: pointer; + margin: 0.5rem 0; + cursor: pointer; } .curio_footer_copyright { - margin-top: 2rem; - text-align: center; - width: 100%; + margin-top: 2rem; + text-align: center; + width: 100%; } .curio_footer_copyright p { - font-size: 12px; - font-family: var(--font-family); - line-height: 15px; - color: #fff; + font-size: 12px; + font-family: var(--font-family); + line-height: 15px; + color: #fff; } @media only screen and (min-width: 768px) { - .curio_footer_links_logo img{ - width: 7vw; - height: 7vw; - } + .curio_footer_links_logo img { + width: 7vw; + height: 7vw; + } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index e7e90f8..bd8a956 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -1,15 +1,17 @@ -import React from 'react' -import './Footer.css' -import Twilio from './Twilio' -import curio from './curio.png'; -import 'bootstrap/dist/css/bootstrap.min.css'; +import React from "react"; +import "./Footer.css"; +import Twilio from "./Twilio"; +import curio from "./curio.png"; +import "bootstrap/dist/css/bootstrap.min.css"; const Footer = () => { return ( <>
-

Do you want a video to be Translated?

+

+ Do you want a video to be Translated? +

@@ -23,7 +25,10 @@ const Footer = () => {
gpt3_logo -

Cluster Innovation Centre,
University Of Delhi.
All Rights Reserved

+

+ Cluster Innovation Centre,
+ University Of Delhi.
All Rights Reserved +

Links

@@ -51,7 +56,7 @@ const Footer = () => {
- ) -} + ); +}; export default Footer; diff --git a/src/components/Footer/Twilio.css b/src/components/Footer/Twilio.css index 90b27aa..c1dec0e 100644 --- a/src/components/Footer/Twilio.css +++ b/src/components/Footer/Twilio.css @@ -1,55 +1,55 @@ .request { - align-items: center; + align-items: center; } .request h2 { - font-size: 2.1rem; - line-height: 45px; - font-weight: 800; - font-family: var(--font-family); - max-width: 510px; + font-size: 2.1rem; + line-height: 45px; + font-weight: 800; + font-family: var(--font-family); + max-width: 510px; } .request_form { - justify-content: center; + justify-content: center; } .request_form input { - display: flex; - flex: 2; - width: 100%; - min-height: 50px; - margin: 2px; - font-family: var(--font-family); - background: #fff; - border: 2px solid #fff; - padding: 0 1rem; - outline: none; - color: #fff; - border-radius: 5px; - font-style: normal; - font-weight: normal; - font-size: 1.2rem; - line-height: 27px; - color: #3D6184; + display: flex; + flex: 2; + width: 100%; + min-height: 50px; + margin: 2px; + font-family: var(--font-family); + background: #fff; + border: 2px solid #fff; + padding: 0 1rem; + outline: none; + color: #fff; + border-radius: 5px; + font-style: normal; + font-weight: normal; + font-size: 1.2rem; + line-height: 27px; + color: #3d6184; } .request_form button { - flex: 0.6; - width: 100%; - min-height: 50px; - margin: 2px; - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 28px; - background: #FF4820; - border: 2px solid #FF4820; - padding: 0 1rem; - color: #fff; - cursor: pointer; - outline: none; - border-radius: 5px; - /* border-top-right-radius: 5px; + flex: 0.6; + width: 100%; + min-height: 50px; + margin: 2px; + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 28px; + background: #ff4820; + border: 2px solid #ff4820; + padding: 0 1rem; + color: #fff; + cursor: pointer; + outline: none; + border-radius: 5px; + /* border-top-right-radius: 5px; border-bottom-right-radius: 5px; */ } diff --git a/src/components/Footer/Twilio.tsx b/src/components/Footer/Twilio.tsx index e3134fd..585ba9b 100644 --- a/src/components/Footer/Twilio.tsx +++ b/src/components/Footer/Twilio.tsx @@ -1,46 +1,54 @@ -import React, {useState} from "react"; -import './Twilio.css' +import React, { useState } from "react"; +import "./Twilio.css"; const Twilio = () => { - const [number, setNumber] = useState(""); - const [body, setBody] = useState(""); + const [number, setNumber] = useState(""); + const [body, setBody] = useState(""); - const onSubmit = async (e: React.FormEvent) => { - await e.preventDefault(); - - const res = await fetch("/api/sendMessage", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ to: number, body: body }), - }); - - const data = await res.json(); - - if (data.success) { - await setNumber(""); - await setBody(""); - } else { - await setNumber("An Error has occurred."); - await setBody("An Error has occurred."); - } - }; + const onSubmit = async (e: React.FormEvent) => { + await e.preventDefault(); - return ( + const res = await fetch("/api/sendMessage", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ to: number, body: body }), + }); + + const data = await res.json(); -
-

Send us the Video

-
-
- setNumber(e.target.value)} /> -