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