4 files changed, 53 insertions, 5 deletions

diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx
index 897b09b..2d3b8f4 100644
--- a/src/components/forms/address_form.tsx
+++ b/src/components/forms/address_form.tsx
@@ -54,7 +54,7 @@ export default function AddressForm({ address = null, errors = null }) {
     id: "country-field",
     type: "select",
     name: "country",
-    label: "Ciudad"
+    label: "País"
   }
 
   if(errors)
diff --git a/src/components/forms/review_form.tsx b/src/components/forms/review_form.tsx
new file mode 100644
index 0000000..8ed3848
--- /dev/null
+++ b/src/components/forms/review_form.tsx
@@ -0,0 +1,48 @@
+import { Form } from "react-router-dom";
+import StarPicker from 'react-star-picker';
+import "../stylesheets/shared.css";
+import { useState } from "react";
+
+function getTextArea(errors) {
+  if(errors && errors.review) {
+    const error_messages = errors.review.map(message => 
+      <p className="mt-2 text-sm text-red-600 dark:text-red-500">{message}</p>  
+    );
+
+    return (
+      <div className="my-2">
+        <textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm bg-red-50 border border-red-500 text-red-900 placeholder-red-700 rounded-lg border focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Deje una reseña..."></textarea>
+        {error_messages}
+      </div>
+    );
+  }
+
+  return (
+    <div className="my-2">
+      <textarea id="review" name="review" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Deje una reseña..."></textarea>
+    </div>
+  );
+}
+
+export default function ReviewForm({ product, errors }) {
+  const [rating, setRating] = useState(0);
+  const review_field = getTextArea(errors);
+
+  const onChange = (value, name) => {
+    setRating(value);
+  };
+
+  return (
+    <Form method="post" action={`/products/${product.public_id}`} className="flex flex-col justify-end">
+      <input type="hidden" id="rating-field" name="rating" value={rating}/>
+      <StarPicker onChange={onChange} value={rating} name="rating" />
+      {review_field}
+      <div className="my-2">
+        <button type="submit" className="text-white button hover:bg-blue-800 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
+                name="intent" value="create_review">
+          Enviar
+        </button>
+      </div>
+    </Form>
+  );
+}
\ No newline at end of file
diff --git a/src/components/review.tsx b/src/components/review.tsx
index 153c202..d97e410 100644
--- a/src/components/review.tsx
+++ b/src/components/review.tsx
@@ -7,7 +7,7 @@ export default function Review({ review }) {
 
   return(
     <>
-      <div className="grid grid-cols-10 w-3/5 my-4">
+      <div className="grid grid-cols-10 w-4/6 my-4">
         <div className="flex flex-col col-span- justify-center mx-2">
           <div className="text-black">
             {review.attributes.author_name}
@@ -20,9 +20,9 @@ export default function Review({ review }) {
           </div>
         </div>
         <div className="flex col-span-8 justify-start">
-          <div className="border-solid border-2 border-gray-200">
+          <textarea id="message" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" disabled>
             {review.attributes.review}
-          </div>
+          </textarea>
         </div>
       </div>
     </>
diff --git a/src/components/user_account_dropdown_menu.tsx b/src/components/user_account_dropdown_menu.tsx
index 2bd0d28..e4ab023 100644
--- a/src/components/user_account_dropdown_menu.tsx
+++ b/src/components/user_account_dropdown_menu.tsx
@@ -1,5 +1,5 @@
 import { PersonFill, DoorOpenFill, CardList } from "react-bootstrap-icons";
-import { BrowserRouter, Form } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import RedirectTo from '../lib/redirect_to';
 import Token from "../lib/token";
 import redirectTo from "../lib/redirect_to";