Converted Title component

Author: klezi10

components/blog/BlogPostsContainer.js

@@ -32,9 +32,9 @@ const BlogPostsContainer = ({
     <RevealContentContainer>
       <div className={styles.blogContainer}>
         {heading ? (
-          <Title customClass='blogTitle' title={heading} />
+          <Title blogTitle title={heading} />
         ) : tag ? (
-          <Title customClass='blogTitle' title={tagToHeading[tag]} />
+          <Title blogTitle title={tagToHeading[tag]} />
         ) : null}
         {
           // put in rows of 3 if more than 3 posts (for swipable cards)

components/snippets/Title.js

@@ -1,30 +1,20 @@
-// import styles from '@/styles/Title.module.scss';
 import styled from 'styled-components';
 
 export const TitleStyle = styled.h2`
-  color: red;
+  ${props =>
+    props.blogTitle &&
+    `
+    align-self: flex-start;
+    margin: 0 auto 1rem;
+    width: 90%;
+    max-width: $large-desktop-breakpoint;
+    min-height: 5rem;
+    color: black;
+  `};
 `;
 
-const Title = ({ title }) => {
-  return (
-    <div>
-      <TitleStyle>{title}</TitleStyle>
-    </div>
-  );
+const Title = ({ title, blogTitle }) => {
+  return <TitleStyle blogTitle={blogTitle}>{title}</TitleStyle>;
 };
 
 export default Title;
-
-// const Title = ({ title, customClass }) => {
-//   return (
-//     <h2
-//       className={
-//         customClass ? `${styles.title} ${styles[customClass]}` : styles.title
-//       }
-//     >
-//       {title}
-//     </h2>
-//   );
-// };
-
-// export default Title;

pages/blog/index.js

@@ -28,7 +28,7 @@ export default function Blog({ posts }) {
   return (
     <>
       <div className={styles.blogSearch}>
-        <Title customClass='blogTitle' title={!searchTerm && 'Latest Posts'} />
+        <Title blogTitle title={!searchTerm && 'Latest Posts'} />
         <SearchBar setSearchTerm={setSearchTerm} />
       </div>
       <BlogPostsContainer {...filteredData} />