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