fix(*): update button components

HoseaCodes · Feb 21, 2024 · fac63d6 · fac63d6
1 parent 824dbb8
commit fac63d6
Show file tree

Hide file tree

Showing 9 changed files with 597 additions and 364 deletions.
diff --git a/src/Components/Article/RelatedPosts.jsx b/src/Components/Article/RelatedPosts.jsx
@@ -6,9 +6,9 @@ import {CircleImage} from '../../Layout/Image/styledImage';
 import {NamePlate} from '../../Layout/Text/styledText';
 import {MarginTop} from '../../Layout/Margin/styledMargin';
 import {ArticleMainHr} from '../../Layout/Hr/styledHr';
-import {ReadMore} from '../../Layout/Button/styledButton';
 import { Link } from 'react-router-dom';
 import { useHistory } from 'react-router-dom';
+import {Button} from '../../Components/Button/Button';
 
 const RelatedPosts = (props) => {
 
@@ -31,45 +31,72 @@ const RelatedPosts = (props) => {
   }
 
   return (
-          <MarginTop Whitesmoke>
-            {recentPosts.map(article => {
-              return (
-                  <div key={article.id}>
-                    <BlogCard RelatedPost>
-                      <AlignContent>
-                        <CircleImage Secondary src={user.avatar ||"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"}
-                          alt="author"/>
-                        <NamePlate>{user.name || "Will Smith"}</NamePlate>
-                        <span>&nbsp;&#183;&nbsp;</span>
-                        <GrayDiv>{timeFormater}</GrayDiv>
-                      </AlignContent>
-                      <AlignContent Column>
-                        <div style={{marginRight: '1rem'}}>
-                        <Link to={`/blog/${article.id}`} rel="noopener noreferrer">
-                          <h4>{article.title || "No Code Approach — Process Speech and convert to Text — Logic Apps"}</h4>
-                        </Link>
-                          <p  style={{width: '80%'}}> {article.description || "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."}
-                          </p>
-                        </div>
-                        <img height={'250rem'} width={'450rem'} src={article.images.url|| "https://tateeda.com/wp-content/uploads/2020/05/2.png"} alt="post"/>
-                      </AlignContent>
-                      <JustifyContent MiniPost>
-                        <AlignContent Inherit>
-                          <Tag>Software</Tag>
-                          <AlignContent Gray><span>{readTime} min read</span></AlignContent>
-                        </AlignContent>
-                        <MdBookmarkBorder style={{fontSize: '2.5rem'}}/>
-                      </JustifyContent>
-                    </BlogCard>
-                    <ArticleMainHr/>
-                  </div>
-                  )
-                })}
-            <AlignContent CenterBtn>
-              <ReadMore disabled={!moreArticles} onClick={handleReadMore}>Read more</ReadMore>
-            </AlignContent>
-          </MarginTop>
-  )
+    <MarginTop Whitesmoke>
+      {recentPosts.map((article) => {
+        return (
+          <div key={article.id}>
+            <BlogCard RelatedPost>
+              <AlignContent>
+                <CircleImage
+                  Secondary
+                  src={
+                    user.avatar ||
+                    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0k6I8WItSjK0JTttL3FwACOA6yugI29xvLw&usqp=CAU"
+                  }
+                  alt="author"
+                />
+                <NamePlate>{user.name || "Will Smith"}</NamePlate>
+                <span>&nbsp;&#183;&nbsp;</span>
+                <GrayDiv>{timeFormater}</GrayDiv>
+              </AlignContent>
+              <AlignContent Column>
+                <div style={{ marginRight: "1rem" }}>
+                  <Link to={`/blog/${article.id}`} rel="noopener noreferrer">
+                    <h4>
+                      {article.title ||
+                        "No Code Approach — Process Speech and convert to Text — Logic Apps"}
+                    </h4>
+                  </Link>
+                  <p style={{ width: "80%" }}>
+                    {" "}
+                    {article.description ||
+                      "Using Azure Cognitive Services Speech to Text and Logic apps No Code — Workflow style We can re use the same pattern for other Azure Cognitive..."}
+                  </p>
+                </div>
+                <img
+                  height={"250rem"}
+                  width={"450rem"}
+                  src={
+                    article.images.url ||
+                    "https://tateeda.com/wp-content/uploads/2020/05/2.png"
+                  }
+                  alt="post"
+                />
+              </AlignContent>
+              <JustifyContent MiniPost>
+                <AlignContent Inherit>
+                  <Tag>Software</Tag>
+                  <AlignContent Gray>
+                    <span>{readTime} min read</span>
+                  </AlignContent>
+                </AlignContent>
+                <MdBookmarkBorder style={{ fontSize: "2.5rem" }} />
+              </JustifyContent>
+            </BlogCard>
+            <ArticleMainHr />
+          </div>
+        );
+      })}
+      <AlignContent CenterBtn>
+        <Button
+          backgroundColor="green"
+          label="Read more"
+          onClick={handleReadMore}
+          disabled={!moreArticles}
+        />
+      </AlignContent>
+    </MarginTop>
+  );
 }
 
 export default RelatedPosts;