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

update

Browse Source
master
mahdi 3 years ago
parent 65fd1a4b16
commit c5be09b96c
11 changed files with 199 additions and 15 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. 99
      package-lock.json
  2. 3
      package.json
  3. 14
      src/App.js
  4. 14
      src/components/Blogs/design1/BlogDesign1.js
  5. 14
      src/components/Blogs/design2/BlogDesign2.js
  6. 18
      src/components/Blogs/design3/BlogDesign3.js
  7. 14
      src/components/Blogs/design4/BlogDesign4.js
  8. 14
      src/components/Blogs/design5/BlogDesign5.js
  9. 14
      src/components/Blogs/design6/BlogDesign6.js
  10. 9
      src/index.scss
  11. 1
      tailwind.config.js

99
package-lock.json generated
Unescape View File

@ -8,6 +8,9 @@
"name": "danovin-tasks",
"version": "0.1.0",
"dependencies": {
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
@ -1908,6 +1911,64 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"hasInstallScript": true,
"peer": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
"integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.1.16",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
"integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || >=1.3.0-beta1",
"react": ">=16.x"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
@ -17310,6 +17371,44 @@
}
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
"integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.36",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
"integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
"peer": true,
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/free-brands-svg-icons": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
"integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.4",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
"integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.36"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.16",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz",
"integrity": "sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==",
"requires": {
"prop-types": "^15.7.2"
}
},
"@humanwhocodes/config-array": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",

3
package.json
Unescape View File

@ -3,6 +3,9 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",

14
src/App.js
Unescape View File

@ -22,13 +22,13 @@ function App() {
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
<HeaderDesign1 />
<BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
{/* <HeaderDesign1 /> */}
</div>
);
}

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

@ -5,6 +5,10 @@ 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";
const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -51,7 +55,15 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
<p className="text-xs text-lightGrayTextColor ml-2 font-light">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" className="w-5 h-5" />
<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>
)}
</div>

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

@ -7,6 +7,10 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
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,
@ -74,7 +78,15 @@ const BlogDesign2 = ({
<p className="text-xs text-white font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={whiteCommentIcon} alt="" className="w-6 h-6" />
<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">
26
</span>
</div>
</div>
)}
</div>

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

@ -5,6 +5,10 @@ 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";
const BlogDesign3 = ({
blogSubTitle,
blogAuthor,
@ -68,7 +72,15 @@ const BlogDesign3 = ({
>
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" className="w-6 h-6" />
<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>
)}
</div>
@ -86,8 +98,8 @@ export default BlogDesign3;
// text-lightGrayTextColor
BlogDesign3.defaultProps = {
blogTitleColor: "text-darkBlueTextColor2",
blogCommentAuthorTextColor: "text-darkBlueTextColor2",
blogTitleColor: "text-lightGrayTextColor",
blogCommentAuthorTextColor: "text-lightGrayTextColor",
blogSubTitle: true,
blogAuthor: true,

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

@ -5,6 +5,10 @@ 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";
const BlogDesign4 = () => {
return (
<section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
@ -47,7 +51,15 @@ const BlogDesign4 = () => {
<p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" className="w-6 h-6" />
<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>
</div>
</div>

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

@ -5,6 +5,10 @@ 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";
const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-4/12 mx-auto p-4 bg-gray-200 rounded-md shadow-md my-8">
@ -53,7 +57,15 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
<p className="text-xs text-lightGrayTextColor font-light ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" className="w-6 h-6" />
<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>
)}
</div>

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

@ -6,6 +6,10 @@ 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";
const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-5/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@ -51,7 +55,15 @@ const BlogDesign6 = ({ blogExcerpt, blogAuthor, blogComments }) => {
<p className="text-xs text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" className="w-7 h-7" />
<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>
)}
</div>

9
src/index.scss
Unescape View File

@ -14,3 +14,12 @@ body {
direction: rtl;
background-color: #f5f5f5;
}
.comment-num {
font-size: 10px;
padding-top: 4px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
border-radius: 50%;
}

1
tailwind.config.js
Unescape View File

@ -38,6 +38,7 @@ module.exports = {
counterBg: "#66B1EB",
incrementDecrementBg: "#2E7AB5",
darkGreenBg: "#038A99",
lightGrayBgColor: "#818181",
midGrayBgColor: "#DBDBDB",
lightOrangeBgColor: "#F7B60511",
lightYellowBgColor: "#CEFE2D11", //opacity should be 10 % instead of 100%

Write Preview
Loading…
Cancel
Save