update src/components/Blog/design1/index.js, src/components/Blog/design2/index.js, src/components/Blog/design3/index.js and src/components/CurrentDateTime/DateTime/index.js

master
mahdi 2 years ago
parent b15c909fd8
commit 47083e0d2e
  1. 12
      src/components/Blog/design1/index.js
  2. 10
      src/components/Blog/design2/index.js
  3. 2
      src/components/Blog/design3/index.js
  4. 6
      src/components/CurrentDateTime/DateTime/index.js

@ -10,17 +10,17 @@ const BlogDesign1 = ({
blogComments,
}) => {
return (
<div className="w-fit flex items-strech justify-around p-4 bg-white">
<div className="w-fit flex items-strech justify-around p-4 bg-surface rounded">
<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">
<h2 className="text-base text-justify text-primaryText font-bold leading-6">
{blogTitle}
</h2>
)}
{blogExcerpt && (
<p className="mt-4 text-justify text-sm text-[#646464] leading-6">
<p className="mt-4 text-justify text-sm text-primaryText leading-6">
{blogExcerpt}
</p>
)}
@ -29,16 +29,16 @@ const BlogDesign1 = ({
{blogAuthor && (
<div className="flex items-center">
<img src={blogAuthorImg} alt="author" className="w-8" />
<p className="mr-2 text-sm text-[#818181]">{blogAuthor}</p>
<p className="mr-2 text-sm text-primaryText">{blogAuthor}</p>
</div>
)}
{blogComments && (
<div className="flex items-center">
<p className="ml-2 text-sm text-[#818181]">{blogComments}</p>
<p className="ml-2 text-sm text-primaryText">{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"
className="w-5 h-5 bg-primaryText text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}

@ -29,7 +29,7 @@ const BlogDesign2 = ({
<Button
text={"1400/09/19"}
className={
"w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
"w-fit bg-primary text-primaryText p-2 rounded text-xs font-bold absolute left-2 top-4"
}
/>
)}
@ -38,18 +38,18 @@ const BlogDesign2 = ({
title={"تگ"}
icon={false}
tagClassName={
"w-fit bg-yellow-100 p-2 rounded text-xs font-sansbold absolute left-2 top-4"
"w-fit bg-primary text-primaryText p-2 rounded text-xs font-bold 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">
<h2 className="text-base text-justify text-white font-bold leading-6">
{blogTitle}
</h2>
)}
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-sansbold leading-6">
<h2 className="text-white text-base mt-2 font-bold leading-6">
شما چه فکری می کنید
</h2>
)}
@ -68,7 +68,7 @@ const BlogDesign2 = ({
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"
className="w-5 h-5 bg-white text-primaryText text-[10px] border-primaryText font-bold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
/>
</div>
)}

@ -11,7 +11,7 @@ const BlogDesign3 = ({
}) => {
return (
<div
className="min-w-[550px] relative flex flex-col justify-end p-3"
className="min-w-[550px] relative flex flex-col justify-end p-3"
style={{
backgroundImage: `url(${featuredImage})`,
backgroundSize: "100% 100%",

@ -8,11 +8,11 @@ const DateTime = () => {
<div className="flex flex-col">
{/* ? time */}
<div className="flex flex-row items-center mb-2">
<span className="text-sm ml-2 text-[#0F0543] ">ساعت</span>
<CurrentTime color={"text-[#2A527A]"} fontSize={"text-sm"} />
<span className="text-sm ml-2 text-primaryText ">ساعت</span>
<CurrentTime color={"text-primaryLight"} fontSize={"text-sm"} />
</div>
{/* ? date */}
<CurrentDateShamsi color={"text-[#2A527A]"} fontSize={"text-sm"} />
<CurrentDateShamsi color={"text-primaryLight"} fontSize={"text-sm"} />
</div>
);
};

Loading…
Cancel
Save