mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi 3 years ago
parent fbe55e815e
commit bf9ef453f6
14 changed files with 229 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/App.js
  2. 15
      src/assets/icons/black-comment-icon.svg
  3. 3
      src/assets/icons/light-blue-icon.svg
  4. 11
      src/assets/icons/light-gray-comment-icon.svg
  5. 20
      src/assets/icons/white-comment-icon.svg
  6. 39
      src/components/Blogs/design1/BlogDesign1.js
  7. 31
      src/components/Blogs/design2/BlogDesign2.js
  8. 35
      src/components/Blogs/design3/BlogDesign3.js
  9. 91
      src/components/Blogs/design4/BlogDesign4.js
  10. 44
      src/components/Blogs/design5/BlogDesign5.js
  11. 40
      src/components/Blogs/design6/BlogDesign6.js
  12. 9
      src/components/vodProductDesign/VodProductDesign.js
  13. 2
      src/index.scss
  14. 1
      tailwind.config.js

8
src/App.js
Unescape View File

@ -16,18 +16,18 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
function App() {
return (
<div className="App">
<ProductDesign />
<VodProductDesign />
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
<BlogDesign1 />
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
<BlogDesign6 />
{/* <HeaderDesign1 /> */}
</div>
);

15
src/assets/icons/black-comment-icon.svg
Unescape View File

@ -1,15 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<g id="Group_183" data-name="Group 183" transform="translate(-6702 -2215)">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(6018 2031.759)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
<circle id="Ellipse_94" data-name="Ellipse 94" cx="6.5" cy="6.5" r="6.5" transform="translate(6725 2215)" fill="#818181"/>
<text id="_17" data-name="17" transform="translate(6735 2223)" fill="#fff" font-size="6" font-family="SegoeUI, Segoe UI"><tspan x="-6.469" y="0">17</tspan></text>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

3
src/assets/icons/light-blue-icon.svg
Unescape View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="27.552" height="29.311" viewBox="0 0 27.552 29.311">
<path id="Vector" d="M0,14.659v-6C0,.919,5.472-2.2,12.16,1.648l5.188,3,5.188,3c6.688,3.851,6.688,10.174,0,14.024l-5.188,3-5.188,3C5.472,31.521,0,28.359,0,20.658Z" fill="#06bace"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 289 B

11
src/assets/icons/light-gray-comment-icon.svg
Unescape View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

20
src/assets/icons/white-comment-icon.svg
Unescape View File

@ -1,15 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<g id="Group_189" data-name="Group 189" transform="translate(-6702 -2215)">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(6018 2031.759)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" width="33.241" height="33.241" viewBox="0 0 33.241 33.241">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(-684 -186)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
<circle id="Ellipse_94" data-name="Ellipse 94" cx="6.5" cy="6.5" r="6.5" transform="translate(6725 2215)" fill="#fff"/>
<text id="_17" data-name="17" transform="translate(6735 2223)" fill="#646464" font-size="6" font-family="SegoeUI, Segoe UI"><tspan x="-6.469" y="0">17</tspan></text>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

39
src/components/Blogs/design1/BlogDesign1.js
Unescape View File

@ -3,13 +3,18 @@ import React from "react";
import blogImage from "../../../assets/images/blog-featured-image.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {} from "@fortawesome/free-brands-svg-icons";
import { faComment } from "@fortawesome/free-solid-svg-icons";
const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
const BlogDesign1 = ({
blogExcerpt,
blogAuthor,
blogComments,
commentNumBgColor,
commentNumTextColor,
commentNumTopPosition,
commentNumRightPosition,
}) => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
<div className="flex items-center justify-between mb-6">
@ -56,11 +61,10 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<FontAwesomeIcon
icon={faComment}
className="text-grayTextColor text-md"
></FontAwesomeIcon>
<span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
<img src={commentIcon} alt="" className="w-6 h-6" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
@ -75,8 +79,21 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
export default BlogDesign1;
// background color i used in commnet number background color
// bg-lightGrayBgColor
// bg-white
// text color i used for comment number text color:
// text-grayTextColor
// text-white
BlogDesign1.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
commentNumBgColor: "bg-lightGrayBgColor",
commentNumTextColor: "text-white",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
};

31
src/components/Blogs/design2/BlogDesign2.js
Unescape View File

@ -5,18 +5,19 @@ import "./BlogDesign2.scss";
import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {} from "@fortawesome/free-brands-svg-icons";
import { faComment } from "@fortawesome/free-solid-svg-icons";
const BlogDesign2 = ({
blogSubTitle,
dateButton,
tagButton,
blogAuthor,
blogComments,
commentNumBgColor,
commentNumTextColor,
commentNumTopPosition,
commentNumRightPosition,
}) => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -79,11 +80,10 @@ const BlogDesign2 = ({
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<FontAwesomeIcon
icon={faComment}
className="text-white text-md"
></FontAwesomeIcon>
<span className="comment-num absolute -top-3 -right-3 bg-white text-black">
<img src={whiteCommentIcon} alt="" className="w-6 h-6" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
@ -105,10 +105,23 @@ const BlogDesign2 = ({
export default BlogDesign2;
// background color i used in commnet number background color
// bg-lightGrayBgColor
// bg-white
// text color i used for comment number text color:
// text-grayTextColor
// text-white
BlogDesign2.defaultProps = {
blogSubTitle: true,
dateButton: true,
tagButton: false,
blogAuthor: true,
blogComments: true,
commentNumBgColor: "bg-white",
commentNumTextColor: "text-grayTextColor",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
};

35
src/components/Blogs/design3/BlogDesign3.js
Unescape View File

@ -3,11 +3,8 @@ import React from "react";
import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {} from "@fortawesome/free-brands-svg-icons";
import { faComment } from "@fortawesome/free-solid-svg-icons";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
const BlogDesign3 = ({
blogSubTitle,
@ -15,6 +12,10 @@ const BlogDesign3 = ({
blogComments,
blogTitleColor,
blogCommentAuthorTextColor,
commentNumBgColor,
commentNumTextColor,
commentNumTopPosition,
commentNumRightPosition,
}) => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -73,14 +74,13 @@ const BlogDesign3 = ({
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<FontAwesomeIcon
icon={faComment}
className="text-grayTextColor text-md"
></FontAwesomeIcon>
<span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
<img src={commentIcon} alt="" className="w-6 h-6" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>{" "}
</div>
</div>
)}
</div>
@ -97,6 +97,14 @@ export default BlogDesign3;
// text-productTitle
// text-lightGrayTextColor
// background color i used in commnet number background color
// bg-lightGrayBgColor
// bg-white
// text color i used for comment number text color:
// text-grayTextColor
// text-white
BlogDesign3.defaultProps = {
blogTitleColor: "text-lightGrayTextColor",
blogCommentAuthorTextColor: "text-lightGrayTextColor",
@ -104,4 +112,9 @@ BlogDesign3.defaultProps = {
blogSubTitle: true,
blogAuthor: true,
blogComments: true,
commentNumBgColor: "bg-lightGrayBgColor",
commentNumTextColor: "text-white",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
};

91
src/components/Blogs/design4/BlogDesign4.js
Unescape View File

@ -3,13 +3,18 @@ import React from "react";
import blogImage from "../../../assets/images/blog-featured-image.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {} from "@fortawesome/free-brands-svg-icons";
import { faComment } from "@fortawesome/free-solid-svg-icons";
const BlogDesign4 = () => {
const BlogDesign4 = ({
blogExcerpt,
blogAuthor,
blogComments,
commentNumBgColor,
commentNumTextColor,
commentNumTopPosition,
commentNumRightPosition,
}) => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
{/* title holder */}
@ -35,32 +40,37 @@ const BlogDesign4 = () => {
<h2 className="text-sm text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
<p className="text-xs text-justify leading-6 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
{blogExcerpt && (
<p className="text-xs text-justify leading-6 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
)}
<div className=" flex item-center justify-between">
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-6 h-6" />
<p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<FontAwesomeIcon
icon={faComment}
className="text-grayTextColor text-md"
></FontAwesomeIcon>
<span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
26
</span>
</div>{" "}
</div>
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" className="w-6 h-6" />
<p className="text-xs text-lightGrayTextColor font-light mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<img src={commentIcon} alt="" className="w-6 h-6" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>
</div>
)}
</div>
</div>
</div>
@ -69,3 +79,22 @@ const BlogDesign4 = () => {
};
export default BlogDesign4;
// background color i used in commnet number background color
// bg-lightGrayBgColor
// bg-white
// text color i used for comment number text color:
// text-grayTextColor
// text-white
BlogDesign4.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
commentNumBgColor: "bg-lightGrayBgColor",
commentNumTextColor: "text-white",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
};

44
src/components/Blogs/design5/BlogDesign5.js
Unescape View File

@ -3,15 +3,20 @@ import React from "react";
import blogImage from "../../../assets/images/blog-featured-image.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {} from "@fortawesome/free-brands-svg-icons";
import { faComment } from "@fortawesome/free-solid-svg-icons";
const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
const BlogDesign5 = ({
blogExcerpt,
blogAuthor,
blogComments,
commentNumBgColor,
commentNumTextColor,
commentNumTopPosition,
commentNumRightPosition,
}) => {
return (
<section className="w-4/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
<section className="w-5/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
@ -42,7 +47,6 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
دیگران متوجه شوند.
</p>
)}
<div className="flex item-center justify-between w-full">
{blogAuthor && (
<div className="flex items-center">
@ -58,14 +62,13 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<FontAwesomeIcon
icon={faComment}
className="text-grayTextColor text-md"
></FontAwesomeIcon>
<span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
<img src={commentIcon} alt="" className="w-6 h-6" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>{" "}
</div>
</div>
)}
</div>
@ -77,8 +80,21 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
export default BlogDesign5;
// background color i used in commnet number background color
// bg-lightGrayBgColor
// bg-white
// text color i used for comment number text color:
// text-grayTextColor
// text-white
BlogDesign5.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
commentNumBgColor: "bg-lightGrayBgColor",
commentNumTextColor: "text-white",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
};

40
src/components/Blogs/design6/BlogDesign6.js
Unescape View File

@ -3,14 +3,20 @@ import React from "react";
import blogImage from "../../../assets/images/blog-featured-image.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
import FeaturedImage from "../../../assets/images/article-featured-image.svg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {} from "@fortawesome/free-brands-svg-icons";
import { faComment } from "@fortawesome/free-solid-svg-icons";
import commentIcon from "../../../assets/icons/light-gray-comment-icon.svg";
import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
const BlogDesign6 = ({
blogExcerpt,
blogAuthor,
blogComments,
commentNumBgColor,
commentNumTextColor,
commentNumTopPosition,
commentNumRightPosition,
}) => {
return (
<section className="w-5/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
@ -56,14 +62,13 @@ const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
زمان مطالعه 30 دقیقه
</p>
<div className="relative">
<FontAwesomeIcon
icon={faComment}
className="text-grayTextColor text-md"
></FontAwesomeIcon>
<span className="comment-num absolute -top-3 -right-3 bg-lightGrayBgColor text-white">
<img src={commentIcon} alt="" className="w-6 h-6" />
<span
className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
>
26
</span>
</div>{" "}
</div>
</div>
)}
</div>
@ -75,8 +80,21 @@ const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
export default BlogDesign6;
// background color i used in commnet number background color
// bg-lightGrayBgColor
// bg-white
// text color i used for comment number text color:
// text-grayTextColor
// text-white
BlogDesign6.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
commentNumBgColor: "bg-lightGrayBgColor",
commentNumTextColor: "text-white",
commentNumTopPosition: "-top-2",
commentNumRightPosition: "-right-2",
};

9
src/components/vodProductDesign/VodProductDesign.js
Unescape View File

@ -45,6 +45,7 @@ const VodProductDesign = ({
priceStarHolder,
priceStarAlignment,
rangeWidth,
playBtnBgColor,
}) => {
return (
<section className="w-3/6 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -97,7 +98,7 @@ const VodProductDesign = ({
)}
</div>
{/* play button */}
<div className="playBtnImg bg-playButtonIcon rounded-full p-4">
<div className={`playBtnImg rounded-full p-4 ${playBtnBgColor}`}>
<img src={whitePlayIcon} alt="" className="w-5 h-5" />
</div>
{/* select Color */}
@ -258,6 +259,10 @@ export default VodProductDesign;
// text color i used for product cat:
// text-darkCrimsonTextColor
// bg color i used for play button icon:
// bg-playButtonIcon
// bg-playButtonIcon2
VodProductDesign.defaultProps = {
// icons on product image
colors: true,
@ -298,6 +303,8 @@ VodProductDesign.defaultProps = {
productTitleCategoryHolder: "flex-row",
productTitleCategoryHolderAlignment: "items-center",
playBtnBgColor: "bg-playButtonIcon",
// برای اینکه بتونیم ستاره هارو بالا قیمت بزاریم و دیزاین را مثل کتاب ها در بیاریم
// یادمون باشه که حتما رویه
// flex-col-reverse

2
src/index.scss
Unescape View File

@ -16,7 +16,7 @@ body {
}
.comment-num {
font-size: 10px;
font-size: 8px;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;

1
tailwind.config.js
Unescape View File

@ -54,6 +54,7 @@ module.exports = {
rangeBgColor: "#D3E9FF",
rangeFillBgColor: "#68A8E6",
playButtonIcon: "#0D0D0D99",
playButtonIcon2: "#E8E8E899",
}),
borderColor: (theme) => ({
...theme("colors"),

Write Preview
Loading…
Cancel
Save