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

update 2 files and delete 7 files

Browse Source
master
mahdi andalib 3 years ago
parent 3e01af5635
commit 18e7495e00
9 changed files with 3 additions and 485 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. 5
      src/components/Blog/design5/index.js
  2. 66
      src/components/Blogss/design1/index.js
  3. 103
      src/components/Blogss/design2/index.js
  4. 71
      src/components/Blogss/design3/index.js
  5. 68
      src/components/Blogss/design4/index.js
  6. 71
      src/components/Blogss/design5/index.js
  7. 63
      src/components/Blogss/design6/index.js
  8. 35
      src/components/Blogss/index.js
  9. 6
      src/redux/data.js

5
src/components/Blog/design5/index.js
Unescape View File

@ -1,9 +1,4 @@
import React from "react";
import blogImage from "../assets/blog-featured-image.jpg";
import blogAuthorImg from "../assets/blog-author.png";
import commentIcon from "../assets/light-gray-comment-icon.svg";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign5 = ({

66
src/components/Blogss/design1/index.js
Unescape View File

@ -1,66 +0,0 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign1 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="w-fit flex items-strech justify-around p-4 bg-white">
<img src={featuredImage} alt="blogImage" className="shrink" />
<div className="flex-1 flex flex-col justify-between mr-4 py-2">
<div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
</div>
<div className="w-full flex item-center justify-between mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign1;
BlogDesign1.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/blog-featured-image.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

103
src/components/Blogss/design2/index.js
Unescape View File

@ -1,103 +0,0 @@
import React from "react";
import Button from "../../Button";
import CommentIcon from "../../MiniComponents/CommentIcon";
import NewTagDesign from "../../NewTagDesign";
const BlogDesign2 = ({
blogTitle,
blogSubTitle,
featuredImage,
dateButton,
tagButton,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div
className="group min-w-[550px] relative flex flex-col justify-end p-4 cursor-pointer"
style={{
backgroundImage: `url(${featuredImage})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{dateButton && (
<Button
text={"1400/09/19"}
className={
"w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
}
/>
)}
{tagButton && (
<NewTagDesign
title={"تگ"}
icon={false}
tagClassName={
"w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
}
/>
)}
<div className="transition-all duration-300 transfrom group-hover:-translate-y-1 z-10">
{blogTitle && (
<h2 className="text-base text-justify text-white font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}
</div>
<div className="w-full flex item-center justify-between mt-4 z-10">
{blogAuthor && (
<div className="flex items-center transition duration-200 transform hover:-translate-y-1">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-white">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-white">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
icon={"images/white-comment-icon.svg"}
commentNum={"26"}
className="w-5 h-5 bg-white text-[#818181] text-[10px] border-[#818181] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
<div
style={{
zIndex: 0,
background:
"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,0,36,0) 100%)",
}}
className="absolute right-0 bottom-0 h-full w-full"
></div>
</div>
);
};
export default BlogDesign2;
BlogDesign2.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogSubTitle: `شما چه فکری می کنید`,
featuredImage: "images/blog-featured-image2.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
dateButton: true,
tagButton: false,
};

71
src/components/Blogss/design3/index.js
Unescape View File

@ -1,71 +0,0 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign3 = ({
blogTitle,
blogSubTitle,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div
className="min-w-[550px] relative flex flex-col justify-end p-3"
style={{
backgroundImage: `url(${featuredImage})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
// minHeight: "300px",
height: "calc(100vh/3)",
maxHeight: "300px",
}}
>
{/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
{blogTitle && (
<h2 className="text-[#646464] text-base text-justify font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogSubTitle && (
<h2 className="text-[#646464] text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}
<div className="flex item-center justify-between w-full mt-4">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#2a2a2a]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#2a2a2a]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign3;
BlogDesign3.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogSubTitle: `شما چه فکری می کنید`,
featuredImage: "images/blog-featured-image2.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

68
src/components/Blogss/design4/index.js
Unescape View File

@ -1,68 +0,0 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign4 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="flex items-strech justify-between p-4 bg-white rounded-xl border border-gray-300">
<div className="transform translate-x-1/3">
<img src={featuredImage} alt="" className="w-full h-full " />
</div>
<div className="flex-1 flex flex-col justify-between py-3 transform translate-x-10">
<div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
</div>
<div className=" flex item-center justify-between">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign4;
BlogDesign4.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/blog-featured-image.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

71
src/components/Blogss/design5/index.js
Unescape View File

@ -1,71 +0,0 @@
import React from "react";
import blogImage from "../assets/blog-featured-image.jpg";
import blogAuthorImg from "../assets/blog-author.png";
import commentIcon from "../assets/light-gray-comment-icon.svg";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign5 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="flex items-strech justify-around p-4 rounded-md shadow-md bg-white">
<img src={featuredImage} alt="blogImage" />
<div className="flex-1 flex flex-col justify-between mr-4 py-2">
<div className="flex flex-col">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
</div>
<div className="w-full flex item-center justify-between mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign5;
BlogDesign5.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/blog-featured-image.jpg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

63
src/components/Blogss/design6/index.js
Unescape View File

@ -1,63 +0,0 @@
import React from "react";
import CommentIcon from "../../MiniComponents/CommentIcon";
const BlogDesign6 = ({
blogTitle,
blogExcerpt,
featuredImage,
blogAuthor,
blogAuthorImg,
blogComments,
}) => {
return (
<div className="flex flex-col p-4 bg-white rounded-md shadow-md">
<img src={featuredImage} alt="" className="w-full" />
<div className="p-4">
{blogTitle && (
<h2 className="text-base text-justify text-[#646464] font-sansbold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
{blogExcerpt}
</p>
)}
<div className="w-full flex item-center justify-between mt-2">
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<CommentIcon
commentClassName="w-7"
commentNum={"26"}
className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}
</div>
</div>
</div>
);
};
export default BlogDesign6;
BlogDesign6.defaultProps = {
blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
blogExcerpt: `در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
`,
featuredImage: "images/article-featured-image.svg",
blogAuthor: `حامد دژبانی نسب`,
blogAuthorImg: "images/blog-author.png",
blogComments: `زمان مطالعه 30 دقیقه`,
};

35
src/components/Blogss/index.js
Unescape View File

@ -1,35 +0,0 @@
import React, { useState } from "react";
import Blog1 from "./design1";
import Blog2 from "./design2";
import Blog3 from "./design3";
import Blog4 from "./design4";
import Blog5 from "./design5";
import Blog6 from "./design6";
function Blogs() {
const list = {
1: <Blog1 />,
2: <Blog2 />,
3: <Blog3 />,
4: <Blog4 />,
5: <Blog5 />,
6: <Blog6 />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="w-20 bg-gray-200 mb-10"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default Blogs;

6
src/redux/data.js
Unescape View File

@ -6,7 +6,7 @@ import Advertisements from "../components/Advertisements";
import Alert from "../components/Alert";
import Toast from "../components/Toast";
import Banners from "../components/Banners";
import Blogss from "../components/Blogss";
import Blog from "../components/Blog";
import CardTrelloDesign from "../components/CardTrelloDesign";
import Chart from "../components/Recharts";
@ -184,12 +184,12 @@ const components = [
},
},
{
name: "Blogss",
name: "Blog",
author: "Andalib",
props: [],
content: {
name: "Blog Designs",
component: <Blogss />,
component: <Blog />,
code: null,
},
},

Write Preview
Loading…
Cancel
Save