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'
const ThemeDecorator = (Story: any, context: any) => {
const backgroundValue = context.globals.backgrounds?.value
console.log(backgroundValue,"backgroundValue")
// Determine theme based on background value
const theme = backgroundValue == 'dark' ? 'dark-theme' : ''
useEffect(() => {
// Update document root attributes
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])
return Story()
}
......@@ -42,7 +32,6 @@ const preview: Preview = {
}
},
// Add the theme decorator
decorators: [ThemeDecorator],
initialGlobals: {
......
src/app/globals.css
......@@ -17,4 +17,5 @@
html,
body {
margin: 0;
/* background-color: var(--secondary-bg-color); */
}
src/components/Base/Button/Button.module.css
......@@ -89,6 +89,11 @@
pointer-events: none;
}
.storyTitle {
color: var(--primary-text-color);
font-family: "Inter-Medium";
}
@keyframes rotate {
0% {
transform: rotate(0deg);
......
src/components/Base/Button/Button.stories.tsx
......@@ -10,7 +10,7 @@ export const Primary = {
render: () => {
return (
<>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Size</h2>
<h2 className={styles.storyTitle}>Size</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm">
Small
......@@ -22,7 +22,7 @@ export const Primary = {
Large
</Button>
</section>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Loader</h2>
<h2 className={styles.storyTitle}>Loader</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm" loading={true}>
Button
......@@ -34,7 +34,7 @@ export const Primary = {
Button
</Button>
</section>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Disabled</h2>
<h2 className={styles.storyTitle}>Disabled</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm" disabled={true}>
Button
......@@ -46,9 +46,7 @@ export const Primary = {
Button
</Button>
</section>
<h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>
Loader and Disabled
</h2>
<h2 className={styles.storyTitle}>Loader and Disabled</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm" loading={true} disabled={true}>
Button
......@@ -60,64 +58,13 @@ export const Primary = {
Button
</Button>
</section>
</>
);
},
};
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>
<h2 className={styles.storyTitle}>Pagination Next & Prev</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="secondary" size="sm" loading={true}>
Button
</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 variant="primary" size="md">
{"<<Prev"}
</Button>
<Button variant="secondary" size="lg" loading={true} disabled={true}>
Button
<Button variant="primary" size="md">
{"Next>>"}
</Button>
</section>
</>
......
src/components/Shared/Pagination/Pagination.module.css
......@@ -6,7 +6,7 @@
flex-wrap: wrap;
font-family: "Inter-Medium";
background-color: var(--secondary-bg-color);
padding-bottom: 2rem;
padding: 2rem;
}
.button {
......
src/components/TopLevel/BlogDetail/BlogDetail.module.css
......@@ -4,10 +4,11 @@ article {
}
.title-section {
font-family: "Playfair-Medium";
width: 90%;
font-size: 26px;
margin: 0 auto;
max-width: 85%;
font-size: 30px;
color: var(--primary-text-color);
box-sizing: border-box;
padding-left: 3rem;
}
.meta-container {
display: flex;
......@@ -18,16 +19,23 @@ article {
.img-section {
border-radius: 10px;
padding: 2rem 0;
width: 100%;
}
.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 {
padding: 2rem;
font-family: "Inter-Medium";
border-radius: 10px;
width: 100%;
border-radius: 15px;
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
box-sizing: border-box;
}
src/components/TopLevel/CardList/Card/Card.module.css
......@@ -79,3 +79,8 @@
.author-avatar {
border-radius: 50%;
}
.customLink {
text-decoration: none;
color: inherit;
}
src/components/TopLevel/CardList/Card/Card.stories.tsx
......@@ -12,11 +12,9 @@ export const Default = {
cardTitle:
"Lorem ipsum dolor adipiscing amet Lorem ipsum dolor adipiscing amet ",
cardDescription: "Lorem ipsum dolor adipiscing amet, consectetur sit .",
author: {
postedDate: "July 20, 2025.",
authorName: "Abdul Rahman ",
readTime: "1 min",
},
img: "https://placehold.co/350x200",
authorName: "Abdul Rahman",
postedDate: "July 10, 2025",
readTime: "2",
imgUrl: "https://picsum.photos/350/300",
},
};
src/components/TopLevel/CardList/Card/Card.tsx
import styles from "./Card.module.css";
import clock from "../../../../../public/imgaes/clock.svg";
import Image from "next/image";
import Link from "next/link";
function Card({
imgUrl,
cardTitle,
......@@ -9,40 +10,41 @@ function Card({
postedDate,
readTime,
}: any) {
console.log(imgUrl, "imgUrl");
return (
<article className={styles.card}>
<img
className={styles["card-avatar"]}
src={`http://localhost:1337${imgUrl}`}
alt="Author photo"
/>
<section className={styles["card-content"]}>
<h3 className={styles["card-title"]}>{cardTitle}</h3>
<p className={styles["card-description"]}>{cardDescription}</p>
</section>
<footer className={styles["card-footer"]}>
<div className={styles["author-details"]}>
<div>
<img
src="https://picsum.photos/55/55"
alt="Author photo"
className={styles["author-avatar"]}
/>
</div>
<div className="author-info">
<div className={styles["author-name"]}>{authorName}</div>
<div className={styles["post-info"]}>
<div>{postedDate}.</div>
<div className={styles.readtimeWrapper}>
<Image width={20} src={clock} alt="img" />
{readTime} min
<Link href={"/"} className={styles.customLink}>
<article className={styles.card}>
<img
className={styles["card-avatar"]}
src={imgUrl}
alt="Author photo"
/>
<section className={styles["card-content"]}>
<h3 className={styles["card-title"]}>{cardTitle}</h3>
<p className={styles["card-description"]}>{cardDescription}</p>
</section>
<footer className={styles["card-footer"]}>
<div className={styles["author-details"]}>
<div>
<img
src="https://picsum.photos/55/55"
alt="Author photo"
className={styles["author-avatar"]}
/>
</div>
<div className="author-info">
<div className={styles["author-name"]}>{authorName}</div>
<div className={styles["post-info"]}>
<div>{postedDate}.</div>
<div className={styles.readtimeWrapper}>
<Image width={20} src={clock} alt="img" />
{readTime} min
</div>
</div>
</div>
</div>
</div>
</footer>
</article>
</footer>
</article>
</Link>
);
}
......
src/components/TopLevel/CardList/CardWrapper/CardWrapper.stories.tsx
......@@ -5,5 +5,267 @@ export 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) {
cardTitle={ele.Title}
cardDescription={ele.Description}
authorName={ele.Author}
imgUrl={ele.Image.url}
imgUrl={`http://localhost:1337${ele.Image.url}`}
postedDate={ele.PostedOn}
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