Skip to content

N
NextJs-Blog
Commit 3fedfff8 by Madhankumar
Options

storybook components

parent 8b2a6afb
Showing with 194 additions and 50 deletions
.storybook/preview.js
/** @type { import('@storybook/react').Preview } */
import "../app/globals.css";
import { useDarkMode } from "storybook-dark-mode";
import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
import { library } from "@fortawesome/fontawesome-svg-core";
import { faNewspaper } from "@fortawesome/free-solid-svg-icons";
library.add(faNewspaper);
const preview = {
parameters: {
......
app/_app.js
import "@styles/global.css";
import "font-awesome/css/font-awesome.css";
import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
import { library } from "@fortawesome/fontawesome-svg-core";
import { faNewspaper } from "@fortawesome/free-solid-svg-icons";
library.add(faNewspaper);
//import Layout from '../components/layout'
export default function App({ Component, pageProps }) {
return (
......
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;
}
......@@ -20,12 +12,13 @@
}
.cardbottom img {
border-radius: 50%;
height: 60px;
width: 60px;
max-width: 100%;
}
.card-content {
padding: 1.5rem;
padding-bottom: 1rem;
word-wrap: break-word;
}
.cardbottom {
......@@ -40,8 +33,7 @@
.description {
color: var(--font-color-300);
line-height: 1.5em;
display: flex;
gap: 1em;
word-wrap: break-word;
}
.title {
......@@ -55,3 +47,25 @@
.title:hover {
color: #5a67d8;
}
.author-desc {
display: flex;
align-items: center;
gap: 1rem;
color: var(--font-color-300);
line-height: 0.5em;
}
.author-desc span {
display: flex;
align-items: center;
}
@media screen and (min-width: 802px) {
.card {
width: min(90%, 25rem);
}
}
@media screen and (min-width: 1200px) {
.card {
width: 23rem;
}
}
app/components/base/card/page.js
......@@ -13,7 +13,6 @@ const Card = ({
readingTime,
}) => {
return (
<div className={styles.row}>
<div className={styles.card}>
<Link prefetch={false} href="#">
<Image className={styles.img} src={imageUrl} alt="cardimage" />
......@@ -32,7 +31,7 @@ const Card = ({
/>
<div>
<h3>{author.name}</h3>
<div className={styles.description}>
<div className={styles["author-desc"]}>
{postedOn}
<span className={styles.icon}>
<Icons name="clock" />
......@@ -43,7 +42,6 @@ const Card = ({
</div>
</div>
</div>
</div>
);
};
Card.propTypes = {
......@@ -56,7 +54,6 @@ Card.propTypes = {
authImg: PropTypes.string, // Use PropTypes.string for authImg
}),
postedOn: PropTypes.string,
authorname: PropTypes.string,
readingTime: PropTypes.string,
};
......
app/components/base/header/header.module.css
......@@ -16,6 +16,8 @@
.navbar-brand {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
text-decoration: none;
color: var(--title-color);
}
app/components/base/header/page.js
......@@ -2,6 +2,7 @@ import styles from "./header.module.css";
import Search from "../search/page";
import Icon from "../icons/page";
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Correct
function Header({ onThemeChange }) {
const [theme, setTheme] = useState("light");
......@@ -15,7 +16,11 @@ function Header({ onThemeChange }) {
<div className={styles.container}>
<nav className={styles.navbar}>
<a className={styles["navbar-brand"]} href="/">
<i className="fa fa-newspaper-o"></i>
<FontAwesomeIcon
icon="fa-solid fa-newspaper"
style={{ fontSize: "30px", color: "#5a67d8" }}
/>
<h2>NewsBlog</h2>
</a>
......
app/components/base/icons/icons.module.css
.search svg,
.clock svg {
.clock svg,
.close svg {
height: 20px;
width: 20px;
vertical-align: sub;
......
app/components/base/icons/page.js
......@@ -70,7 +70,7 @@ const Icons = ({ name }) => {
),
};
return <span className={`${styles[name]}`}>{icons[name]}</span>;
return <div className={`${styles[name]}`}>{icons[name]}</div>;
};
Icons.propTypes = {
......
app/components/base/search/search.module.css
......@@ -11,6 +11,7 @@
}
.search-input {
position: relative;
display: inline-block;
}
.search-icon {
position: absolute;
......@@ -22,8 +23,8 @@
.close-icon {
cursor: pointer;
position: relative;
position: absolute;
color: #2b4c82;
right: 33px;
top: 15px;
right: 15px;
}
app/components/top-level/blog-lists/blog-lists.module.css
.bloglist-container {
max-width: 1200px;
margin: 0 auto;
}
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 2rem;
grid-row-gap: 3rem;
}
.title {
font-size: 38px;
line-height: 25px;
font-weight: 600;
padding-inline: 1.5rem;
color: var(--title-color);
}
.description {
color: var(--font-color-300);
padding-inline: 1.5rem;
margin-bottom: 3em;
}
@media screen and (min-width: 802px) {
.row {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
justify-items: center;
}
}
@media screen and (min-width: 1440px) {
.row {
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
justify-items: center;
}
.bloglist-container {
padding: 0 100px;
}
}
app/components/top-level/blog-lists/page.js
......@@ -3,7 +3,7 @@ import Card from "../../base/card/page";
import styles from "./blog-lists.module.css";
const BlogLists = ({ listsData }) => {
return (
<div>
<div className={styles["bloglist-container"]}>
<h1 className={styles.title}>Lifestyle</h1>
<p className={styles.description}>
Lorem ipsum dolor sit amet elit. Id quaerat amet ipsum sunt et quos
......
app/components/top-level/pagination/page.js
......@@ -82,7 +82,9 @@ function Pagination({ totalPages, onCurrentPage }) {
: ""
}`}
onClick={() =>
currentButton === "..." ? "" : handleCurrentPage(currentButton + 1)
currentButton === "..." || currentButton === numberOfPages.length
? ""
: handleCurrentPage(currentButton + 1)
}
>
<span className={styles.next}>Next »</span>
......
app/components/top-level/pagination/pagination.module.css
......@@ -34,6 +34,7 @@
.pagination-container a.disabled {
opacity: 0.7;
cursor: not-allowed;
}
.pagination-container a:hover:not(.active) {
background-color: var(--primary-color);
......
app/components/top-level/single-blog/page.js
......@@ -24,14 +24,21 @@ function SingleBlog({
Posted on <span className={styles["list-bold"]}>{postedOn}</span>
</li>
<li>
By <span className={styles["list-bold"]}>{authorName}</span>
By&nbsp;
<a href="#" className={styles["list-bold"]}>
{authorName}
</a>
</li>
<li>
Published in
<span className={styles["list-bold"]}>{publishedIn}</span>
Published in&nbsp;
<a href="#" className={styles["list-bold"]}>
{publishedIn}
</a>
</li>
<li>
<span className={styles["list-bold"]}>{readTime}</span>
<a href="#" className={styles["list-bold"]}>
{readTime}
</a>
</li>
</ul>
</div>
......
app/components/top-level/single-blog/single-blog.module.css
......@@ -17,19 +17,28 @@
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;
padding-inline: 1rem;
font-weight: 500;
color: var(--font-color-300);
}
.blog-list ul li a {
text-decoration: none;
color: var(--font-color-300);
}
.blog-list ul li a:hover {
color: var(--font-color-700);
}
.blog-container {
z-index: -1;
width: min(90%, 1440px);
max-width: 1440px;
padding-inline: 0.5rem;
margin: 0 auto;
}
.tag {
......@@ -51,7 +60,7 @@
}
blockquote {
padding: 0.66001rem 1rem 1rem;
border-left: 4px solid #5a67d8;
border-left: 3px solid #5a67d8;
margin: 0;
}
blockquote p::before {
......@@ -62,16 +71,33 @@ blockquote p::before {
margin: 0 auto;
}
.headtitle {
padding-inline: 3rem;
padding-inline: 1rem;
}
.title {
font-size: clamp(1rem, 1.5rem + 2vw, 4rem);
font-size: clamp(1rem, 1.3rem + 2.5vw, 3.4rem);
margin: 0;
font-weight: 600;
color: var(--font-color-900);
}
.list-bold {
font-weight: bold;
}
h2,
h3 {
color: var(--font-color-900);
}
h2 {
font-size: clamp(1rem, 1rem + 2vw, 2rem);
}
@media (min-width: 802px) {
.headtitle {
padding-inline: 3rem;
}
.blog-content {
padding: 2rem;
padding: 3rem;
}
.blog-list ul {
padding-inline: 3rem;
}
.tag {
gap: 1rem;
......
app/globals.css
......@@ -16,6 +16,7 @@
--bg-grey: #f4f4f4;
--bg-lightgrey: #f8f9fa;
--btn-bg: #e2e8f0;
--font-color-700: black;
}
.dark {
--bg-color: black;
......@@ -23,6 +24,7 @@
--font-color-300: #b7b7b7;
--font-color-900: #fff;
--title-color: #fff;
--font-color-700: #fff;
}
body,
......
package-lock.json
......@@ -8,6 +8,9 @@
"name": "next-blog",
"version": "0.1.0",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"gray-matter": "^4.0.3",
"next": "14.0.2",
"next-themes": "^0.2.1",
......@@ -2520,6 +2523,51 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
"integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
"integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
"integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/react-fontawesome": {
"version": "0.1.19",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
"integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
"dependencies": {
"prop-types": "^15.8.1"
},
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"react": ">=16.x"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.13",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
......@@ -13660,7 +13708,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
......@@ -14496,7 +14543,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"dependencies": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
......@@ -14899,8 +14945,7 @@
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-markdown": {
"version": "9.0.1",
......
package.json
......@@ -11,6 +11,9 @@
"build-storybook": "storybook build"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"gray-matter": "^4.0.3",
"next": "14.0.2",
"next-themes": "^0.2.1",
......
stories/single-blog.stories.js
......@@ -30,19 +30,26 @@ singleBlog.args = {
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.
Fusce faucibus ante vitae justo efficitur elementum.Donec et ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce
faucibus ante vitae justo efficitur sed et elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
vitae justo efficitur elementum.Donec ipsum faucibus arcu vitae justo efficitur elementum.
Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus
ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.
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!
Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo.ac purus semper.
Fusce faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu elementum..
## 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.
Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu elementum ,luctus justo. ac purus semper.Fusce faucibus ante
vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu Donec ipsum faucibus ipsum arcu elementum ,luctus justo. ac purus semper.
1. Quisque sagittis lacus eu lorem sodalesd enean adipiscing.
2. Donec ipsum faucibus arcu elementum, luctus justo.
......@@ -51,7 +58,8 @@ Simply fill the tray or box with sand and place in the rocks and crystals then t
## 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.
Lorem faucibus fusce ante vitae justo efficitur elementum.Donec ipsum faucibus arcu ipsum elementum ,luctus justo. ac purus semper.Fusce faucibus ante
vitae justo efficitur elementum.Donec et ipsum faucibus.Donec et ipsum faucibus arcu.
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.`,
Fusce faucibus arcu faucibus ante vitae justo efficitur elementum.Donec ipsum faucibus.Donec ipsum faucibus arcu.`,
};
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