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="[email protected]" />
+ <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}