From d7512233fd129daeb59b98aefa86dda9da1c4974 Mon Sep 17 00:00:00 2001
From: Milad Sadeghi <miladsadeghi2323@gmail.com>
Date: Sun, 11 Dec 2022 20:33:23 +0330
Subject: [PATCH] show comment on the details page

---
 package-lock.json                      | 150 +++++++++----------------
 src/routes/Products/ProductDetails.tsx |  45 ++++++--
 src/types/public.types.ts              |   6 +
 3 files changed, 89 insertions(+), 112 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6047156..2067201 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23499,15 +23499,13 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
       "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@csstools/selector-specificity": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
       "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
@@ -23695,14 +23693,12 @@
     "@firebase/auth-interop-types": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.7.tgz",
-      "integrity": "sha512-yA/dTveGGPcc85JP8ZE/KZqfGQyQTBCV10THdI8HTlP1GDvNrhr//J5jAt58MlsCOaO3XmC4DqScPBbtIsR/EA==",
-      "requires": {}
+      "integrity": "sha512-yA/dTveGGPcc85JP8ZE/KZqfGQyQTBCV10THdI8HTlP1GDvNrhr//J5jAt58MlsCOaO3XmC4DqScPBbtIsR/EA=="
     },
     "@firebase/auth-types": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.11.1.tgz",
-      "integrity": "sha512-ud7T39VG9ptTrC2fOy/XlU+ubC+BVuBJPteuzsPZSa9l7gkntvWgVb3Z/3FxqqRPlkVUYiyvmsbRN3DE1He2ow==",
-      "requires": {}
+      "integrity": "sha512-ud7T39VG9ptTrC2fOy/XlU+ubC+BVuBJPteuzsPZSa9l7gkntvWgVb3Z/3FxqqRPlkVUYiyvmsbRN3DE1He2ow=="
     },
     "@firebase/component": {
       "version": "0.5.21",
@@ -23778,8 +23774,7 @@
     "@firebase/firestore-types": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.5.1.tgz",
-      "integrity": "sha512-xG0CA6EMfYo8YeUxC8FeDzf6W3FX1cLlcAGBYV6Cku12sZRI81oWcu61RSKM66K6kUENP+78Qm8mvroBcm1whw==",
-      "requires": {}
+      "integrity": "sha512-xG0CA6EMfYo8YeUxC8FeDzf6W3FX1cLlcAGBYV6Cku12sZRI81oWcu61RSKM66K6kUENP+78Qm8mvroBcm1whw=="
     },
     "@firebase/functions": {
       "version": "0.8.8",
@@ -23838,8 +23833,7 @@
     "@firebase/installations-types": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.4.1.tgz",
-      "integrity": "sha512-ac906QcmipomZjSasGDYNS1LDy4JNGzQ4VXHpFtoOrI6U2QGFkRezZpI+5bzfU062JOD+doO6irYC6Uwnv/GnA==",
-      "requires": {}
+      "integrity": "sha512-ac906QcmipomZjSasGDYNS1LDy4JNGzQ4VXHpFtoOrI6U2QGFkRezZpI+5bzfU062JOD+doO6irYC6Uwnv/GnA=="
     },
     "@firebase/logger": {
       "version": "0.3.4",
@@ -23964,8 +23958,7 @@
     "@firebase/storage-types": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.6.1.tgz",
-      "integrity": "sha512-/pkNzKiGCSjdBBZHPvWL1kkPZfM3pFJ38HPJE1xTHwLBwdrFb4JrmY+5/E4ma5ePsbejecIOD1SZhEKDB/JwUQ==",
-      "requires": {}
+      "integrity": "sha512-/pkNzKiGCSjdBBZHPvWL1kkPZfM3pFJ38HPJE1xTHwLBwdrFb4JrmY+5/E4ma5ePsbejecIOD1SZhEKDB/JwUQ=="
     },
     "@firebase/util": {
       "version": "1.7.3",
@@ -25552,57 +25545,49 @@
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
       "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-remove-jsx-attribute": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-6.5.0.tgz",
       "integrity": "sha512-8zYdkym7qNyfXpWvu4yq46k41pyNM9SOstoWhKlm+IfdCE1DdnRKeMUPsWIEO/DEkaWxJ8T9esNdG3QwQ93jBA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-remove-jsx-empty-expression": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-6.5.0.tgz",
       "integrity": "sha512-NFdxMq3xA42Kb1UbzCVxplUc0iqSyM9X8kopImvFnB+uSDdzIHOdbs1op8ofAvVRtbg4oZiyRl3fTYeKcOe9Iw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-replace-jsx-attribute-value": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
       "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-svg-dynamic-title": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
       "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-svg-em-dimensions": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
       "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-transform-react-native-svg": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
       "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-plugin-transform-svg-component": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
       "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@svgr/babel-preset": {
       "version": "6.5.1",
@@ -25686,8 +25671,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz",
       "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@testing-library/dom": {
       "version": "8.19.0",
@@ -25823,8 +25807,7 @@
     "@testing-library/user-event": {
       "version": "14.4.3",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.4.3.tgz",
-      "integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==",
-      "requires": {}
+      "integrity": "sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q=="
     },
     "@tootallnate/once": {
       "version": "1.1.2",
@@ -26611,15 +26594,13 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -26729,8 +26710,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -27094,8 +27074,7 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
       "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
@@ -27768,8 +27747,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
       "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -27872,8 +27850,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
       "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-select": {
       "version": "5.1.0",
@@ -27987,8 +27964,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "csso": {
       "version": "4.2.0",
@@ -28953,8 +28929,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "eslint-plugin-testing-library": {
       "version": "5.9.1",
@@ -30207,8 +30182,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "idb": {
       "version": "7.0.1",
@@ -32172,8 +32146,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
       "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -34481,8 +34454,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
       "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -34592,29 +34564,25 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -34639,8 +34607,7 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
       "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -34664,15 +34631,13 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
       "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-gap-properties": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
       "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -34698,8 +34663,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
       "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -34756,15 +34720,13 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
       "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
       "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-merge-longhand": {
       "version": "5.1.7",
@@ -34832,8 +34794,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -34898,8 +34859,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -35004,8 +34964,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
       "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -35105,8 +35064,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -35506,8 +35464,7 @@
     "react-icons": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
-      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
-      "requires": {}
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw=="
     },
     "react-id-swiper": {
       "version": "4.0.0",
@@ -35812,8 +35769,7 @@
     "react-spinners": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.7.tgz",
-      "integrity": "sha512-mRamn56bfxWbGcacif5RT3UbeJaXi2AttjtPwSmomuv2IcxjpbfETCzdTvaQpNDk0E33ENJsStsQeKAZFuJcpA==",
-      "requires": {}
+      "integrity": "sha512-mRamn56bfxWbGcacif5RT3UbeJaXi2AttjtPwSmomuv2IcxjpbfETCzdTvaQpNDk0E33ENJsStsQeKAZFuJcpA=="
     },
     "react-toastify": {
       "version": "9.1.1",
@@ -35891,8 +35847,7 @@
     "redux-thunk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
-      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
-      "requires": {}
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q=="
     },
     "regenerate": {
       "version": "1.4.2",
@@ -36341,8 +36296,7 @@
         "ws": {
           "version": "8.11.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
-          "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-          "requires": {}
+          "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg=="
         }
       }
     },
@@ -36837,8 +36791,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "style-value-types": {
       "version": "5.1.2",
@@ -37420,8 +37373,7 @@
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "requires": {}
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
     },
     "util-deprecate": {
       "version": "1.0.2",
@@ -37722,8 +37674,7 @@
           "version": "8.11.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
           "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -38226,8 +38177,7 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/src/routes/Products/ProductDetails.tsx b/src/routes/Products/ProductDetails.tsx
index e5c7db7..3a09d42 100644
--- a/src/routes/Products/ProductDetails.tsx
+++ b/src/routes/Products/ProductDetails.tsx
@@ -22,6 +22,7 @@ import { motion } from "framer-motion";
 import { toast } from "react-toastify";
 import { ref, set, update } from "firebase/database";
 import { realTimeDB } from "../../helper/firebase.config";
+import { TComment } from '../../types/public.types';
 
 const ProductDetails: FC = (): ReactElement | null => {
   const { id } = useParams();
@@ -44,24 +45,32 @@ const ProductDetails: FC = (): ReactElement | null => {
   };
 
   const votes = (obj: any) => {
-    const votes = obj.map((item: any) => item.vote);
+    const votes = obj.map((item: any) => parseInt(item.rate));
     const arrAvg = votes.reduce((a: any, b: any) => a + b, 0) / votes.length;
+    console.log(votes, votes.length)
     return {
       star: Math.floor(arrAvg),
       count: votes.length,
     };
   };
 
-  const Stars: FC<any> = ({ numb }: { numb: number }): any => {
+  const Stars: FC<any> = ({numb}: {numb: any}): React.ReactElement => {
     let star = [];
-    for (let i = 1; i >= 5; i++) {
+    console.log(parseInt(numb))
+    for (let i = 1; i <= 5; i++) {
       if (i <= numb) {
-        star.push(<AiOutlineStar />);
+        star.push(<AiFillStar fontSize={20} />);
       } else {
-        star.push(<AiFillStar />);
+        star.push(<AiOutlineStar fontSize={20} />);
       }
     }
-    return star;
+    return (
+      <div className="flex items-center ml-2">
+        {
+          star.map((item: any, index: number) => <div className="text-orange-300" key={index}>{item}</div>)
+        }
+      </div>
+    )
   };
 
   useEffect(() => {
@@ -82,7 +91,7 @@ const ProductDetails: FC = (): ReactElement | null => {
           name: product.colors[0].name,
         });
       }
-      // if (product.comments) setStars(votes(product.comments));
+      if (product.comments) setStars(votes(product.comments));
     } else if (product === undefined && Products.length !== 0) {
       navigate("/404");
     }
@@ -214,16 +223,16 @@ const ProductDetails: FC = (): ReactElement | null => {
               <h2 className="text-3xl font-JosefinSans text-[#0D134E] font-bold mb-5">
                 {productDetails.title}
               </h2>
-              {/* <div>
+              <div>
                 {productDetails.comments && (
-                  <div className="flex">
+                  <div className="flex items-center">
                     <div>
                       <Stars numb={stars.star} />
                     </div>
-                    <p>{stars.count}</p>
+                    <p className="ml-2 font-Lato"> - ({stars.count})</p>
                   </div>
                 )}
-              </div> */}
+              </div>
               <div className="flex mt-10">
                 <p
                   className={`${
@@ -412,7 +421,19 @@ const ProductDetails: FC = (): ReactElement | null => {
               </div>
               <div className="w-full">
                 {productDetails.comments ? (
-                  <p>test</p>
+                  <div className="px-4">
+                    {
+                      productDetails.comments.map((comment: TComment, index: number) => (
+                        <div key={index} className="py-8 px-7 bg-slate-100 rounded-md">
+                          <div className="flex">
+                            <h3 className="font-JosefinSans text-lg font-bold text-navy-blue">{comment.user} - </h3>
+                            <Stars numb={comment.rate}  />
+                          </div>
+                          <p className="mt-2 font-Lato">{comment.message}</p>
+                        </div>
+                      ))
+                    }
+                  </div>
                 ) : (
                   <div
                     className={`${
diff --git a/src/types/public.types.ts b/src/types/public.types.ts
index e0a847c..25906de 100644
--- a/src/types/public.types.ts
+++ b/src/types/public.types.ts
@@ -15,4 +15,10 @@ export type TShopOffer = {
   classes: string
 }
 
+export type TComment = {
+  user: string;
+  rate: string;
+  message: string;
+}
+
 export type TProductListSort = "regular" | "highest" | "lowest";
\ No newline at end of file