diff --git a/public/images/negative.svg b/public/images/negative.svg new file mode 100644 index 0000000..ab9d922 --- /dev/null +++ b/public/images/negative.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/positive.svg b/public/images/positive.svg new file mode 100644 index 0000000..7b9aa6d --- /dev/null +++ b/public/images/positive.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/user.svg b/public/images/user.svg new file mode 100644 index 0000000..e8d43cf --- /dev/null +++ b/public/images/user.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Advertisements/Design1/index.js b/src/components/Advertisements/Design1/index.js index 0565999..6d1b4c7 100644 --- a/src/components/Advertisements/Design1/index.js +++ b/src/components/Advertisements/Design1/index.js @@ -1,5 +1,5 @@ import React from "react"; -import Button from "../../Button"; +import Button from "../../ButtonDesign/Button"; const AdvertisementDesign1 = () => { return ( diff --git a/src/components/Advertisements/Design2/index.js b/src/components/Advertisements/Design2/index.js index fcba3be..c7a5be6 100644 --- a/src/components/Advertisements/Design2/index.js +++ b/src/components/Advertisements/Design2/index.js @@ -1,5 +1,5 @@ import React from "react"; -import Button from "../../Button"; +import Button from "../../ButtonDesign/Button"; const AdvertisementDesign2 = () => { return ( diff --git a/src/components/Advertisements/Design3/index.js b/src/components/Advertisements/Design3/index.js index cba5f57..8065bc7 100644 --- a/src/components/Advertisements/Design3/index.js +++ b/src/components/Advertisements/Design3/index.js @@ -1,5 +1,5 @@ import React from "react"; -import Button from "../../Button"; +import Button from "../../ButtonDesign/Button"; const AdvertisementDesign3 = ({ features }) => { return ( diff --git a/src/components/Advertisements/index.js b/src/components/Advertisements/index.js index 5e4f0dc..53ad644 100644 --- a/src/components/Advertisements/index.js +++ b/src/components/Advertisements/index.js @@ -4,7 +4,7 @@ import Design1 from "./Design1"; import Design2 from "./Design2"; import Design3 from "./Design3"; -function Blogs() { +function Advertisements() { const list = { 1: , 2: , @@ -26,4 +26,4 @@ function Blogs() { ); } -export default Blogs; +export default Advertisements; diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js new file mode 100644 index 0000000..301c796 --- /dev/null +++ b/src/components/Avatar/index.js @@ -0,0 +1,22 @@ +import React from "react"; + +function Avatar({ source, size, rounded, status, userImage }) { + return ( +
+ avatar + {status && ( + + )} +
+ ); +} + +export default Avatar; + +Avatar.defaultProps = { + userImage: "images/blog-author.png", +}; diff --git a/src/components/Blog/design2/index.js b/src/components/Blog/design2/index.js index 3e9a993..4e5f3b9 100644 --- a/src/components/Blog/design2/index.js +++ b/src/components/Blog/design2/index.js @@ -1,5 +1,5 @@ import React from "react"; -import Button from "../../Button"; +import Button from "../../ButtonDesign/Button"; import CommentIcon from "../../MiniComponents/CommentIcon"; import NewTagDesign from "../../NewTagDesign"; diff --git a/src/components/Button/index.js b/src/components/ButtonDesign/Button/index.js similarity index 100% rename from src/components/Button/index.js rename to src/components/ButtonDesign/Button/index.js diff --git a/src/components/ButtonDivTag/index.js b/src/components/ButtonDesign/ButtonDivTag/index.js similarity index 93% rename from src/components/ButtonDivTag/index.js rename to src/components/ButtonDesign/ButtonDivTag/index.js index 99dcea9..ad6538b 100644 --- a/src/components/ButtonDivTag/index.js +++ b/src/components/ButtonDesign/ButtonDivTag/index.js @@ -18,5 +18,5 @@ export default ButtonDivTag; ButtonDivTag.defaultProps = { className: "bg-darkGreenBg hover:bg-gray-900 textColor border border-lightBlueBorderColor border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4", - text: "اطلاعات بیشتر", + text: "its a DIV tag not BUTTON", }; diff --git a/src/components/ButtonDesign/index.js b/src/components/ButtonDesign/index.js new file mode 100644 index 0000000..101a27a --- /dev/null +++ b/src/components/ButtonDesign/index.js @@ -0,0 +1,28 @@ +import React, { useState } from "react"; + +import Button from "./Button"; +import ButtonDivTag from "./ButtonDivTag"; + +function ButtonDesign() { + const list = { + 1: - ); -}; - -export default ButtonNewDesign; - -ButtonNewDesign.defaultProps = { - bgColor: "bg-darkGreenBg", - bgHoverColor: "hover:bg-gray-900", - iconBgColor: "bg-darkGreenBg", - textColor: "text-white", - border: "border-b-4", - borderColor: "border-lightBlueBorderColor", - borderRadius: "rounded", - fontSize: "text-sm", - paddingX: "p-4", - paddingY: "p-4", - // icons - icon: true, - buttonIcon: arrow, - iconMarginRight: "mr-2", - text: "اطلاعات بیشتر", -}; diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js index 000fbc6..faba93e 100644 --- a/src/components/CardTrelloDesign/index.js +++ b/src/components/CardTrelloDesign/index.js @@ -1,5 +1,5 @@ import React from "react"; -import Button from "../Button"; +import Button from "../ButtonDesign/Button"; import CircleInCircle from "../CircleInCircle"; import NewTagDesign from "../NewTagDesign"; diff --git a/src/components/ChartDesign/index.js b/src/components/ChartDesign/index.js index 94a88df..13e28a4 100644 --- a/src/components/ChartDesign/index.js +++ b/src/components/ChartDesign/index.js @@ -2,7 +2,7 @@ import React, { useState } from "react"; import Recharts from "./Recharts"; -function Blogs() { +function ChartDesign() { const list = { 1: , }; @@ -22,4 +22,4 @@ function Blogs() { ); } -export default Blogs; +export default ChartDesign; diff --git a/src/components/CommentDesign/Comments/index.js b/src/components/CommentDesign/Comments/index.js new file mode 100644 index 0000000..c092c5d --- /dev/null +++ b/src/components/CommentDesign/Comments/index.js @@ -0,0 +1,162 @@ +import React from "react"; +import { connect } from "react-redux"; +import { connectToParent } from "../../../utils/comments"; + +import Avatar from "../../Avatar"; +import moment from "jalali-moment"; +import Button from "../../ButtonDesign/Button"; + +export const Comments = ({ comments }) => { + // connectToParent(comments); + const Comment = ({ comment }) => { + return ( +
+
+
+ +
+ {comment.username} +
+ + {comment.product?.color} + + + {comment.product?.name} + +
+
+
+
+ + {moment(comment.data).locale("fa").format("YYYY/MM/DD")} + + + {comment.date.getHours()} : {comment.date.getMinutes()} + +
+
+
+
+
+
+
Stars
+
+ {comment.status === true && ( + <> + + + برای خرید توصیه می‌کنم + + + )} + {comment.status === false && ( + <> + + + برای خرید توصیه نمی‌کنم + + + )} +
+
+

{comment.text}

+
+
+
+
+
+ ); + }; + return ( +
+ {comments.map((comment, index) => ( + + ))} +
+ ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Comments); + +Comments.defaultProps = { + comments: [ + { + id: 0, + pid: null, + username: "آرش سامانی", + date: new Date(), + text: "به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد", + userImage: "images/user.svg", + rate: 4, + product: { + name: "مک بوک پرو 16 گیگ", + color: "خاکستری", + }, + status: true, + }, + { + id: 1, + pid: 0, + username: "سورنا عابدی", + date: new Date(), + text: "به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد", + userImage: "images/user.svg", + rate: 4, + }, + { + id: 2, + pid: 1, + username: "آرش سامانی", + date: new Date(), + text: "به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد", + userImage: "images/user.svg", + rate: 4, + }, + { + id: 3, + pid: 2, + username: "آرش سامانی", + date: new Date(), + text: "به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد", + userImage: "images/user.svg", + rate: 4, + }, + { + id: 4, + pid: 3, + username: "آرش سامانی", + date: new Date(), + text: "به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد", + userImage: "images/user.svg", + rate: 4, + }, + { + id: 5, + pid: null, + username: "رضا رحمانی", + date: new Date(), + text: "به زودی می‌ فهمند که اشتباه کرده‌ اند و عظمت هر ملتی بر روی خرابه‌ های وطن خودش می‌باشد", + userImage: "images/user.svg", + rate: 4, + }, + ], +}; diff --git a/src/components/CommentDesign/index.js b/src/components/CommentDesign/index.js new file mode 100644 index 0000000..4ea6f2c --- /dev/null +++ b/src/components/CommentDesign/index.js @@ -0,0 +1,26 @@ +import React, { useState } from "react"; + +import Comments from "./Comments"; + +function CommentDesign() { + const list = { + 1: , + }; + const [type, setType] = useState(1); + + return ( +
+ + {list[type]} +
+ ); +} + +export default CommentDesign; diff --git a/src/components/MiniComponents/index.js b/src/components/MiniComponents/index.js index bdcfc65..b0fece3 100644 --- a/src/components/MiniComponents/index.js +++ b/src/components/MiniComponents/index.js @@ -3,7 +3,7 @@ import React, { useState } from "react"; import CommentIcon from "./CommentIcon"; import RelativeCircle from "./RelativeCircle"; -function Blogs() { +function MiniComponents() { const list = { 1: , 2: , @@ -25,4 +25,4 @@ function Blogs() { ); } -export default Blogs; +export default MiniComponents; diff --git a/src/components/buttonDesign/ButtonDesign.css b/src/components/buttonDesign/ButtonDesign.css deleted file mode 100644 index 8913b95..0000000 --- a/src/components/buttonDesign/ButtonDesign.css +++ /dev/null @@ -1 +0,0 @@ -/* No CSS *//*# sourceMappingURL=ButtonDesign.css.map */ \ No newline at end of file diff --git a/src/components/buttonDesign/ButtonDesign.css.map b/src/components/buttonDesign/ButtonDesign.css.map deleted file mode 100644 index 1b74437..0000000 --- a/src/components/buttonDesign/ButtonDesign.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": 3, - "mappings": "", - "sources": [ - "ButtonDesign.scss" - ], - "names": [], - "file": "ButtonDesign.css" -} \ No newline at end of file diff --git a/src/components/buttonDesign/ButtonDesign.js b/src/components/buttonDesign/ButtonDesign.js deleted file mode 100644 index 104b698..0000000 --- a/src/components/buttonDesign/ButtonDesign.js +++ /dev/null @@ -1,165 +0,0 @@ -import React from "react"; -import "./ButtonDesign.scss"; - -import greenLeftArrow from "../../assets/icons/green-left-arrow.svg"; - -import whiteLeftArrow from "../../assets/icons/white-left-arrow.svg"; -import whiteRightArrow from "../../assets/icons/white-right-arrow.svg"; -import whiteUpwardArrow from "../../assets/icons/white-upward-arrow.svg"; -import whiteDownwardArrow from "../../assets/icons/white-downward-arrow.svg"; - -import blackRightArrow from "../../assets/icons/black-right-arrow.svg"; -import blackLeftArrow from "../../assets/icons/black-left-arrow.svg"; -import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png"; -import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png"; - -const ButtonDesign = ({ - buttonBgColor, - circleArrowBgClr, - buttonTextColor, - buttonBorder, - buttonBorderColor, - buttonBorderRadius, - buttonPaddingX, - buttonPaddingY, - imageMarginRight, - imageWidth, - imageHeight, - // icons - leftArrowWhite, - rightArrowWhite, - upwardArrowWhite, - downwardArrowWhite, - leftArrowBlack, - rightArrowBlack, - upwardArrowBlack, - downwardArrowBlack, - buttonBgHoverColor, - circleArrow, -}) => { - return ( -
-
-

طراحی دکمه های سایت

-
-
-

- نام این کامپوننت - - buttonDesign - - است. -

-
- {/* Button UI Design */} -
-
- -
-
-
- ); -}; - -export default ButtonDesign; - -// color classes that i defined in tailwind.config.js and we can use for text color: -// ----> text-grayTextColor -// ----> text-white - -// color classes that i defined in tailwind.config.js and we can use for background color: -// ----> bg-darkGreenBg -// ----> bg-midGrayBgColor - -// color classes that i defined in tailwind.config.js and we can use for border color: -// ----> border-lightBlueBorderColor - -ButtonDesign.defaultProps = { - buttonBgColor: "bg-darkGreenBg", - buttonBgHoverColor: "bg-gray-900", - circleArrowBgClr: "bg-darkGreenBg", - buttonTextColor: "text-white", - buttonBorder: "border-b-4", - buttonBorderColor: "border-lightBlueBorderColor", - buttonBorderRadius: "rounded", - buttonPaddingX: "px-6", - buttonPaddingY: "py-4", - imageMarginRight: "mr-2", - imageWidth: "w-4", - imageHeight: "h-4", - // icons - leftArrowWhite: true, - rightArrowWhite: false, - upwardArrowWhite: false, - downwardArrowWhite: false, - leftArrowBlack: false, - rightArrowBlack: false, - upwardArrowBlack: false, - downwardArrowBlack: false, - circleArrow: false, -}; diff --git a/src/components/buttonDesign/ButtonDesign.scss b/src/components/buttonDesign/ButtonDesign.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/redux/data.js b/src/redux/data.js index 9c0dbb0..8764a40 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -1,5 +1,4 @@ -import ButtonDivTag from "../components/ButtonDivTag"; -import Button from "../components/Button"; +import ButtonDesign from "../components/ButtonDesign"; import Design2D from "../components/Design2D"; import AddToCartCard from "../components/AddToCart"; import Advertisements from "../components/Advertisements"; @@ -14,6 +13,7 @@ import ProgressBar from "../components/ProgressBar"; // 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"; @@ -106,22 +106,12 @@ import Checkbox from "../components/Checkbox"; const components = [ { - name: "Button", + name: "Button Design", author: "Andalib", props: [], content: { - name: "Button", - component: