add form

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 }) => {
           </InfoWrapper>
         </InfoContainer>
       </FeaturesWrapper>
+      <FeedbackForm />
     </FeaturesContainer>
   );
 };

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;

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 (
+    <FormContainer>
+      <FormHeader>
+        <FormTitle>Book your campervan now</FormTitle>
+        <FormText>Stay connected! We are always ready to help you.</FormText>
+      </FormHeader>
+      <Formik
+        initialValues={{
+          name: "",
+          email: "",
+          comment: "",
+        }}
+        validationSchema={RentCarsSchema}
+        onSubmit={async (values, actions) => {
+          actions.resetForm();
+          console.log(values);
+        }}
+      >
+        <Form>
+          <label>
+            <Field name="name" placeholder="Jane" />
+            <ErrorMessage component={"span"} name="name" />
+          </label>
+
+          <label>
+            <Field type="email" name="email" placeholder="example@mail.com" />
+            <ErrorMessage component={"span"} name="email" />
+          </label>
+
+          <label>
+            <Field
+              className="textarea"
+              component="textarea"
+              name="comment"
+              placeholder="Comment"
+            />
+            <ErrorMessage component={"span"} name="comment" />
+          </label>
+
+          <SendButton type="submit">Send</SendButton>
+        </Form>
+      </Formik>
+    </FormContainer>
+  );
+};

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};
+`;

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 (
-    <div>
+    <ReviewsContainer>
       <ReviewList>
         {reviews.map((review) => {
           return (
@@ -55,6 +57,7 @@ export const ReviewsPopUp = ({ reviews }) => {
           );
         })}
       </ReviewList>
-    </div>
+      <FeedbackForm />
+    </ReviewsContainer>
   );
 };

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;

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}