Skip to content

N
NextJs-Blog
Commit bf43f185 by Madhankumar
Options

changes in stories and components

parent 21b7a064
Showing with 305 additions and 467 deletions
.storybook/main.js
/** @type { import('@storybook/nextjs').StorybookConfig } */ /** @type { import('@storybook/nextjs').StorybookConfig } */
const config = { const config = {
stories: [ stories: [
"../stories/**/*.mdx", "../components/**/*.mdx",
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)", "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
], ],
addons: [ addons: [
"@storybook/addon-links", "@storybook/addon-links",
......
app/globals.css
@import url("//fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600&display=swap"); @import url("//fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600&display=swap");
@import url("//fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap"); @import url("//fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");
* { *,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--heading1: clamp(1rem, 1.3rem + 2vw, 3rem);
--heading2: clamp(1rem, 1rem + 2vw, 1.7rem);
--heading3: clamp(0.8rem, 0.5rem + 1.5vw, 1.5rem);
--heading4: clamp(0.7rem, 0.4rem + 1.4vw, 1.4rem);
--heading5: clamp(0.6rem, 0.3rem + 1.3vw, 1.3rem);
--heading6: clamp(0.5rem, 0.2rem + 1.2vw, 1.2rem);
} }
.light { .light {
--primary-color: #5a67d8; --primary-bgcolor: #5a67d8;
--secondary-color: #463373; --secondary-bgcolor: #fff;
--primary-color: #fff;
--secondary-color: #718096;
--font-color-900: #2d3748; --font-color-900: #2d3748;
--font-color-300: #718096; --font-color-300: #718096;
--title-color: #2d3748; --title-color: #2d3748;
...@@ -34,7 +44,11 @@ ...@@ -34,7 +44,11 @@
--font-color-900: #fff; --font-color-900: #fff;
--title-color: #fff; --title-color: #fff;
--font-color-700: #fff; --font-color-700: #fff;
--primary-bgcolor: #5a67d8;
--secondary-bgcolor: #131617;
--primary-color: #fff; --primary-color: #fff;
--secondary-color: #fff;
} }
body, body,
...@@ -51,13 +65,34 @@ html { ...@@ -51,13 +65,34 @@ html {
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
} }
h1 {
font-size: var(--heading1);
}
h2 {
font-size: var(--heading2);
}
h3 {
font-size: var(--heading3);
}
h4 {
font-size: var(--heading4);
}
h5 {
font-size: var(--heading5);
}
h6 {
font-size: var(--heading6);
}
h1, h1,
h2, h2,
h4, h4,
h3,
h5, h5,
h6 { h6 {
color: var(--title-color);
font-family: "Libre Baskerville", serif; font-family: "Libre Baskerville", serif;
margin: 20px 0px;
} }
.icon-container { .icon-container {
......
app/page.module.css deleted 100644 → 0
.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);
}
}
components/base/button/button.stories.js 0 → 100644
import Button from ".";
export default {
title: "Base/Button",
component: Button,
argTypes: {
backgroundColor: { control: "color" },
},
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
label: "Primary",
primary: true,
};
export const Secondary = Template.bind({});
Secondary.args = {
label: "Secondary",
primary: false,
};
components/base/button/index.js 0 → 100644
import styles from "./styles.module.css";
const Button = ({ label, primary, classes }) => {
const background = primary ? styles.primary : styles.secondary;
return (
<button className={`${background} ${styles[classes]}`}>{label}</button>
);
};
export default Button;
components/base/button/styles.module.css 0 → 100644
button {
padding: 0.8rem 1.5rem;
outline: none;
border: none;
font-size: 18px;
font-weight: 500;
border-radius: 5px;
cursor: pointer;
}
.primary {
background-color: var(--primary-bgcolor);
color: var(--primary-color);
}
.secondary {
background-color: var(--secondary-bgcolor);
color: var(--secondary-color);
}
button .active {
background: #5a67d8;
color: #fff;
border: 1px solid #7cbddb;
border-radius: 10px;
font-size: 14px;
font-weight: bold;
}
button.secondary:hover:not(.active) {
color: var(--font-color-900);
}
button .disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* .next {
font-size: 20px;
} */
button:hover:is(.no-cursor) {
cursor: not-allowed;
user-select: none;
}
stories/card.stories.js → components/base/card/card.stories.js
import React from "react"; import React from "react";
import Card from "../app/components/base/card/page"; import Card from ".";
export default { export default {
title: "Base/Card", title: "Base/Card",
component: Card, component: Card,
argTypes: {},
}; };
export const card = (args) => <Card {...args} />; export const card = (args) => <Card {...args} />;
card.args = { card.args = {
title: "How to get a perfect start for beginning runners", title: "How to get a perfect start for beginning runners",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle1.jpg"), url: require("@img/lifestyle1.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Isabella Ava",
name: "Isabella Ava", images: {
image: require("../public/images/a1.jpg"), // Use require to load images url: require("@img/a1.jpg"), // Use require to load images
}, },
readingTime: "1 min", readingTime: "1 min",
}; };
app/components/base/card/page.js → components/base/card/index.js
import styles from "./card.module.css"; import styles from "./styles.module.css";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Icons from "../icons/page"; import Icons from "../icons";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const Card = ({ const Card = ({
title, title,
description, description,
blogImage, image,
publishedOn, publishedDate,
author, authorName,
images,
readingTime, readingTime,
}) => { }) => {
console.log(blogImage);
return ( return (
<div className={styles.card}> <div className={styles.card}>
<Link prefetch={false} href="#"> <Link href="#">
<Image <Image className={styles.img} src={image.url} alt={title} />
className={styles.img}
src={blogImage.image}
height={blogImage.height}
width={blogImage.width}
quality={100}
alt="cardimage"
/>
</Link> </Link>
<div className={styles["card-content"]}> <div className={styles["card-content"]}>
<Link prefetch={false} href="#" className={styles.title}> <Link href="#" className={styles.title}>
<p>{title}</p> <p>{title}</p>
</Link> </Link>
<p className={styles.description}>{description}</p> <p className={styles.description}>{description}</p>
<div className={styles.authorcontainer}> <div className={styles.authorcontainer}>
<div className={styles.cardbottom}> <div className={styles.cardbottom}>
<Image <Image className={styles.img} src={images.url} alt={authorName} />
className={styles.img}
src={author.image}
quality={100}
alt="authorImg"
/>
<div className={styles.authordescription}> <div className={styles.authordescription}>
<p>{author.name}</p> <p>{authorName}</p>
<div className={styles["author-desc"]}> <div className={styles["author-desc"]}>
{publishedOn} {publishedDate}
<span className={styles.icon}> <span className={styles.icon}>
<Icons name="clock" /> <Icons name="clock" size="small" />
{readingTime} {readingTime}
</span> </span>
</div> </div>
...@@ -57,15 +45,13 @@ const Card = ({ ...@@ -57,15 +45,13 @@ const Card = ({
Card.propTypes = { Card.propTypes = {
title: PropTypes.string, title: PropTypes.string,
description: PropTypes.string, description: PropTypes.string,
blogImage: PropTypes.shape({ image: PropTypes.shape({
image: PropTypes.string, url: PropTypes.string,
height: PropTypes.number,
width: PropTypes.number,
}), }),
publishedon: PropTypes.string, publishedDate: PropTypes.string,
author: PropTypes.shape({ authorName: PropTypes.string,
name: PropTypes.string, images: PropTypes.shape({
image: PropTypes.string, // Use PropTypes.string for images url: PropTypes.string, // Use PropTypes.string for images
}), }),
readingTime: PropTypes.string, readingTime: PropTypes.string,
......
stories/header.stories.js → components/base/header/header.stories.js
import Header from "../app/components/base/header/page"; import Header from ".";
import { ThemeProvider } from "../app/context"; import { ThemeProvider } from "@/app/context/index";
export default { export default {
title: "Base/Header", title: "Base/Header",
component: Header, component: Header,
......
app/components/base/header/page.js → components/base/header/index.js
import styles from "./header.module.css"; import styles from "./styles.module.css";
import Search from "../search/page"; import Search from "../search";
import Icon from "../icons/page"; import Icons from "../icons";
import { useTheme } from "../../../context"; import { useTheme } from "@/app/context/index";
import Link from "next/link"; import Link from "next/link";
function Header({ name, onThemeChange, onSearch, onClose }) { function Header({ name, onThemeChange, onSearch, onClose }) {
...@@ -21,8 +21,8 @@ function Header({ name, onThemeChange, onSearch, onClose }) { ...@@ -21,8 +21,8 @@ function Header({ name, onThemeChange, onSearch, onClose }) {
<header className={styles.header}> <header className={styles.header}>
<div className={styles.container}> <div className={styles.container}>
<nav className={styles.navbar}> <nav className={styles.navbar}>
<Link className={styles["navbar-brand"]} href="/" prefetch={false}> <Link className={styles["navbar-brand"]} href="/">
<Icon name="newspaper" /> <Icons name="newspaper" size="medium" classes="newspaper-icon" />
<h2>{name}</h2> <h2>{name}</h2>
</Link> </Link>
...@@ -31,9 +31,9 @@ function Header({ name, onThemeChange, onSearch, onClose }) { ...@@ -31,9 +31,9 @@ function Header({ name, onThemeChange, onSearch, onClose }) {
</div> </div>
<div onClick={handleTheme} className={styles.themelight}> <div onClick={handleTheme} className={styles.themelight}>
<Icon name={theme == "light" ? "moon" : "sun"} /> <Icons name={theme == "light" ? "moon" : "sun"} size="medium" />
<span className={styles.mobilemenu}> <span className={styles.mobilemenu}>
<Icon name="hamburger" /> <Icons name="hamburger" size="medium" classes="menu-icon" />
</span> </span>
</div> </div>
</nav> </nav>
......
app/components/base/header/header.module.css → components/base/header/styles.module.css
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
}
.navbar-brand h2 {
color: var(--title-color); color: var(--title-color);
} }
.mobilemenu { .mobilemenu {
...@@ -31,6 +33,7 @@ ...@@ -31,6 +33,7 @@
.search { .search {
display: none; display: none;
} }
@media screen and (min-width: 991px) { @media screen and (min-width: 991px) {
.mobilemenu { .mobilemenu {
display: none; display: none;
......
stories/icons.stories.js → components/base/icons/icons.stories.js
import Icons from "../app/components/base/icons/page"; import Icons from ".";
export default { export default {
title: "Base/Icons", title: "Base/Icons",
...@@ -18,7 +18,7 @@ export const icons = () => { ...@@ -18,7 +18,7 @@ export const icons = () => {
return ( return (
<div className="icon-container"> <div className="icon-container">
{iconList.map((e, i) => ( {iconList.map((e, i) => (
<div key={i}>{<Icons name={e} />}</div> <div key={i}>{<Icons name={e} size="small" />}</div>
))} ))}
</div> </div>
); );
......
app/components/base/icons/page.js → components/base/icons/index.js
import styles from "./icons.module.css"; import styles from "./styles.module.css";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
const Icons = ({ name }) => { const Icons = ({ name, size, classes }) => {
const icons = { const icons = {
search: ( search: (
<svg <svg
...@@ -93,7 +93,9 @@ const Icons = ({ name }) => { ...@@ -93,7 +93,9 @@ const Icons = ({ name }) => {
), ),
}; };
return <div className={`${styles[name]}`}>{icons[name]}</div>; return (
<span className={`${styles[classes]} ${styles[size]}`}>{icons[name]}</span>
);
}; };
Icons.propTypes = { Icons.propTypes = {
......
app/components/base/icons/icons.module.css → components/base/icons/styles.module.css
.search svg, .small svg {
height: 20px;
width: 20px;
}
.medium svg {
height: 38px;
width: 38px;
}
/* .search svg,
.clock svg, .clock svg,
.close svg { .close svg {
height: 18px; height: 18px;
...@@ -6,6 +15,9 @@ ...@@ -6,6 +15,9 @@
vertical-align: sub; vertical-align: sub;
} }
.moon svg, .moon svg,
.sun svg { .sun svg {
height: 35px; height: 35px;
...@@ -13,16 +25,15 @@ ...@@ -13,16 +25,15 @@
color: var(--font-color-300); color: var(--font-color-300);
vertical-align: sub; vertical-align: sub;
} }
*/
.hamburger svg { .menu-icon svg {
background: #5a67d8; background: #5a67d8;
color: white; color: white;
padding: 0.5rem 0.7rem; padding: 0.5rem 0.7rem;
border-radius: 5px; border-radius: 5px;
height: 35px;
width: 35px;
} }
.newspaper svg { .newspaper-icon svg {
color: #5a67d8; color: #5a67d8;
} }
app/components/base/search/page.js → components/base/search/index.js
import styles from "./search.module.css"; import styles from "./styles.module.css";
import Icon from "../icons/page"; import Icons from "../icons";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
const Search = ({ onSearch, onClose }) => { const Search = ({ onSearch, onClose }) => {
const [debouncetitle, setDebounceTitle] = useState(""); const [text, setText] = useState("");
useEffect(() => { useEffect(() => {
//after 2 second it will execute //after 2 second it will execute
const handler = setTimeout(() => { const handler = setTimeout(() => {
if (debouncetitle !== "") { if (text !== "") {
onSearch(debouncetitle); onSearch(text);
} }
}, 2000); }, 2000);
return () => { return () => {
clearTimeout(handler); clearTimeout(handler);
}; };
}, [debouncetitle]); }, [text]);
const handleSearch = (value) => { const handleSearch = (value) => {
setDebounceTitle(value); setText(value);
}; };
const handleCustomClear = (e) => { const handleCustomClear = (e) => {
e.preventDefault(); e.preventDefault();
onClose(""); onClose("");
setDebounceTitle(""); setText("");
}; };
return ( return (
<div className={styles["search-input"]}> <div className={styles["search-input"]}>
<span className={`${styles["search-icon"]}`}> <span className={`${styles["search-icon"]}`}>
<Icon name="search" /> <Icons name="search" size="small" />
</span> </span>
<input <input
className={styles.search} className={styles.search}
type="text" type="text"
autoFocus={true} autoFocus={true}
value={debouncetitle} value={text}
onChange={(e) => handleSearch(e.target.value)} onChange={(e) => handleSearch(e.target.value)}
placeholder="Discover news, articles and more" placeholder="Discover news, articles and more"
/> />
{debouncetitle && ( {text && (
<span className={`${styles["close-icon"]}`} onClick={handleCustomClear}> <span className={`${styles["close-icon"]}`} onClick={handleCustomClear}>
<Icon name="close" /> <Icons name="close" />
</span> </span>
)} )}
</div> </div>
......
stories/search.stories.js → components/base/search/search.stories.js
import Search from "../app/components/base/search/page"; import Search from ".";
export default { export default {
title: "Base/Search", title: "Base/Search",
component: Search, component: Search,
......
app/components/base/typography/page.js → components/base/typography/index.js
import styles from "./typography.module.css";
const Typography = () => { const Typography = () => {
return ( return (
<div> <div>
...@@ -9,7 +7,7 @@ const Typography = () => { ...@@ -9,7 +7,7 @@ const Typography = () => {
<h4>Heading 4</h4> <h4>Heading 4</h4>
<h5>Heading 5</h5> <h5>Heading 5</h5>
<h6>Heading 6</h6> <h6>Heading 6</h6>
<p className={styles.paragraph}> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue
placerat lobortis. Pellentesque facilisis nisl orci, non accumsan massa placerat lobortis. Pellentesque facilisis nisl orci, non accumsan massa
auctor quis. Proin blandit sollicitudin turpis id laoreet. Vivamus auctor quis. Proin blandit sollicitudin turpis id laoreet. Vivamus
......
stories/typography.stories.js → components/base/typography/typography.stories.js
import Typography from "../app/components/base/typography/page"; import Typography from ".";
export default { export default {
title: "Base/Typography", title: "Base/Typography",
component: Typography, component: Typography,
argTypes: {},
}; };
export const typography = {}; export const typography = {};
stories/blog-lists.stories.js → components/top-level/blog-lists/blog-lists.stories.js
import BlogLists from "../app/components/top-level/blog-lists/page"; import BlogLists from ".";
export default { export default {
title: "Top-Level/Blog-Lists", title: "Top-Level/Blog-Lists",
component: BlogLists, component: BlogLists,
argTypes: {},
}; };
export const blogLists = (args) => <BlogLists {...args} />; export const blogLists = (args) => <BlogLists {...args} />;
...@@ -15,64 +14,59 @@ blogLists.args = { ...@@ -15,64 +14,59 @@ blogLists.args = {
title: "How to get perfect start for beginning runners", title: "How to get perfect start for beginning runners",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle1.jpg"), url: require("@img/lifestyle1.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Isabella ava",
name: "Isabella ava", images: {
image: require("../public/images/a1.jpg"), url: require("@img/a1.jpg"),
}, },
readingTime: "1min", readingTime: "1min",
}, },
{ {
title: "Great tools to improve your personal blogging experience", title: "Great tools to improve your personal blogging experience",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle2.jpg"), url: require("@img/lifestyle2.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Charlotte mia",
name: "Charlotte mia", images: {
image: require("../public/images/a2.jpg"), url: require("@img/a2.jpg"),
}, },
readingTime: "1min", readingTime: "1min",
}, },
{ {
title: "Blog Guide: How to Start a Personal blog on WordPress", title: "Blog Guide: How to Start a Personal blog on WordPress",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle3.jpg"), url: require("@img/lifestyle3.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Elizabeth",
name: "Elizabeth", images: {
image: require("../public/images/a3.jpg"), url: require("@img/a3.jpg"),
}, },
readingTime: "1min", readingTime: "1min",
}, },
{ {
title: "The technical setup when starting a personal blog", title: "The technical setup when starting a personal blog",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle4.jpg"), url: require("@img/lifestyle4.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Charlotte mia",
name: "Charlotte mia", images: {
image: require("../public/images/a1.jpg"), url: require("@img/a1.jpg"),
}, },
readingTime: "1min", readingTime: "1min",
}, },
...@@ -80,31 +74,28 @@ blogLists.args = { ...@@ -80,31 +74,28 @@ blogLists.args = {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe", title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle5.jpg"), url: require("@img/lifestyle5.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Elizabeth",
name: "Elizabeth", images: {
image: require("../public/images/a3.jpg"), url: require("@img/a3.jpg"),
}, },
readingTime: "1min", readingTime: "1min",
}, },
{ {
title: "3 New outfit Formulas To Add to your Capsule Wardrobe", title: "3 New outfit Formulas To Add to your Capsule Wardrobe",
description: description:
"Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.", "Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis vitae sit.",
blogImage: { image: {
image: require("../public/images/lifestyle6.jpg"), url: require("@img/lifestyle6.jpg"),
height: 490,
width: 740,
}, },
publishedOn: "July 13, 2020.", publishedDate: "July 13, 2020.",
author: { authorName: "Isabella ava",
name: "Isabella ava", images: {
image: require("../public/images/a1.jpg"), url: require("@img/a1.jpg"),
}, },
readingTime: "1min", readingTime: "1min",
}, },
......
app/components/top-level/blog-lists/page.js → components/top-level/blog-lists/index.js
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Card from "../../base/card/page"; import Card from "@/components/base/card";
import styles from "./blog-lists.module.css"; import styles from "./styles.module.css";
const BlogLists = ({ title, description, blogs }) => { const BlogLists = ({ title, description, blogs }) => {
return ( return (
<div className={styles["blog-container"]}> <div className={styles["blog-container"]}>
...@@ -17,6 +17,8 @@ const BlogLists = ({ title, description, blogs }) => { ...@@ -17,6 +17,8 @@ const BlogLists = ({ title, description, blogs }) => {
); );
}; };
BlogLists.propTypes = { BlogLists.propTypes = {
title: PropTypes.string,
description: PropTypes.string,
blogs: PropTypes.array, blogs: PropTypes.array,
}; };
......
app/components/top-level/pagination/page.js → components/top-level/pagination/index.js
import React, { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import styles from "./pagination.module.css"; import styles from "./styles.module.css";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Button from "@/components/base/button";
function Pagination({ total, currentPage, onPageChange }) { function Pagination({ total, currentPage, onPageChange }) {
//Set number of pages //Set number of pages
...@@ -65,38 +66,42 @@ function Pagination({ total, currentPage, onPageChange }) { ...@@ -65,38 +66,42 @@ function Pagination({ total, currentPage, onPageChange }) {
<div className={styles["pagination-container"]}> <div className={styles["pagination-container"]}>
{arrOfCurrButtons.map((item, index) => { {arrOfCurrButtons.map((item, index) => {
return ( return (
<a <span
key={index} key={index}
className={`${
item === "..."
? styles["no-cursor"]
: currentButton === item
? styles["active"]
: ""
}`}
onClick={() => (item === "..." ? "" : handleCurrentPage(item))} onClick={() => (item === "..." ? "" : handleCurrentPage(item))}
> >
{item} <Button
</a> label={item}
primary={currentButton === item ? true : false}
classes={`${
item === "..."
? "no-cursor"
: currentButton === item
? "active"
: ""
}`}
/>
</span>
); );
})} })}
<span
<a
className={`${
currentButton === "..."
? styles["no-cursor"]
: currentButton === numberOfPages.length
? styles["disabled"]
: ""
}`}
onClick={() => onClick={() =>
currentButton === "..." || currentButton === numberOfPages.length currentButton === "..." || currentButton === numberOfPages.length
? "" ? ""
: handleCurrentPage(currentButton + 1) : handleCurrentPage(currentButton + 1)
} }
> >
<span className={styles.next}>Next »</span> <Button
</a> label="Next »"
className={`${
currentButton === "..."
? "no-cursor"
: currentButton === numberOfPages.length
? "disabled"
: ""
}`}
/>
</span>
</div> </div>
); );
} }
...@@ -104,5 +109,6 @@ function Pagination({ total, currentPage, onPageChange }) { ...@@ -104,5 +109,6 @@ function Pagination({ total, currentPage, onPageChange }) {
Pagination.propTypes = { Pagination.propTypes = {
total: PropTypes.number.isRequired, total: PropTypes.number.isRequired,
currentPage: PropTypes.number, currentPage: PropTypes.number,
onPageChange: PropTypes.func,
}; };
export default Pagination; export default Pagination;
stories/pagination.stories.js → components/top-level/pagination/pagination.stories.js
import Pagination from "../app/components/top-level/pagination/page"; import Pagination from ".";
export default { export default {
title: "Top-Level/Pagination", title: "Top-Level/Pagination",
component: Pagination, component: Pagination,
......
app/components/top-level/pagination/pagination.module.css → components/top-level/pagination/styles.module.css
...@@ -8,44 +8,15 @@ ...@@ -8,44 +8,15 @@
font-size: 15px; font-size: 15px;
} }
.pagination-container a { .pagination-container span {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 0.4em; margin: 0 0.2em;
padding-inline: 14px; padding-inline: 4px;
border-radius: 10px; border-radius: 10px;
height: 40px; height: 40px;
background-color: #fff;
text-decoration: none; text-decoration: none;
transition: background-color 0.2s; transition: background-color 0.2s;
border: 1px solid #ddd;
cursor: pointer; cursor: pointer;
} }
.pagination-container a.active {
background: #5a67d8;
color: #fff;
border: 1px solid #7cbddb;
border-radius: 10px;
font-size: 14px;
font-weight: bold;
}
.pagination-container a.disabled {
opacity: 0.7;
cursor: not-allowed;
}
.pagination-container a:hover:not(.active) {
background: #5a67d8;
color: #fff;
}
.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 → components/top-level/single-blog/index.js
import Image from "next/image"; import Image from "next/image";
import styles from "./single-blog.module.css"; import styles from "./styles.module.css";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import PropTypes from "prop-types";
function SingleBlog({ function SingleBlog({
title, title,
postedOn, publishedDate,
author, authorName,
category, category,
readTime, readingTime,
blogImg, images,
categories, categories,
markdown, markdown,
}) { }) {
...@@ -21,12 +23,13 @@ function SingleBlog({ ...@@ -21,12 +23,13 @@ function SingleBlog({
<div className={styles["blog-list"]}> <div className={styles["blog-list"]}>
<ul> <ul>
<li> <li>
Posted on <span className={styles["list-bold"]}>{postedOn}</span> Posted on
<span className={styles["list-bold"]}>{publishedDate}</span>
</li> </li>
<li> <li>
By&nbsp; By&nbsp;
<a href="#" className={styles["list-bold"]}> <a href="#" className={styles["list-bold"]}>
{author?.name} {authorName}
</a> </a>
</li> </li>
<li> <li>
...@@ -37,7 +40,7 @@ function SingleBlog({ ...@@ -37,7 +40,7 @@ function SingleBlog({
</li> </li>
<li> <li>
<a href="#" className={styles["list-bold"]}> <a href="#" className={styles["list-bold"]}>
{readTime} {readingTime}
</a> </a>
</li> </li>
</ul> </ul>
...@@ -45,12 +48,7 @@ function SingleBlog({ ...@@ -45,12 +48,7 @@ function SingleBlog({
</div> </div>
<div className={styles["blog-container"]}> <div className={styles["blog-container"]}>
<div className={styles.blogimage}> <div className={styles.blogimage}>
<Image <Image className={styles.img} src={images.url} alt={title} />
className={styles.img}
src={author?.image}
quality={100}
alt="image"
/>
</div> </div>
<div className={styles["blog-content"]}> <div className={styles["blog-content"]}>
<ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown> <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdown}</ReactMarkdown>
...@@ -66,4 +64,15 @@ function SingleBlog({ ...@@ -66,4 +64,15 @@ function SingleBlog({
); );
} }
SingleBlog.propTypes = {
title: PropTypes.string,
publishedDate: PropTypes.string,
authorName: PropTypes.string,
category: PropTypes.string,
readingTime: PropTypes.string,
categories: PropTypes.array,
image: PropTypes.shape({
url: PropTypes.string,
}),
};
export default SingleBlog; export default SingleBlog;
stories/single-blog.stories.js → components/top-level/single-blog/single-blog.stories.js
import SingleBlog from "../app/components/top-level/single-blog/page"; import SingleBlog from ".";
export default { export default {
title: "Top-Level/Single-Blog", title: "Top-Level/Single-Blog",
component: SingleBlog, component: SingleBlog,
...@@ -8,14 +8,14 @@ export const singleBlog = (args) => <SingleBlog {...args} />; ...@@ -8,14 +8,14 @@ export const singleBlog = (args) => <SingleBlog {...args} />;
singleBlog.args = { singleBlog.args = {
title: "Create an Art that shows the beauty in everyone ideas of flaws.", title: "Create an Art that shows the beauty in everyone ideas of flaws.",
postedOn: "July 11,2020", publishedDate: "July 11,2020",
author: { authorName: "Charlotte mia",
name: "Charlotte mia", images: {
image: require("../public/images/blogsingle.jpg"), url: require("@/public/images/blogsingle.jpg"),
}, },
category: "Fashion", category: "Fashion",
readTime: "1 min read", readingTime: "1 min read",
categories: ["Fashion", "Beauty"], categories: ["Fashion", "Beauty"],
markdown: ` markdown: `
## How to create an Art that shows the beauty in everyone ideas of flaws. ## How to create an Art that shows the beauty in everyone ideas of flaws.
......
app/components/top-level/single-blog/single-blog.module.css → components/top-level/single-blog/styles.module.css
...@@ -18,7 +18,6 @@ ol li { ...@@ -18,7 +18,6 @@ ol li {
.img { .img {
max-width: 100%; max-width: 100%;
max-height: 30vmax; max-height: 30vmax;
object-fit: cover; object-fit: cover;
display: block; display: block;
} }
...@@ -43,12 +42,7 @@ blockquote p { ...@@ -43,12 +42,7 @@ blockquote p {
.blog-list ul li a:hover { .blog-list ul li a:hover {
color: var(--font-color-700); color: var(--font-color-700);
} }
/* .blog-container {
z-index: -1;
max-width: 1440px;
padding-inline: 0.5rem;
margin: 0 auto;
} */
.blog-container { .blog-container {
width: min(90%, 100% - 2rem); width: min(90%, 100% - 2rem);
margin: 0 auto; margin: 0 auto;
...@@ -79,20 +73,11 @@ blockquote p::before { ...@@ -79,20 +73,11 @@ blockquote p::before {
content: "\2014\00A0"; content: "\2014\00A0";
} }
.head-container { .head-container {
/* width: clamp(min(768px, 15rem), 1200px, 90%);
margin: 0 auto; */
/* width: clamp(min(768px, 15rem), 75rem, 90%);
margin: 0 auto; */
width: min(100% - 2rem, 90%); width: min(100% - 2rem, 90%);
margin-inline: auto; margin-inline: auto;
} }
.headtitle {
width: 100%;
/* padding-inline: 1rem; */
}
.title { .title {
font-size: clamp(1rem, 1.3rem + 2vw, 3rem);
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
color: var(--font-color-900); color: var(--font-color-900);
...@@ -104,10 +89,8 @@ h2, ...@@ -104,10 +89,8 @@ h2,
h3 { h3 {
color: var(--font-color-900); color: var(--font-color-900);
} }
h2 {
font-size: clamp(1rem, 1rem + 2vw, 1.7rem); @media (min-width: 768px) {
}
@media (min-width: 802px) {
.blog-content { .blog-content {
padding: 3rem; padding: 3rem;
} }
......
jsconfig.json
{ {
"compilerOptions": { "compilerOptions": {
"baseUrl": ".",
"paths": { "paths": {
"@/*": ["./*"], "@/*": ["./*"],
"@img/*": ["public/images/*"],
"@context/*": ["app/context/*"],
} }
} }
} }
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