Añade vista de producto individual

1 files changed, 30 insertions, 0 deletions

diff --git a/src/components/review.tsx b/src/components/review.tsx
new file mode 100644
index 0000000..e3f34df
--- /dev/null
+++ b/src/components/review.tsx
@@ -0,0 +1,30 @@
+import { PersonCircle, StarFill } from "react-bootstrap-icons";
+
+export default function Review({ review }) {
+  const rating = [...Array(review.attributes.rating)].map((value: undefined, index: number) =>
+      <StarFill size={12} color="rgb(156 163 175)"/>
+  );
+
+  return(
+    <>
+      <div className="grid grid-cols-10 w-3/5 my-4">
+        <div className="flex flex-col col-span- justify-center mx-2">
+          <div>
+            {review.attributes.author_name}
+          </div>
+          <div>
+            <PersonCircle size={32} color="rgb(156 163 175)"/>
+          </div>
+          <div className="flex inline-flex my-2">
+            {rating}
+          </div>
+        </div>
+        <div className="flex col-span-8 justify-start">
+          <div className="border-solid border-2 border-gray-200">
+            {review.attributes.review}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file