update src/components/CommentDesign/Comments/index.js and data.js

src/components/CommentDesign/Comments/index.js

@@ -10,16 +10,13 @@ export const Comments = ({ comments }) => {
   // connectToParent(comments);
   const Comment = ({ comment }) => {
     return (
-      <div className="flex flex-col w-full">
+      <div className="w-full flex flex-col">
         <header className="w-full flex flex-row justify-between py-1">
           <div className="flex flex-row items-end">
             <Avatar source={comment.userImage} size={60} rounded={true} />
             <div className="flex flex-col">
-              <strong className="text-lg mr-2">{comment.username}</strong>
-              <div
-                className="flex flex-row divide-x divide-gray-300 divided items-center"
-                style={{ direction: "ltr" }}
-              >
+              <strong className="mr-2 text-lg">{comment.username}</strong>
+              <div className="flex flex-row items-center divide-x divide-gray-300 divided ltr">
                 <span className="px-2 text-xs text-gray-500">
                   {comment.product?.color}
                 </span>
@@ -29,10 +26,7 @@ export const Comments = ({ comments }) => {
               </div>
             </div>
           </div>
-          <div
-            className="flex flex-row divide-x divide-gray-300 divided items-center"
-            style={{ direction: "ltr" }}
-          >
+          <div className="flex flex-row items-center divide-x divide-gray-300 divided ltr">
             <span className="px-2 text-sm text-blue-400">
               {moment(comment.data).locale("fa").format("YYYY/MM/DD")}
             </span>
@@ -42,7 +36,7 @@ export const Comments = ({ comments }) => {
           </div>
         </header>
         <div className="flex flex-row py-4">
-          <div style={{ width: 60 }} className="min-h-full"></div>
+          <div className="w-[60px] min-h-full "></div>
           <div className="flex flex-1 flex-col px-3">
             <header className="w-full flex flex-row justify-between items-center">
               <div className="flex flex-row items-center">Stars</div>

src/redux/data.js

@@ -9,11 +9,11 @@ import Blog from "../components/Blog";
 import CardTrelloDesign from "../components/CardTrelloDesign";
 import ChartDesign from "../components/ChartDesign";
 import ProgressBar from "../components/ProgressBar";
+import Checkbox from "../components/Checkbox";
+import CommentDesign from "../components/CommentDesign";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
-import Checkbox from "../components/Checkbox";
-import CommentDesign from "../components/CommentDesign";
 
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";