diff --git a/src/components/FeaturesPopUp/FeaturesPopUp.jsx b/src/components/FeaturesPopUp/FeaturesPopUp.jsx index 86bb1c7..c402293 100644 --- a/src/components/FeaturesPopUp/FeaturesPopUp.jsx +++ b/src/components/FeaturesPopUp/FeaturesPopUp.jsx @@ -1,5 +1,6 @@ import { Detail } from "../Details/Detail"; import { Details } from "../Details/Details"; +import { FeedbackForm } from "../FeedbackForm/FeedbackForm"; import { DetailsContainer, FeaturedHead, @@ -49,6 +50,7 @@ export const FeaturesPopUp = ({ car }) => { + ); }; diff --git a/src/components/FeaturesPopUp/FeaturesPopUp.styled.js b/src/components/FeaturesPopUp/FeaturesPopUp.styled.js index effd657..22edda9 100644 --- a/src/components/FeaturesPopUp/FeaturesPopUp.styled.js +++ b/src/components/FeaturesPopUp/FeaturesPopUp.styled.js @@ -1,6 +1,9 @@ import styled from "styled-components"; -export const FeaturesContainer = styled.div``; +export const FeaturesContainer = styled.div` + display: flex; + gap: 24px; +`; export const FeaturesWrapper = styled.div` width: 430px; diff --git a/src/components/FeedbackForm/FeedbackForm.jsx b/src/components/FeedbackForm/FeedbackForm.jsx new file mode 100644 index 0000000..2c0ca10 --- /dev/null +++ b/src/components/FeedbackForm/FeedbackForm.jsx @@ -0,0 +1,70 @@ +import { ErrorMessage, Formik } from "formik"; +import * as Yup from "yup"; +import { + Field, + Form, + FormContainer, + FormHeader, + FormText, + FormTitle, + SendButton, +} from "./FeedbackForm.styled"; + +const RentCarsSchema = Yup.object().shape({ + name: Yup.string() + .min(2, "Too Short!") + .max(50, "Too Long!") + .required("Required"), + email: Yup.string().email("Invalid email").required("Required"), + comment: Yup.string() + .min(2, "Too Short!") + .max(60, "Too Long!") + .required("Required"), +}); + +export const FeedbackForm = () => { + return ( + + + Book your campervan now + Stay connected! We are always ready to help you. + + { + actions.resetForm(); + console.log(values); + }} + > +
+ + + + + + + Send +
+
+
+ ); +}; diff --git a/src/components/FeedbackForm/FeedbackForm.styled.js b/src/components/FeedbackForm/FeedbackForm.styled.js new file mode 100644 index 0000000..d5ca114 --- /dev/null +++ b/src/components/FeedbackForm/FeedbackForm.styled.js @@ -0,0 +1,59 @@ +import styled from "styled-components"; +import { Field as StyledField, Form as StyledForm } from "formik"; + +export const FormContainer = styled.div` + border: 1px solid ${(p) => p.theme.colors.borderColor}; + border-radius: ${(p) => p.theme.radius.sm}; + padding: 24px; + height: 500px; +`; + +export const FormHeader = styled.div` + margin-bottom: 24px; +`; + +export const FormTitle = styled.h3` + margin-bottom: 8px; + font-size: ${(p) => p.theme.fonts.mdSize}; +`; + +export const FormText = styled.p` + color: ${(p) => p.theme.colors.grey}; +`; + +export const Form = styled(StyledForm)` + display: flex; + flex-direction: column; + gap: 14px; +`; + +export const Field = styled(StyledField)` + border: none; + background-color: ${(p) => p.theme.colors.white}; + outline: none; + border-radius: ${(p) => p.theme.radius.sm}; + padding: 18px; + width: 400px; + height: 56px; + + &.textarea { + height: 114px; + resize: none; + } +`; + +export const SendButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + width: 160px; + height: 56px; + + margin-top: 10px; + padding: 16px 60px; + + border: none; + border-radius: ${(p) => p.theme.radius.xlg}; + background-color: ${(p) => p.theme.colors.red}; + color: ${(p) => p.theme.colors.buttonText}; +`; diff --git a/src/components/ReviewsPopUp/ReviewsPopUp.jsx b/src/components/ReviewsPopUp/ReviewsPopUp.jsx index cb42c98..ee375ae 100644 --- a/src/components/ReviewsPopUp/ReviewsPopUp.jsx +++ b/src/components/ReviewsPopUp/ReviewsPopUp.jsx @@ -7,9 +7,11 @@ import { ReviewImageLetter, ReviewList, ReviewerName, + ReviewsContainer, StarsContainer, } from "./ReviewsPopUp.styled"; import { Icon } from "../Icon/Icon"; +import { FeedbackForm } from "../FeedbackForm/FeedbackForm"; export const ReviewsPopUp = ({ reviews }) => { const renderStars = (rating) => { @@ -30,7 +32,7 @@ export const ReviewsPopUp = ({ reviews }) => { return stars; }; return ( -
+ {reviews.map((review) => { return ( @@ -55,6 +57,7 @@ export const ReviewsPopUp = ({ reviews }) => { ); })} -
+ + ); }; diff --git a/src/components/ReviewsPopUp/ReviewsPopUp.styled.js b/src/components/ReviewsPopUp/ReviewsPopUp.styled.js index f6a3bb0..e4e82ec 100644 --- a/src/components/ReviewsPopUp/ReviewsPopUp.styled.js +++ b/src/components/ReviewsPopUp/ReviewsPopUp.styled.js @@ -1,5 +1,10 @@ import styled from "styled-components"; +export const ReviewsContainer = styled.div` + display: flex; + gap: 24px; +`; + export const ReviewList = styled.ul` display: flex; flex-direction: column; diff --git a/src/theme.js b/src/theme.js index 5b1e3a7..9dd9de1 100644 --- a/src/theme.js +++ b/src/theme.js @@ -33,7 +33,7 @@ export const theme = { }, }; -// ${p => p.theme.colors.red} +// ${p => p.theme.colors.borderColor} // ${p => p.theme.radius.sm} // ${p => p.theme.fonts.bigSize} // ${p => p.theme.transition.transitionDurAndFunc}