initial commit

.eslintrc.json

+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.storybook/main.js

+/** @type { import('@storybook/nextjs').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.js

+/** @type { import('@storybook/react').Preview } */
+import "../app/globals.css";
+import { useDarkMode } from "storybook-dark-mode";
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    darkMode: {
+      classTarget: "html",
+      darkClass: "dark",
+      lightClass: "light",
+      stylePreview: true,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => {
+    return <Story themeMode={useDarkMode()} />;
+  },
+];
+
+export default preview;

README.md

+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/_app.js

+import "@styles/global.css";
+import "font-awesome/css/font-awesome.css";
+//import Layout from '../components/layout'
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+    </>
+  );
+}

app/components/base/card/card.module.css

+.row {
+  display: grid;
+
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+
+  grid-gap: 2rem;
+}
+
+.img {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+}
+
+.card {
+  background-color: var(--card-bg);
+  border-radius: 20px;
+}
+.cardbottom img {
+  border-radius: 50%;
+  height: 60px;
+  width: 60px;
+}
+.card-content {
+  padding: 1.5rem;
+  padding-bottom: 1rem;
+}
+
+.cardbottom {
+  display: grid;
+  grid-template-columns: 0.5fr 2fr;
+  line-height: 0;
+  align-items: start;
+  grid-gap: 16px;
+  color: var(--font-color-900);
+}
+
+.description {
+  color: var(--font-color-300);
+  line-height: 1.5em;
+  display: flex;
+  gap: 1em;
+}
+
+.title {
+  color: var(--font-color-900);
+  font-size: 22px;
+  text-decoration: none;
+  line-height: 1.5em;
+  font-weight: 600;
+}
+
+.title:hover {
+  color: #5a67d8;
+}

app/components/base/card/page.js

+import styles from "./card.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import Icons from "../icons/page";
+import PropTypes from "prop-types";
+
+const Card = ({
+  mainTitle,
+  description,
+  imageUrl,
+  postedOn,
+  author,
+  readingTime,
+}) => {
+  return (
+    <div className={styles.row}>
+      <div className={styles.card}>
+        <Link prefetch={false} href="#">
+          <Image className={styles.img} src={imageUrl} alt="cardimage" />
+        </Link>
+        <div className={styles["card-content"]}>
+          <Link prefetch={false} href="#" className={styles.title}>
+            {mainTitle}
+          </Link>
+          <p className={styles.description}>{description}</p>
+          <div className={styles.cardbottom}>
+            <Image
+              className={styles.img}
+              src={author.authImg}
+              quality={100}
+              alt="authorImg"
+            />
+            <div>
+              <h3>{author.name}</h3>
+              <div className={styles.description}>
+                {postedOn}
+                <span className={styles.icon}>
+                  <Icons name="clock" />
+                  {readingTime}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+Card.propTypes = {
+  mainTitle: PropTypes.string,
+  description: PropTypes.string,
+  imageUrl: PropTypes.object,
+  postedOn: PropTypes.string,
+  author: PropTypes.shape({
+    name: PropTypes.string,
+    authImg: PropTypes.string, // Use PropTypes.string for authImg
+  }),
+  postedOn: PropTypes.string,
+  authorname: PropTypes.string,
+  readingTime: PropTypes.string,
+};
+
+export default Card;

app/components/base/header/header.module.css

+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.7em 10%;
+}
+.container {
+  background-color: var(--card-bg);
+  width: 100%;
+}
+.header {
+  position: sticky;
+  top: 57px;
+  height: 179px;
+}
+.navbar-brand {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  text-decoration: none;
+  color: var(--title-color);
+}

app/components/base/header/page.js

+import styles from "./header.module.css";
+import Search from "../search/page";
+import Icon from "../icons/page";
+import { useState } from "react";
+
+function Header({ onThemeChange }) {
+  const [theme, setTheme] = useState("light");
+
+  const handleTheme = () => {
+    theme == "light" ? setTheme("dark") : setTheme("light");
+    onThemeChange(theme);
+  };
+  return (
+    <header className={styles.header}>
+      <div className={styles.container}>
+        <nav className={styles.navbar}>
+          <a className={styles["navbar-brand"]} href="/">
+            <i className="fa fa-newspaper-o"></i>
+            <h2>NewsBlog</h2>
+          </a>
+
+          {/* <div className={styles["search-input"]}>
+            <span className={`${styles["search-icon"]} fa fa-search`}></span>
+            <input
+              className={styles.search}
+              type="text"
+              placeholder="Discover news, articles and more"
+            />
+          </div> */}
+          <Search />
+          <span onClick={handleTheme} className={styles.themelight}>
+            <Icon name={theme == "dark" ? "moon" : "sun"} />
+          </span>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

app/components/base/icons/icons.module.css

+.search svg,
+.clock svg {
+  height: 20px;
+  width: 20px;
+  vertical-align: sub;
+}
+
+.moon svg,
+.sun svg {
+  height: 35px;
+  width: 35px;
+  vertical-align: sub;
+}

app/components/base/icons/page.js

+import styles from "./icons.module.css";
+import PropTypes from "prop-types";
+const Icons = ({ name }) => {
+  const icons = {
+    search: (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokidth="0"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z" />
+      </svg>
+    ),
+
+    clock: (
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+    ),
+
+    moon: (
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+    ),
+
+    sun: (
+      <svg
+        stroke="currentColor"
+        fill="currentColor"
+        strokeWidth="0"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" />
+      </svg>
+    ),
+
+    close: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    ),
+  };
+
+  return <span className={`${styles[name]}`}>{icons[name]}</span>;
+};
+
+Icons.propTypes = {
+  name: PropTypes.oneOf(["sun", "moon", "close", "search", "clock"]),
+};
+export default Icons;

app/components/base/search/page.js

+import styles from "./search.module.css";
+import Icon from "../icons/page";
+import { useState, useEffect } from "react";
+
+const Search = ({ onSearch, onClose }) => {
+  const [debouncetitle, setDebounceTitle] = useState("");
+  useEffect(() => {
+    //after 2 second it will execute
+    const handler = setTimeout(() => {
+      if (debouncetitle !== "") {
+        onSearch(debouncetitle);
+      }
+    }, 2000);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [debouncetitle]);
+  const handleSearch = (value) => {
+    setDebounceTitle(value);
+  };
+  const handleCustomClear = (e) => {
+    e.preventDefault();
+    onClose("");
+    setDebounceTitle("");
+  };
+
+  return (
+    <div className={styles["search-input"]}>
+      <span className={`${styles["search-icon"]}`}>
+        <Icon name="search" />
+      </span>
+      <input
+        className={styles.search}
+        type="text"
+        autoFocus={true}
+        value={debouncetitle}
+        onChange={(e) => handleSearch(e.target.value)}
+        placeholder="Discover news, articles and more"
+      />
+      {debouncetitle && (
+        <span className={`${styles["close-icon"]}`} onClick={handleCustomClear}>
+          <Icon name="close" />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Search;

app/components/base/search/search.module.css

+.search {
+  height: 48px;
+  width: 30vw;
+  background: #f4f4f4;
+  border-radius: 10px;
+  border: none;
+  outline: 3px solid var(--card-bg);
+
+  padding-left: 3rem;
+  font-size: 16px;
+}
+.search-input {
+  position: relative;
+}
+.search-icon {
+  position: absolute;
+  top: 14px;
+
+  padding-left: 17px;
+  color: #718096;
+}
+
+.close-icon {
+  cursor: pointer;
+  position: relative;
+  color: #2b4c82;
+
+  right: 33px;
+}

app/components/base/typography/page.js

+import styles from "./typography.module.css";
+
+const Typography = () => {
+  return (
+    <div>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+      <p className={styles.paragraph}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue
+        placerat lobortis. Pellentesque facilisis nisl orci, non accumsan massa
+        auctor quis. Proin blandit sollicitudin turpis id laoreet. Vivamus
+        tincidunt maximus sem sit amet pulvinar. Praesent faucibus et tellus
+        quis hendrerit. Vestibulum a dui et sem egestas luctus.
+      </p>
+    </div>
+  );
+};
+
+export default Typography;

app/components/base/typography/typography.module.css

+.paragraph {
+  width: 500px;
+}

app/components/top-level/blog-lists/blog-lists.module.css

+.row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-gap: 2rem;
+}
+.title {
+  font-size: 38px;
+  line-height: 25px;
+  font-weight: 600;
+  color: var(--title-color);
+}
+.description {
+  color: var(--font-color-300);
+  margin-bottom: 3em;
+}

app/components/top-level/blog-lists/page.js

+import PropTypes from "prop-types";
+import Card from "../../base/card/page";
+import styles from "./blog-lists.module.css";
+const BlogLists = ({ listsData }) => {
+  return (
+    <div>
+      <h1 className={styles.title}>Lifestyle</h1>
+      <p className={styles.description}>
+        Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos
+        dolorum
+      </p>
+      <div className={styles.row}>
+        {listsData.map((blogData, i) => (
+          <Card key={i} {...blogData} />
+        ))}
+      </div>
+    </div>
+  );
+};
+BlogLists.propTypes = {
+  listsData: PropTypes.array,
+};
+
+export default BlogLists;

app/components/top-level/pagination/page.js

+import React, { useState, useEffect } from "react";
+import styles from "./pagination.module.css";
+
+function Pagination({ totalPages, onCurrentPage }) {
+  //Set number of pages
+
+  const numberOfPages = [];
+  for (let i = 1; i <= totalPages; i++) {
+    numberOfPages.push(i);
+  }
+
+  // Current active button number
+  const [currentButton, setCurrentButton] = useState(1);
+
+  // Array of buttons what we see on the page
+  const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
+  useEffect(() => {
+    let tempNumberOfPages = [...arrOfCurrButtons];
+
+    let dotsInitial = "...";
+    let dotsLeft = "...";
+    let dotsRight = "...";
+
+    if (numberOfPages.length < 6) {
+      tempNumberOfPages = numberOfPages;
+    } else if (currentButton >= 1 && currentButton <= 3) {
+      tempNumberOfPages = [1, 2, 3, 4, dotsInitial, numberOfPages.length];
+    } else if (currentButton === 4) {
+      const sliced = numberOfPages.slice(0, 5);
+      tempNumberOfPages = [...sliced, dotsInitial, numberOfPages.length];
+    } else if (currentButton > 4 && currentButton < numberOfPages.length - 2) {
+      // from 5 to 8 -> (10 - 2)
+      const sliced1 = numberOfPages.slice(currentButton - 2, currentButton); // sliced1 (5-2, 5) -> [4,5]
+      const sliced2 = numberOfPages.slice(currentButton, currentButton + 1); // sliced1 (5, 5+1) -> [6]
+      tempNumberOfPages = [
+        1,
+        dotsLeft,
+        ...sliced1,
+        ...sliced2,
+        dotsRight,
+        numberOfPages.length,
+      ];
+    } else if (currentButton > numberOfPages.length - 3) {
+      // > 7
+      const sliced = numberOfPages.slice(numberOfPages.length - 4); // slice(10-4)
+      tempNumberOfPages = [1, dotsLeft, ...sliced];
+    }
+
+    setArrOfCurrButtons(tempNumberOfPages);
+  }, [totalPages, currentButton]);
+  const handleCurrentPage = (item) => {
+    setCurrentButton(item);
+    onCurrentPage(item);
+  };
+
+  return (
+    <div className={styles["pagination-container"]}>
+      {arrOfCurrButtons.map((item, index) => {
+        return (
+          <a
+            key={index}
+            className={`${
+              item === "..."
+                ? styles["no-cursor"]
+                : currentButton === item
+                ? styles["active"]
+                : ""
+            }`}
+            onClick={() => (item === "..." ? "" : handleCurrentPage(item))}
+          >
+            {item}
+          </a>
+        );
+      })}
+
+      <a
+        className={`${
+          currentButton === "..."
+            ? styles["no-cursor"]
+            : currentButton === numberOfPages.length
+            ? styles["disabled"]
+            : ""
+        }`}
+        onClick={() =>
+          currentButton === "..." ? "" : handleCurrentPage(currentButton + 1)
+        }
+      >
+        <span className={styles.next}>Next »</span>
+      </a>
+    </div>
+  );
+}
+
+export default Pagination;

app/components/top-level/pagination/pagination.module.css

+.pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background: rgba(216, 73, 73, 0.2); */
+  width: 100%;
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.pagination-container a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 0.4em;
+  padding-inline: 14px;
+  border-radius: 10px;
+  height: 40px;
+  background-color: #fff;
+  text-decoration: none;
+  transition: background-color 0.2s;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.pagination-container a.active {
+  background-color: var(--primary-color);
+  color: white;
+  border: 1px solid #7cbddb;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.pagination-container a.disabled {
+  opacity: 0.7;
+}
+.pagination-container a:hover:not(.active) {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.next {
+  font-size: 20px;
+}
+.pagination-container a:hover:is(.no-cursor) {
+  cursor: not-allowed;
+  user-select: none;
+}

app/components/top-level/single-blog/page.js

+import Image from "next/image";
+import styles from "./single-blog.module.css";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+function SingleBlog({
+  subTitle,
+  postedOn,
+  authorName,
+  publishedIn,
+  readTime,
+  blogImg,
+  tags,
+  markdown,
+}) {
+  return (
+    <>
+      <div className={styles["head-container"]}>
+        <div className={styles.headtitle}>
+          <h1 className={styles.title}>{subTitle}</h1>
+        </div>
+        <div className={styles["blog-list"]}>
+          <ul>
+            <li>
+              Posted on <span className={styles["list-bold"]}>{postedOn}</span>
+            </li>
+            <li>
+              By <span className={styles["list-bold"]}>{authorName}</span>
+            </li>
+            <li>
+              Published in
+              <span className={styles["list-bold"]}>{publishedIn}</span>
+            </li>
+            <li>
+              <span className={styles["list-bold"]}>{readTime}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className={styles["blog-container"]}>
+        <div className={styles.blogimage}>
+          <Image
+            className={styles.img}
+            src={blogImg}
+            quality={100}
+            alt="image"
+          />
+        </div>
+        <div className={styles["blog-content"]}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
+          <div className={styles.tag}>
+            <h3>Tag:</h3>
+            {tags.map((e, i) => (
+              <p key={i}>{e}</p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SingleBlog;

app/components/top-level/single-blog/single-blog.module.css

+.blog-content {
+  padding: 1rem;
+  border-radius: 15px;
+  margin-top: 2rem;
+  background: var(--card-bg);
+}
+.blogimage {
+  overflow: hidden;
+  border-radius: 15px;
+  width: 100%;
+  margin-top: 2.5rem;
+}
+.img {
+  max-width: 100%;
+  max-height: 30vmax;
+
+  object-fit: cover;
+  display: block;
+}
+.blog-list {
+  padding-inline: 0.5rem;
+}
+.blog-list ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  line-height: 1em;
+  gap: 1em;
+}
+.blog-container {
+  z-index: -1;
+  width: min(90%, 1440px);
+  margin: 0 auto;
+}
+.tag {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+.tag p {
+  background: #e2e8f0;
+  padding: 0.3em 1em;
+  border-radius: 40px;
+  color: #718096;
+  font-weight: bold;
+}
+
+.tag p:hover {
+  background: #5a67d8;
+  color: white;
+}
+blockquote {
+  padding: 0.66001rem 1rem 1rem;
+  border-left: 4px solid #5a67d8;
+  margin: 0;
+}
+blockquote p::before {
+  content: "\2014\00A0";
+}
+.head-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.headtitle {
+  padding-inline: 3rem;
+}
+.title {
+  font-size: clamp(1rem, 1.5rem + 2vw, 4rem);
+  margin: 0;
+  font-weight: 600;
+}
+@media (min-width: 802px) {
+  .blog-content {
+    padding: 2rem;
+  }
+  .tag {
+    gap: 1rem;
+  }
+}

app/context/themecontext.js

+import { ThemeProvider } from "next-themes";
+import { useDarkMode } from "storybook-dark-mode";
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider value={useDarkMode() ? darkTheme : defaultTheme}>
+      {children}
+    </ThemeProvider>
+  );
+}
+export const decorators = [
+  (renderStory) => <Providers>{renderStory()}</Providers>,
+];

app/globals.css

+.light {
+  --primary-color: #5a67d8;
+  --secondary-color: #463373;
+  --font-color-900: #718096;
+  --font-color-300: #718096;
+  --title-color: #2d3748;
+  --bg-color: #f4f4f4;
+  --card-bg: #fff;
+  --heading-color: #2d3748;
+  --border-radius: 6px;
+  --border-radius-full: 15px;
+  --border-color: transparent;
+  --nav-color: #292922;
+  --dropdown-color: #fff;
+  --iframe-filter: grayscale(0%);
+  --bg-grey: #f4f4f4;
+  --bg-lightgrey: #f8f9fa;
+  --btn-bg: #e2e8f0;
+}
+.dark {
+  --bg-color: black;
+  --card-bg: #131617;
+  --font-color-300: #b7b7b7;
+  --font-color-900: #fff;
+  --title-color: #fff;
+}
+
+body,
+html {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  background-color: var(--bg-color);
+  min-height: 100dvh;
+  max-width: 1920px;
+  margin: 0 auto;
+  color: #718096;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: "Libre Baskerville", serif;
+}
+
+.icon-container {
+  display: flex;
+  gap: 1em;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    background-color: var(--bg-color);
+  }
+}

app/layout.js

+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+import { Providers } from "../app/context/themecontext";
+
+export const metadata = {
+  title: "Home",
+  description: "Next Blog",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

app/page.js

+import React from "react";
+
+const Home = () => {
+  return (
+    <div>
+      <h1>Home</h1>
+    </div>
+  );
+};
+
+export default Home;

app/page.module.css

+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(25%, auto));
+  max-width: 100%;
+  width: var(--max-width);
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition: background 200ms, border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+}
+
+.logo {
+  position: relative;
+}
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(
+      to bottom,
+      rgba(var(--background-start-rgb), 1),
+      rgba(var(--callout-rgb), 0.5)
+    );
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgb(var(--background-end-rgb)) 40%
+    );
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vercelLogo {
+    filter: invert(1);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.js

+/** @type {import('next').NextConfig} */
+
+module.exports = {
+  experimental: {
+    prefetch: false,
+  },
+};

package.json

+{
+  "name": "next-blog",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "gray-matter": "^4.0.3",
+    "next": "14.0.2",
+    "next-themes": "^0.2.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^4.12.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "storybook-dark-mode": "^3.0.1"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/nextjs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "storybook": "^7.5.3"
+  }
+}

stories/blog-lists.stories.js

+import BlogLists from "../app/components/top-level/blog-lists/page";
+export default {
+  title: "Top-Level/Blog-Lists",
+  component: BlogLists,
+  argTypes: {},
+};
+export const blogLists = (args) => <BlogLists {...args} />;
+
+blogLists.args = {
+  listsData: [
+    {
+      mainTitle: "How to get perfect start for beginning runners",
+      description:
+        "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+      imageUrl: require("../public/images/lifestyle1.jpg"),
+      postedOn: "July 13, 2020.",
+      author: {
+        name: "Isabella ava",
+        authImg: require("../public/images/a1.jpg"),
+      },
+      readingTime: "1min",
+    },
+    {
+      mainTitle: "Great tools to improve your personal blogging experience",
+      description:
+        "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+      imageUrl: require("../public/images/lifestyle2.jpg"),
+      postedOn: "July 13, 2020.",
+      author: {
+        name: "Charlotte mia",
+        authImg: require("../public/images/a2.jpg"),
+      },
+      readingTime: "1min",
+    },
+    {
+      mainTitle: "Blog Guide: How to Start a Personal blog on WordPress",
+      description:
+        "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+      imageUrl: require("../public/images/lifestyle3.jpg"),
+      postedOn: "July 13, 2020.",
+      author: {
+        name: "Elizabeth",
+        authImg: require("../public/images/a3.jpg"),
+      },
+      readingTime: "1min",
+    },
+    {
+      mainTitle: "The technical setup when starting a personal blog",
+      description:
+        "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+      imageUrl: require("../public/images/lifestyle4.jpg"),
+      postedOn: "July 13, 2020.",
+      author: {
+        name: "Charlotte mia",
+        authImg: require("../public/images/a1.jpg"),
+      },
+      readingTime: "1min",
+    },
+    {
+      mainTitle: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+      description:
+        "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+      imageUrl: require("../public/images/lifestyle5.jpg"),
+      postedOn: "July 13, 2020.",
+      author: {
+        name: "Elizabeth",
+        authImg: require("../public/images/a3.jpg"),
+      },
+      readingTime: "1min",
+    },
+    {
+      mainTitle: "3 New outfit Formulas To Add to your Capsule Wardrobe",
+      description:
+        "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+      imageUrl: require("../public/images/lifestyle6.jpg"),
+      postedOn: "July 13, 2020.",
+      author: {
+        name: "Isabella ava",
+        authImg: require("../public/images/a1.jpg"),
+      },
+      readingTime: "1min",
+    },
+  ],
+};

stories/card.stories.js

+import React from "react";
+import Card from "../app/components/base/card/page";
+
+export default {
+  title: "Base/Card",
+  component: Card,
+  argTypes: {},
+};
+export const card = (args) => <Card {...args} />;
+card.args = {
+  mainTitle: "How to get a perfect start for beginning runners",
+  description:
+    "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
+  imageUrl: require("../public/images/lifestyle1.jpg"), // Use require to load images
+  postedOn: "July 13, 2020.",
+  author: {
+    name: "Isabella Ava",
+    authImg: require("../public/images/a1.jpg"), // Use require to load images
+  },
+  readingTime: "1 min",
+};

stories/header.stories.js

+import Header from "../app/components/base/header/page";
+export default {
+  title: "Base/Header",
+  component: Header,
+  argTypes: {
+    onThemeChange: { actions: "onThemeChange" },
+  },
+};
+
+export const header = {};

stories/icons.stories.js

+import Icons from "../app/components/base/icons/page";
+
+export default {
+  title: "Base/Icons",
+  component: Icons,
+  argTypes: {},
+};
+const iconList = ["sun", "moon", "close", "search", "clock"];
+export const icons = () => {
+  return (
+    <div className="icon-container">
+      {iconList.map((e, i) => (
+        <div key={i}>{<Icons name={e} />}</div>
+      ))}
+    </div>
+  );
+};

stories/pagination.stories.js

+import Pagination from "../app/components/top-level/pagination/page";
+export default {
+  title: "Top-Level/Pagination",
+  component: Pagination,
+  argTypes: {
+    onCurrentPage: { actions: "onCurrentPage" },
+  },
+};
+
+export const pagination = {
+  args: {
+    totalPages: 10,
+  },
+};

stories/search.stories.js

+import Search from "../app/components/base/search/page";
+export default {
+  title: "Base/Search",
+  component: Search,
+  argTypes: {
+    onSearch: { actions: "onSearch" },
+    onClose: { actions: "onClose" },
+  },
+};
+export const search = {};

stories/single-blog.stories.js

+import SingleBlog from "../app/components/top-level/single-blog/page";
+export default {
+  title: "Top-Level/Single-Blog",
+  component: SingleBlog,
+  argTypes: {},
+};
+export const singleBlog = (args) => <SingleBlog {...args} />;
+//styling for markdown file//
+//#-h1 ##-h2 ###-h3 ####-h4 #####-h5 ###### h6
+//[data](link)-data is wrapping in square bracket with link
+//**bold** or __bold__
+// \n\n  is new line
+// --- three dash for horizontal line
+// *italic* or _italic_
+//***bold and italic ***
+//ordered list 1.space items
+//unordered list _space items
+// >space blockquote
+// >> blockquote inside another blockquote
+//![alt name](img path)
+//[![alt](imgpath)](url)--image with url
+singleBlog.args = {
+  subTitle: "Create an Art that shows the beauty in everyone ideas of flaws.",
+  postedOn: "July 11,2020",
+  authorName: "Charlotte mia",
+  publishedIn: "Fashion",
+  readTime: "1 min read",
+  tags: ["Fashion", "Beauty"],
+  blogImg: require("../public/images/blogsingle.jpg"),
+  markdown: `
+## How to create an Art that shows the beauty in everyone ideas of flaws.
+
+Many artists have made their name painting the natural world and there is a certain beauty to a rainy day. What better way to capture that beauty than to create a painting? Look out of the window and paint the view as the rain pours, or be a little more adventurous and go outside to your favorite place and paint it in the rain you can even let the rain land on your paper as you try to paint and see what the effect.
+
+Create a nature picture in your home with a beautiful wall mural. Section off an area of a wall you wish to decorate, cover with plain wallpaper lining and create a border, either with paint or leaves or twigs.
+> ## For dull and lifeless skin, mix apple juice with honey. Apply a thin layer to your face, and leave it for 5 minutes.
+>
+> Kelvin edison
+
+
+Then go for a nature walk with a basket and collect anything interesting you see along the way to take home. Then create your own indoor mural which you can also change along with the seasons. Add some glitter spray for extra sparkle!
+
+## Fusce faucibus ante vitae justo efficitur
+
+Simply fill the tray or box with sand and place in the rocks and crystals then take a deep breath and create images and patterns in the sand or create whatever comes to mind or out of your hands.
+
+   1. Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
+   2. Donec ipsum faucibus arcu elementum, luctus justo.
+   3. Nam libero tempore, cum soluta nobis est eligendi optio.
+   4. Sed ut perspiciatis unde omnis natus
+
+## Quisque sagittis lacus eu lorem sodales
+
+Colouring in is no longer in just the realm of children, grown-ups everywhere are embracing this peaceful art practice. Take this to another level and create your own designs to color in.
+
+You can do this freehand, or you can create perfect shapes and circles to create your mandala. Maybe even try searching for images online for inspiration.`,
+};

stories/typography.stories.js

+import Typography from "../app/components/base/typography/page";
+export default {
+  title: "Base/Typography",
+  component: Typography,
+  argTypes: {},
+};
+
+export const typography = {};