blog page with filter

e19399cc · Madhankumar · 980611b1 · e19399cc · e19399cc · e19399cc
Commit e19399cc authored Dec 13, 2023 by Madhankumar
22 changed files
--- a/app/container.js
+++ b/app/container.js
 "use client";
 import { useEffect, useState } from "react";
 import BlogLists from "@components/top-level/blog-lists";
-
 import { useAppContext } from "@context/index";
+import styles from "./container.module.css";

 export default function BlogContainer({ blogs }) {
  const { input } = useAppContext();
@@ -21,12 +21,18 @@ export default function BlogContainer({ blogs }) {

    setFilteredBlogs(filtered);
  };
-
+  console.log("dfh", filteredBlogs);
  return (
+    <>
+      {filteredBlogs.length ? (
        <BlogLists
          title="Lifestyle"
          description="Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos dolorum."
          blogs={filteredBlogs}
        />
+      ) : (
+        <h2 className={styles.center}>No data found</h2>
+      )}
+    </>
  );
 }
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,9 +8,9 @@
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-decoration: none;
-  --heading1: clamp(1rem, 1rem + 2.2vw, 2.6rem);
+  --heading1: clamp(0.8rem, 1.5rem + 2.2vw, 2.5rem);
  --heading2: clamp(1rem, 1rem + 2vw, 2rem);
-  --heading3: clamp(1rem, 0.7rem + 1.4vw, 1.7rem);
+  --heading3: clamp(1rem, 1rem + 1.4vw, 1.7rem);
  --heading4: clamp(1rem, 1rem + 1.2vw, 1.5rem);
  --heading5: clamp(1rem, 1rem + 1vw, 1.3rem);
  --heading6: clamp(0.9rem, 1rem + 0.8vw, 1.1rem);
@@ -36,12 +36,14 @@
  --bg-lightgrey: #f8f9fa;
  --btn-bg: #e2e8f0;
  --font-color-700: black;
+  --placeholder-color: #9f9f9f;
 }
 .dark {
  --bg-color: black;
  --input-bg: black;
  --card-bg: #131617;
  --font-color-300: #b7b7b7;
+  --placeholder-color: #b7b7b7;
  --font-color-900: #fff;
  --title-color: #fff;
  --font-color-700: #fff;
@@ -58,7 +60,6 @@ html {
  margin: 0;
  scroll-behavior: smooth;
  background: var(--bg-color);
-  min-height: 100vh;
  max-width: 1920px;
  margin: 0 auto;
  color: #718096;

--- a/app/layout.js
+++ b/app/layout.js
+"use client";
+import { useState, useEffect } from "react";
 import { ThemeProvider } from "@context/index";
+import Loading from "./loading";
 import "./globals.css";

 export default function RootLayout({ children, header }) {
+  const [themeClass, setThemeClass] = useState("loading");
+
+  useEffect(() => {
    // Check if localStorage is available (client-side)
-  const themeClass =
-    typeof window !== "undefined" ? localStorage.getItem("theme") : "light";
+    const storedThemeClass =
+      typeof window !== "undefined" ? localStorage.getItem("theme") : "";
+
+    // Simulate an asynchronous operation (e.g., fetching theme data)
+    setTimeout(() => {
+      // Set the theme class, or use a default value if not found
+      setThemeClass(storedThemeClass || "defaultTheme");
+    }, 1000); // Adjust the delay as needed
+  }, []); // Empty dependency array ensures the effect runs once, similar to componentDidMount

  return (
    <ThemeProvider>
      <html lang="en" className={themeClass}>
        <body>
+          {themeClass === "loading" ? (
+            <Loading />
+          ) : (
+            <div id="root">
              {header}
              {children}
+            </div>
+          )}
        </body>
      </html>
    </ThemeProvider>

--- a/app/loading.module.css
+++ b/app/loading.module.css
 .loading {
-  display: grid;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
--- a/components/base/button/styles.module.css
+++ b/components/base/button/styles.module.css
 .btn {
-  padding: 0.8rem 1.5rem;
+  padding: 0.5rem 1rem;
  outline: none;
  border: none;
-  font-size: 18px;
+  font-size: clamp(0.8rem, 0.5rem + 1vw, 1.2rem);
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
@@ -19,3 +19,9 @@
 .disabled {
  opacity: 0.9;
 }
+
+@media screen and (min-width: 768px) {
+  .btn {
+    padding: 0.8rem 1.5rem;
+  }
+}
--- a/components/base/card/index.js
+++ b/components/base/card/index.js
@@ -15,6 +15,7 @@ const Card = ({
 }) => {
  return (
    <div className={styles.card}>
+      <div className={styles["card-body"]}>
        <Link href={`singleblog/${id}`}>
          <Image
            className={styles.img}
@@ -25,9 +26,9 @@ const Card = ({
          />
          <p className={styles.title}>{title}</p>
        </Link>
-      <div className={styles.authorcontainer}>
+        <div className={styles["card-content"]}>
          <p className={styles.description}>{description}</p>
-        <div className={styles.cardbottom}>
+          <div className={styles["card-author"]}>
            <Image
              className={styles.img}
              src={author.image.url}
@@ -41,13 +42,14 @@ const Card = ({
                {publishedDate}
                <span className={styles.icon}>
                  <Icons name="clock" size="small" />
-                {readingTime}
+                  <span className="readtime">{readingTime}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
+    </div>
  );
 };
 Card.propTypes = {

--- a/components/base/card/styles.module.css
+++ b/components/base/card/styles.module.css
@@ -2,8 +2,13 @@
  background-color: var(--card-bg);
  border-radius: 20px;
  display: flex;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  flex-wrap: wrap;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
+
  word-wrap: break-word;
 }
 .card:hover {
@@ -18,53 +23,58 @@
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
 }
-.authorcontainer {
-  padding: 1.5rem;
-  padding-top: 0rem;
-  margin-top: -20px;
+.card-body {
+  height: 100%;
+  display: inline-block;
+  margin-top: auto;
+  align-self: normal;
+}
+
+.card-content {
+  padding-inline: 1.5rem;
+  padding-bottom: 2rem;
 }
-.authorcontainer .description {
+.card-content .description {
  color: var(--font-color-300);
-  line-height: 1.5em;
  font-weight: 600px;
  word-wrap: break-word;
 }
-.authorcontainer .cardbottom {
+.card-content .card-author {
  display: grid;
-  grid-template-columns: 0.5fr 2fr;
-  line-height: 0;
+  grid-template-columns: 60px auto;
+  grid-gap: 1em;
  align-items: center;
-  grid-gap: 16px;
-  color: var(--font-color-900);
 }
-.authorcontainer .cardbottom .img {
+
+.card-content .card-author .img {
  border-radius: 50%;
  height: auto;
  max-width: 100%;
 }
-.authorcontainer .cardbottom .authordescription .authorName {
+.card-content .card-author .authordescription .authorName {
  font-size: 18px;
  font-weight: 500;
  line-height: 0;
 }
-.authorcontainer .cardbottom .authordescription .author-desc {
+.card-content .card-author .authordescription .author-desc {
  display: flex;
  align-items: center;
-  gap: 1rem;
  color: var(--font-color-300);
-  line-height: 0.5em;
+
+  gap: 0.5rem;
+  font-size: 0.9rem;
 }
-.authorcontainer .cardbottom .authordescription .author-desc span {
+
+.card-content .card-author .authordescription .author-desc span {
  display: flex;
  align-items: center;
+  gap: 0.2em;
 }
 .title {
  color: var(--font-color-900);
  font-size: 22px;
-  line-height: 1.5em;
  font-weight: 600;
-  padding: 1.5rem;
-  padding-bottom: 0rem;
+  padding-inline: 1.5rem;
 }
 .title:hover {
  color: #5a67d8;
@@ -74,6 +84,10 @@
  .card {
    width: min(90%, 25rem);
  }
+  .card-content .card-author .authordescription .author-desc {
+    font-size: clamp(0.8rem, 0.5rem + 1vw, 1rem);
+    grid-gap: 1rem;
+  }
 }
 @media screen and (min-width: 1200px) {
  .card {

--- a/components/base/icons/styles.module.css
+++ b/components/base/icons/styles.module.css
 .small svg {
-  height: 20px;
-  width: 20px;
+  height: 16px;
+  width: 16px;
  color: var(--font-color-300);
 }
 .medium svg {

--- a/components/base/search/index.js
+++ b/components/base/search/index.js
@@ -11,7 +11,7 @@ const Search = ({ onSearch, onClose }) => {
      if (text !== "") {
        onSearch(text);
      }
-    }, 2000);
+    }, 1000);

    return () => {
      clearTimeout(handler);

--- a/components/base/search/styles.module.css
+++ b/components/base/search/styles.module.css
@@ -18,11 +18,11 @@
 .search .search-input::placeholder {
  color: #718096;
  font-weight: 600;
-  color: var(--font-color-300);
+  color: var(--placeholder-color);
 }
 .search .search-icon {
  position: absolute;
-  top: 14px;
+  top: 17px;
  padding-left: 17px;
  color: var(--font-color-300);
 }

--- a/components/top-level/blog-lists/index.js
+++ b/components/top-level/blog-lists/index.js
@@ -6,11 +6,12 @@ import Pagination from "@components/top-level/pagination";
 import styles from "./styles.module.css";

 const BlogLists = ({ title, description, blogs }) => {
+  console.log("xfkjhb", blogs);
  const length = blogs.length;
  const itemsPerPage = 6;
  const [currentPage, setCurrentPage] = useState(1);
  // Calculate the start and end indices for the current page
-  const startIndex = (currentPage - 1) * itemsPerPage;
+  const startIndex = blogs.length > 6 ? (currentPage - 1) * itemsPerPage : 0;
  const endIndex = startIndex + itemsPerPage;
  const slicedData = blogs.slice(startIndex, endIndex);


--- a/components/top-level/blog-lists/styles.module.css
+++ b/components/top-level/blog-lists/styles.module.css
@@ -3,9 +3,9 @@
  margin: 0 auto;
  margin-bottom: 2rem;
  scroll-behavior: smooth;
+  padding-inline: 1rem;
 }
 .blog-container .title {
-  font-size: 38px;
  line-height: 25px;
  font-weight: 600;
  padding-inline: 1.5rem;
@@ -15,11 +15,13 @@
  color: var(--font-color-300);
  padding-inline: 1.5rem;
  margin-bottom: 2em;
+  font-size: clamp(1rem, 0.9rem + 1vw, 1.2rem);
 }
 .blog-container .row {
  display: grid;
  justify-items: flex-start;
  grid-row-gap: 2rem;
+  grid-column-gap: 1.5rem;
 }
 .blog-container .row .col {
  display: flex;

--- a/components/top-level/pagination/styles.module.css
+++ b/components/top-level/pagination/styles.module.css
@@ -4,7 +4,6 @@
  align-items: center;
  width: 100%;
  font-weight: 500;
-  font-size: 15px;
 }
 .pagination-container > span {
  display: flex;

--- a/posts/blog1.md
+++ b/posts/blog1.md
@@ -2,14 +2,14 @@
 id: 1
 image: { url: "/images/lifestyle1.jpg", width: 470, height: 300 }
 title: "How to get a perfect start for beginning runners"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  {
    name: "Isabella ava",
    image: { url: "/images/a1.jpg", width: 80, height: 80 },
  }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-05-14."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog2.md
+++ b/posts/blog2.md
@@ -2,14 +2,14 @@
 id: 2
 image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
 title: "Great tools to improve your personal blogging experience"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  {
    name: "Charlotte mia",
    image: { url: "/images/a2.jpg", width: 80, height: 80 },
  }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-03-24."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog3.md
+++ b/posts/blog3.md
@@ -2,14 +2,14 @@
 id: 3
 image: { url: "/images/lifestyle3.jpg", width: 470, height: 300 }
 title: "Blog Guide: How to Start a Personal Blog on WordPress"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  {
    name: "Isabella ava",
    image: { url: "/images/a3.jpg", width: 80, height: 80 },
  }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-07-18."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog4.md
+++ b/posts/blog4.md
@@ -2,14 +2,14 @@
 id: 4
 image: { url: "/images/lifestyle4.jpg", width: 470, height: 300 }
 title: "The technical setup when starting a personal blog"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  {
    name: "Charlotte mia",
    image: { url: "/images/a2.jpg", width: 80, height: 80 },
  }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-07-12."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog5.md
+++ b/posts/blog5.md
@@ -2,11 +2,11 @@
 id: 5
 image: { url: "/images/lifestyle5.jpg", width: 470, height: 300 }
 title: "3 New Outfit Formulas To Add To Your Capsule Wardrobe"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  { name: "Elizabeth", image: { url: "/images/a1.jpg", width: 80, height: 80 } }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-01-09."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog6.md
+++ b/posts/blog6.md
@@ -2,14 +2,14 @@
 id: 6
 image: { url: "/images/lifestyle6.jpg", width: 470, height: 300 }
 title: "Blog Guide: How to Start a Personal Blog on WordPress"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  {
    name: "Johnson smith",
    image: { url: "/images/a3.jpg", width: 80, height: 80 },
  }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-09-20."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog7.md
+++ b/posts/blog7.md
@@ -2,11 +2,11 @@
 id: 7
 image: { url: "/images/lifestyle7.jpg", width: 470, height: 300 }
 title: "How to get a perfect start for beginning runners"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  { name: "Eva maria", image: { url: "/images/a1.jpg", width: 80, height: 80 } }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-08-28."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog8.md
+++ b/posts/blog8.md
@@ -2,11 +2,11 @@
 id: 8
 image: { url: "/images/lifestyle8.jpg", width: 470, height: 300 }
 title: "Great tools to improve your personal blogging experience"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  { name: "Julie mia", image: { url: "/images/a2.jpg", width: 80, height: 80 } }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-02-16."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }

--- a/posts/blog9.md
+++ b/posts/blog9.md
@@ -2,14 +2,14 @@
 id: 9
 image: { url: "/images/lifestyle2.jpg", width: 470, height: 300 }
 title: "How to get a perfect start for beginning runners"
-description: "Lorem ipsum dolor sir amet consectetur ipsum adipisicing elit. Quis vitae sit."
+description: "Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum"
 author:
  {
    name: "Liza ethan",
    image: { url: "/images/a1.jpg", width: 80, height: 80 },
  }
-publishedDate: "2020-07-16"
-readingTime: "1 min read"
+publishedDate: "2023-10-11."
+readingTime: "1 min"
 category: "Fashion"
 categories: ["Fashion", "Beauty"]
 blogImage: { url: "/images/blogsingle.jpg", width: 1920, height: 500 }