Skip to content

N
Next-Blog
Commit f5ecd6b1 by Madhankumar
Options

initial commit

parents
Showing with 1039 additions and 0 deletions
.gitignore 0 → 100644
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
.storybook/main.js 0 → 100644
/** @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",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
},
};
export default config;
.storybook/preview.js 0 → 100644
/** @type { import('@storybook/react').Preview } */
import "../styles/global.css";
const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
backgrounds: {
disable: true,
values: [
{ name: "light", value: "#F1F1F1" },
{ name: "dark", value: "#33404A" },
],
},
},
};
export default preview;
README.md 0 → 100644
This is a starter template for [Learn Next.js](https://nextjs.org/learn).
components/base/card/card.module.css 0 → 100644
.row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 2rem;
}
.img {
max-width: 100%;
height: 220px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.card {
background-color: var(--bg-color);
border-radius: 20px;
}
.cardbottom img {
border-radius: 50%;
height: 60px;
width: 60px;
}
.card-content {
padding: 1.5rem;
}
.cardbottom {
display: grid;
grid-template-columns: 0.5fr 2fr;
line-height: 0;
align-items: center;
grid-gap: 16px;
}
.description {
color: var(--font-color);
line-height: 1.5em;
}
.title {
color: var(--heading-color);
font-size: 22px;
text-decoration: none;
line-height: 1.5em;
font-weight: 600;
}
.title:hover {
color: #5a67d8;
}
components/base/card/index.js 0 → 100644
import styles from "./card.module.css";
import Image from "next/image";
import Link from "next/link";
import Icons from "../icons";
import PropTypes from "prop-types";
const Card = ({
mainTitle,
description,
imageUrl,
postedOn,
author,
readingTime,
}) => {
return (
<div className={styles.row}>
<div className={styles.card}>
<Link href="#">
<Image className={styles.img} src={imageUrl} alt="image1" />
</Link>
<div className={styles["card-content"]}>
<Link 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="image2"
/>
<div>
<h3>{author.name}</h3>
<p>
{postedOn} <Icons name="clock" /> {readingTime}
</p>
</div>
</div>
</div>
</div>
</div>
);
};
Card.propTypes = {
mainTitle: PropTypes.string,
description: PropTypes.string,
imageUrl: PropTypes.object, // Use PropTypes.string for imageUrl
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;
components/base/header/header.module.css 0 → 100644
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7em 10%;
}
.container {
background-color: var(--bg-color);
width: 100%;
}
.header {
position: sticky;
top: 57px;
height: 179px;
}
.navbar-brand {
display: grid;
grid-template-columns: auto 1fr;
text-decoration: none;
}
components/base/header/index.js 0 → 100644
import styles from "./header.module.css";
import Search from "../../base/search";
import Icon from "../icons";
import { useState } from "react";
function Header() {
const [theme, setTheme] = useState("light");
const handleTheme = () => {
theme == "light" ? setTheme("dark") : setTheme("light");
};
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 />
<div className={styles.themelight} onClick={handleTheme}>
<Icon name={theme == "dark" ? "moon" : "sun"} />
</div>
</nav>
</div>
</header>
);
}
export default Header;
components/base/icons/icons.module.css 0 → 100644
.icon svg {
height: 20px;
width: 20px;
}
components/base/icons/index.js 0 → 100644
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="2"
fill="none"
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.icon}>{icons[name]}</span>;
};
Icons.propTypes = {
name: PropTypes.oneOf(["sun", "moon", "close", "search", "clock"]),
};
export default Icons;
components/base/search/index.js 0 → 100644
import styles from "./search.module.css";
import Icon from "../icons";
import { useState } from "react";
const Search = ({ onSearch, onClose }) => {
const [search, setSearch] = useState();
const handleSearch = (e) => {
setSearch(e);
onSearch(e);
};
return (
<div className={styles["search-input"]}>
<span className={`${styles["search-icon"]}`}>
<Icon name="search" />
</span>
<input
className={styles.search}
type="search"
data-clear-btn="true"
autoFocus={true}
value={search}
onChange={(e) => handleSearch(e.target.value)}
placeholder="Discover news, articles and more"
/>
{/* <span className={`${styles["close-icon"]}`}>
<Icon name="close" />
</span> */}
</div>
);
};
export default Search;
components/base/search/search.module.css 0 → 100644
.search {
height: 48px;
width: 30vw;
background: #f4f4f4;
border-radius: 10px;
outline: none;
border: 1px solid var(--bg-color);
padding-left: 3rem;
font-size: 16px;
}
.search-icon {
position: absolute;
top: 35px;
padding-left: 17px;
color: #718096;
}
components/base/typography/index.js 0 → 100644
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;
components/layout/index.js 0 → 100644
import styles from "./layout.module.css";
function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
export default Layout;
components/layout/layout.module.css 0 → 100644
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
components/top-level/blog-lists/blog-lists.module.css 0 → 100644
.row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 2rem;
}
components/top-level/blog-lists/index.js 0 → 100644
import PropTypes from "prop-types";
import Card from "../../base/card";
import styles from "./blog-lists.module.css";
const BlogLists = ({ listsData }) => {
return (
<div>
<h1>Lifestyle</h1>
<p>
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;
components/top-level/pagination/index.js 0 → 100644
import React, { useState, useEffect } from "react";
import styles from "./pagination.module.css";
function Pagination({ totalPages }) {
//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,
]; // [1, '...', 4, 5, 6, '...', 10]
} else if (currentButton > numberOfPages.length - 3) {
// > 7
const sliced = numberOfPages.slice(numberOfPages.length - 4); // slice(10-4)
tempNumberOfPages = [1, dotsLeft, ...sliced];
} else if (currentButton === dotsInitial) {
// [1, 2, 3, 4, "...", 10].length = 6 - 3 = 3
// arrOfCurrButtons[3] = 4 + 1 = 5
// or
// [1, 2, 3, 4, 5, "...", 10].length = 7 - 3 = 4
// [1, 2, 3, 4, 5, "...", 10][4] = 5 + 1 = 6
setCurrentButton(arrOfCurrButtons[arrOfCurrButtons.length - 3] + 1);
} else if (currentButton === dotsRight) {
setCurrentButton(arrOfCurrButtons[3] + 2);
} else if (currentButton === dotsLeft) {
setCurrentButton(arrOfCurrButtons[3] - 2);
}
setArrOfCurrButtons(tempNumberOfPages);
}, [currentButton, totalPages]);
return (
<div className={styles["pagination-container"]}>
{arrOfCurrButtons.map((item, index) => {
return (
<a
key={index}
className={`${currentButton === item ? styles["active"] : ""}`}
onClick={() => setCurrentButton(item)}
>
{item}
</a>
);
})}
<a
className={`${
currentButton === numberOfPages.length ? styles["disabled"] : ""
}`}
onClick={() =>
setCurrentButton((prev) =>
prev >= numberOfPages.length ? prev : prev + 1
)
}
>
<span className={styles.next}>Next »</span>
</a>
</div>
);
}
export default Pagination;
components/top-level/pagination/pagination.module.css 0 → 100644
.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.2;
}
.pagination-container a:hover:not(.active) {
background-color: var(--primary-color);
color: white;
}
.next {
font-size: 20px;
}
components/top-level/single-blog/index.js 0 → 100644
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 (
<>
<h1 className={styles.title}>{subTitle}</h1>
<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 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;
components/top-level/single-blog/single-blog.module.css 0 → 100644
.blog-content {
padding: 2rem;
border-radius: 15px;
margin-top: 2rem;
background: var(--bg-color);
}
.img {
max-width: 100%;
border-radius: 15px;
height: auto;
object-fit: contain;
}
.blog-list ul {
display: flex;
flex-wrap: wrap;
list-style: none;
line-height: 1em;
gap: 1em;
padding: 0 1.8em;
margin-top: 20px;
}
.blog-container {
z-index: -1;
padding: 0 27px;
}
.tag {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.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";
}
@media screen and (min-width: 802px) {
.blog-list ul {
width: 72%;
margin: 0 auto;
}
.title {
font-size: 55px;
line-height: 50px;
width: 70%;
margin-inline: auto;
}
.blog-container {
padding: 0 100px;
margin-top: 2rem;
}
.img {
height: 450px;
object-fit: cover;
}
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"font-awesome": "^4.7.0",
"gray-matter": "^4.0.3",
"next": "latest",
"next-themes": "^0.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.11.0",
"react-markdown": "^9.0.0",
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.0"
},
"engines": {
"node": ">=18"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.5.2",
"@storybook/addon-interactions": "^7.5.2",
"@storybook/addon-links": "^7.5.2",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.5.2",
"@storybook/nextjs": "^7.5.2",
"@storybook/react": "^7.5.2",
"@storybook/testing-library": "^0.2.2",
"storybook": "^7.5.2"
}
}
pages/404.js 0 → 100644
import React from "react";
function PageNotFound() {
return <div>404</div>;
}
export default PageNotFound;
pages/_app.js 0 → 100644
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} />
</>
);
}
pages/index.js 0 → 100644
export default function Home() {
return <h1>Home</h1>;
}
pages/loading.js 0 → 100644
function Loading() {
return <h2>...Loading</h2>;
}
export default Loading;
public/vercel.svg 0 → 100644
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
\ No newline at end of file
stories/blog-lists.stories.js 0 → 100644
import BlogLists from "../components/top-level/blog-lists";
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 0 → 100644
import React from "react";
import Card from "../components/base/card";
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 0 → 100644
import Header from "../components/base/header";
export default {
title: "Base/Header",
component: Header,
argTypes: {},
};
export const header = {};
stories/icons.stories.js 0 → 100644
import Icons from "../components/base/icons";
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) => (
<div>{<Icons name={e} />}</div>
))}
</div>
);
};
stories/pagination.stories.js 0 → 100644
import Pagination from "../components/top-level/pagination";
export default {
title: "Top-Level/Pagination",
component: Pagination,
argTypes: {},
};
export const pagination = {
args: {
totalPages: 10,
},
};
stories/search.stories.js 0 → 100644
import Search from "../components/base/search";
export default {
title: "Base/Search",
component: Search,
argTypes: {
onSearch: { actions: "onSearch" },
},
};
export const search = {};
stories/single-blog.stories.js 0 → 100644
import SingleBlog from "../components/top-level/single-blog";
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 0 → 100644
import Typography from "../components/base/typography";
export default {
title: "Base/Typography",
component: Typography,
argTypes: {},
};
export const typography = {};
styles/global.css 0 → 100644
:root {
--primary-color: #5a67d8;
--secondary-color: #463373;
--font-color: #718096;
--bg-color: #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;
}
[data-theme="dark"] {
--bg-color: #131617;
}
body,
html {
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: var(--bg-grey);
min-height: 100dvh;
max-width: 1920px;
margin: 0 auto;
color: #718096;
}
h1,
h2,
h3,
h4 {
font-family: "Libre Baskerville", serif;
}
.icon-container {
display: flex;
gap: 1em;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment