Skip to content

B
blog-app
Commit 45c0c52a by Syed Abdul Rahman
Options

changes in story book

parent 2998de23
Showing with 334 additions and 117 deletions
.storybook/preview.ts
...@@ -4,20 +4,10 @@ import '../src/app/fonts.css' ...@@ -4,20 +4,10 @@ import '../src/app/fonts.css'
const ThemeDecorator = (Story: any, context: any) => { const ThemeDecorator = (Story: any, context: any) => {
const backgroundValue = context.globals.backgrounds?.value const backgroundValue = context.globals.backgrounds?.value
console.log(backgroundValue,"backgroundValue")
// Determine theme based on background value
const theme = backgroundValue == 'dark' ? 'dark-theme' : '' const theme = backgroundValue == 'dark' ? 'dark-theme' : ''
useEffect(() => { useEffect(() => {
// Update document root attributes
document.documentElement.setAttribute('data-theme', theme) document.documentElement.setAttribute('data-theme', theme)
// Update body attributes
// document.body.setAttribute('data-theme', theme)
// You can also update specific elements if needed
console.log("happening")
}, [theme]) }, [theme])
return Story() return Story()
} }
...@@ -42,7 +32,6 @@ const preview: Preview = { ...@@ -42,7 +32,6 @@ const preview: Preview = {
} }
}, },
// Add the theme decorator
decorators: [ThemeDecorator], decorators: [ThemeDecorator],
initialGlobals: { initialGlobals: {
......
src/app/globals.css
...@@ -17,4 +17,5 @@ ...@@ -17,4 +17,5 @@
html, html,
body { body {
margin: 0; margin: 0;
/* background-color: var(--secondary-bg-color); */
} }
src/components/Base/Button/Button.module.css
...@@ -89,6 +89,11 @@ ...@@ -89,6 +89,11 @@
pointer-events: none; pointer-events: none;
} }
.storyTitle {
color: var(--primary-text-color);
font-family: "Inter-Medium";
}
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
......
src/components/Base/Button/Button.stories.tsx
...@@ -10,7 +10,7 @@ export const Primary = { ...@@ -10,7 +10,7 @@ export const Primary = {
render: () => { render: () => {
return ( return (
<> <>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Size</h2> <h2 className={styles.storyTitle}>Size</h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm"> <Button variant="primary" size="sm">
Small Small
...@@ -22,7 +22,7 @@ export const Primary = { ...@@ -22,7 +22,7 @@ export const Primary = {
Large Large
</Button> </Button>
</section> </section>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Loader</h2> <h2 className={styles.storyTitle}>Loader</h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm" loading={true}> <Button variant="primary" size="sm" loading={true}>
Button Button
...@@ -34,7 +34,7 @@ export const Primary = { ...@@ -34,7 +34,7 @@ export const Primary = {
Button Button
</Button> </Button>
</section> </section>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Disabled</h2> <h2 className={styles.storyTitle}>Disabled</h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm" disabled={true}> <Button variant="primary" size="sm" disabled={true}>
Button Button
...@@ -46,9 +46,7 @@ export const Primary = { ...@@ -46,9 +46,7 @@ export const Primary = {
Button Button
</Button> </Button>
</section> </section>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}> <h2 className={styles.storyTitle}>Loader and Disabled</h2>
Loader and Disabled
</h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm" loading={true} disabled={true}> <Button variant="primary" size="sm" loading={true} disabled={true}>
Button Button
...@@ -60,64 +58,13 @@ export const Primary = { ...@@ -60,64 +58,13 @@ export const Primary = {
Button Button
</Button> </Button>
</section> </section>
</> <h2 className={styles.storyTitle}>Pagination Next & Prev</h2>
);
},
};
export const Secondary = {
args: {},
render: () => {
return (
<>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Size</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="secondary" size="sm">
Small
</Button>
<Button variant="secondary" size="md">
Medium
</Button>
<Button variant="secondary" size="lg">
Large
</Button>
</section>
<h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>Loader</h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
<Button variant="secondary" size="sm" loading={true}> <Button variant="primary" size="md">
Button {"<<Prev"}
</Button>
<Button variant="secondary" size="md" loading={true}>
Button
</Button>
<Button variant="secondary" size="lg" loading={true}>
Button
</Button>
</section>
<h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>Disabled</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="secondary" size="sm" disabled={true}>
Button
</Button>
<Button variant="secondary" size="md" disabled={true}>
Button
</Button>
<Button variant="secondary" size="lg" disabled={true}>
Button
</Button>
</section>
<h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>
Loader and Disabled
</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="secondary" size="sm" loading={true} disabled={true}>
Button
</Button>
<Button variant="secondary" size="md" loading={true} disabled={true}>
Button
</Button> </Button>
<Button variant="secondary" size="lg" loading={true} disabled={true}> <Button variant="primary" size="md">
Button {"Next>>"}
</Button> </Button>
</section> </section>
</> </>
......
src/components/Shared/Pagination/Pagination.module.css
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
flex-wrap: wrap; flex-wrap: wrap;
font-family: "Inter-Medium"; font-family: "Inter-Medium";
background-color: var(--secondary-bg-color); background-color: var(--secondary-bg-color);
padding-bottom: 2rem; padding: 2rem;
} }
.button { .button {
......
src/components/TopLevel/BlogDetail/BlogDetail.module.css
...@@ -4,10 +4,11 @@ article { ...@@ -4,10 +4,11 @@ article {
} }
.title-section { .title-section {
font-family: "Playfair-Medium"; font-family: "Playfair-Medium";
width: 90%; max-width: 85%;
font-size: 26px; font-size: 30px;
margin: 0 auto;
color: var(--primary-text-color); color: var(--primary-text-color);
box-sizing: border-box;
padding-left: 3rem;
} }
.meta-container { .meta-container {
display: flex; display: flex;
...@@ -18,16 +19,23 @@ article { ...@@ -18,16 +19,23 @@ article {
.img-section { .img-section {
border-radius: 10px; border-radius: 10px;
padding: 2rem 0; padding: 2rem 0;
width: 100%;
} }
.img-section img { .img-section img {
border-radius: 10px; border-radius: 15px;
object-fit: stretch;
width: 100%;
object-fit: cover; /* or 'fill' / 'contain' based on need */
display: block;
} }
.markdown-section { .markdown-section {
padding: 2rem; padding: 2rem;
font-family: "Inter-Medium"; font-family: "Inter-Medium";
border-radius: 10px; width: 100%;
border-radius: 15px;
background-color: var(--primary-bg-color); background-color: var(--primary-bg-color);
color: var(--primary-text-color); color: var(--primary-text-color);
box-sizing: border-box;
} }
src/components/TopLevel/CardList/Card/Card.module.css
...@@ -79,3 +79,8 @@ ...@@ -79,3 +79,8 @@
.author-avatar { .author-avatar {
border-radius: 50%; border-radius: 50%;
} }
.customLink {
text-decoration: none;
color: inherit;
}
src/components/TopLevel/CardList/Card/Card.stories.tsx
...@@ -12,11 +12,9 @@ export const Default = { ...@@ -12,11 +12,9 @@ export const Default = {
cardTitle: cardTitle:
"Lorem ipsum dolor adipiscing amet Lorem ipsum dolor adipiscing amet ", "Lorem ipsum dolor adipiscing amet Lorem ipsum dolor adipiscing amet ",
cardDescription: "Lorem ipsum dolor adipiscing amet, consectetur sit .", cardDescription: "Lorem ipsum dolor adipiscing amet, consectetur sit .",
author: { authorName: "Abdul Rahman",
postedDate: "July 20, 2025.", postedDate: "July 10, 2025",
authorName: "Abdul Rahman ", readTime: "2",
readTime: "1 min", imgUrl: "https://picsum.photos/350/300",
},
img: "https://placehold.co/350x200",
}, },
}; };
src/components/TopLevel/CardList/Card/Card.tsx
import styles from "./Card.module.css"; import styles from "./Card.module.css";
import clock from "../../../../../public/imgaes/clock.svg"; import clock from "../../../../../public/imgaes/clock.svg";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
function Card({ function Card({
imgUrl, imgUrl,
cardTitle, cardTitle,
...@@ -9,40 +10,41 @@ function Card({ ...@@ -9,40 +10,41 @@ function Card({
postedDate, postedDate,
readTime, readTime,
}: any) { }: any) {
console.log(imgUrl, "imgUrl");
return ( return (
<article className={styles.card}> <Link href={"/"} className={styles.customLink}>
<img <article className={styles.card}>
className={styles["card-avatar"]} <img
src={`http://localhost:1337${imgUrl}`} className={styles["card-avatar"]}
alt="Author photo" src={imgUrl}
/> alt="Author photo"
<section className={styles["card-content"]}> />
<h3 className={styles["card-title"]}>{cardTitle}</h3> <section className={styles["card-content"]}>
<p className={styles["card-description"]}>{cardDescription}</p> <h3 className={styles["card-title"]}>{cardTitle}</h3>
</section> <p className={styles["card-description"]}>{cardDescription}</p>
<footer className={styles["card-footer"]}> </section>
<div className={styles["author-details"]}> <footer className={styles["card-footer"]}>
<div> <div className={styles["author-details"]}>
<img <div>
src="https://picsum.photos/55/55" <img
alt="Author photo" src="https://picsum.photos/55/55"
className={styles["author-avatar"]} alt="Author photo"
/> className={styles["author-avatar"]}
</div> />
<div className="author-info"> </div>
<div className={styles["author-name"]}>{authorName}</div> <div className="author-info">
<div className={styles["post-info"]}> <div className={styles["author-name"]}>{authorName}</div>
<div>{postedDate}.</div> <div className={styles["post-info"]}>
<div className={styles.readtimeWrapper}> <div>{postedDate}.</div>
<Image width={20} src={clock} alt="img" /> <div className={styles.readtimeWrapper}>
{readTime} min <Image width={20} src={clock} alt="img" />
{readTime} min
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </footer>
</footer> </article>
</article> </Link>
); );
} }
......
src/components/TopLevel/CardList/CardWrapper/CardWrapper.stories.tsx
...@@ -5,5 +5,267 @@ export default { ...@@ -5,5 +5,267 @@ export default {
}; };
export const Default = { export const Default = {
args: {}, args: {
cardData: [
{
id: 8,
documentId: "fqa6vxzyuxh2hq3rl6593z7y",
Title: "Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.",
Description:
"Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.",
PostedOn: "2025-06-26",
Author: "Lorem ipsum dolor sit amet.",
ReadingTime: "3",
Markdown: [
{
type: "paragraph",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet.",
},
],
},
],
createdAt: "2025-06-26T07:13:19.655Z",
updatedAt: "2025-06-26T07:13:26.221Z",
publishedAt: "2025-06-26T07:13:26.264Z",
isActive: null,
Image: {
id: 12,
documentId: "w139b3tgtypkdy81txe0ahp7",
name: "Screenshot 2025-06-18 180957.png",
alternativeText: null,
caption: null,
width: 345,
height: 97,
formats: {
thumbnail: {
name: "thumbnail_Screenshot 2025-06-18 180957.png",
hash: "thumbnail_Screenshot_2025_06_18_180957_0a166e6e43",
ext: ".png",
mime: "image/png",
path: null,
width: 245,
height: 69,
size: 16.03,
sizeInBytes: 16028,
url: "http:localhost:1337/uploads/thumbnail_Screenshot_2025_06_18_180957_0a166e6e43.png",
},
},
hash: "Screenshot_2025_06_18_180957_0a166e6e43",
ext: ".png",
mime: "image/png",
size: 5.27,
url: "/uploads/Screenshot_2025_06_18_180957_0a166e6e43.png",
previewUrl: null,
provider: "local",
provider_metadata: null,
createdAt: "2025-06-26T07:09:55.662Z",
updatedAt: "2025-06-26T07:13:08.914Z",
publishedAt: "2025-06-26T07:09:55.662Z",
},
},
{
id: 9,
documentId: "o8p2y40yro8m9xfy1gsy1v4d",
Title: "Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.",
Description:
"Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.",
PostedOn: "2025-06-26",
Author: "Lorem ipsum dolor sit amet.",
ReadingTime: "3",
Markdown: [
{
type: "paragraph",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet.",
},
],
},
],
createdAt: "2025-06-26T07:13:19.447Z",
updatedAt: "2025-06-26T07:13:34.982Z",
publishedAt: "2025-06-26T07:13:35.003Z",
isActive: null,
Image: {
id: 12,
documentId: "w139b3tgtypkdy81txe0ahp7",
name: "Screenshot 2025-06-18 180957.png",
alternativeText: null,
caption: null,
width: 345,
height: 97,
formats: {
thumbnail: {
name: "thumbnail_Screenshot 2025-06-18 180957.png",
hash: "thumbnail_Screenshot_2025_06_18_180957_0a166e6e43",
ext: ".png",
mime: "image/png",
path: null,
width: 245,
height: 69,
size: 16.03,
sizeInBytes: 16028,
url: "/uploads/thumbnail_Screenshot_2025_06_18_180957_0a166e6e43.png",
},
},
hash: "Screenshot_2025_06_18_180957_0a166e6e43",
ext: ".png",
mime: "image/png",
size: 5.27,
url: "/uploads/Screenshot_2025_06_18_180957_0a166e6e43.png",
previewUrl: null,
provider: "local",
provider_metadata: null,
createdAt: "2025-06-26T07:09:55.662Z",
updatedAt: "2025-06-26T07:13:08.914Z",
publishedAt: "2025-06-26T07:09:55.662Z",
},
},
{
id: 11,
documentId: "mbfbtudj2xs56a1w97jitfrx",
Title:
"Target Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur posuere sodales. Ut et lectus volutpat",
Description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur posuere sodales. Ut et lectus volutpatLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur posuere sodales. Ut et lectus volutpat",
PostedOn: "2025-06-26",
Author: "Abdul",
ReadingTime: "3",
Markdown: [
{
type: "heading",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet: ",
},
],
level: 1,
},
{
type: "paragraph",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur posuere sodales. Ut et lectus volutpat",
},
],
},
{
type: "list",
format: "unordered",
children: [
{
type: "list-item",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
},
],
},
{
type: "list-item",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet.",
},
],
},
{
type: "list-item",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet.",
},
],
},
{
type: "list-item",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet.",
},
],
},
],
},
{
type: "paragraph",
children: [
{
type: "text",
text: "",
},
],
},
{
type: "paragraph",
children: [
{
text: "Lorem ipsum dolor sit amet.",
type: "text",
bold: true,
},
],
},
{
type: "heading",
children: [
{
type: "text",
text: "Lorem ipsum dolor sit amet.",
},
],
level: 3,
},
],
createdAt: "2025-06-26T06:41:10.002Z",
updatedAt: "2025-06-26T12:24:23.915Z",
publishedAt: "2025-06-26T12:24:23.958Z",
isActive: null,
Image: {
id: 12,
documentId: "w139b3tgtypkdy81txe0ahp7",
name: "Screenshot 2025-06-18 180957.png",
alternativeText: null,
caption: null,
width: 345,
height: 97,
formats: {
thumbnail: {
name: "thumbnail_Screenshot 2025-06-18 180957.png",
hash: "thumbnail_Screenshot_2025_06_18_180957_0a166e6e43",
ext: ".png",
mime: "image/png",
path: null,
width: 245,
height: 69,
size: 16.03,
sizeInBytes: 16028,
url: "http:localhost:1337/uploads/thumbnail_Screenshot_2025_06_18_180957_0a166e6e43.png",
},
},
hash: "Screenshot_2025_06_18_180957_0a166e6e43",
ext: ".png",
mime: "image/png",
size: 5.27,
url: "/uploads/Screenshot_2025_06_18_180957_0a166e6e43.png",
previewUrl: null,
provider: "local",
provider_metadata: null,
createdAt: "2025-06-26T07:09:55.662Z",
updatedAt: "2025-06-26T07:13:08.914Z",
publishedAt: "2025-06-26T07:09:55.662Z",
},
},
],
},
}; };
src/components/TopLevel/CardList/CardWrapper/CardWrapper.tsx
...@@ -85,7 +85,7 @@ function CardWrapper({ cardData }: any) { ...@@ -85,7 +85,7 @@ function CardWrapper({ cardData }: any) {
cardTitle={ele.Title} cardTitle={ele.Title}
cardDescription={ele.Description} cardDescription={ele.Description}
authorName={ele.Author} authorName={ele.Author}
imgUrl={ele.Image.url} imgUrl={`http://localhost:1337${ele.Image.url}`}
postedDate={ele.PostedOn} postedDate={ele.PostedOn}
readTime={ele.ReadingTime} readTime={ele.ReadingTime}
/> />
......
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