Skip to content

B
blog-app
Commit 2998de23 by Syed Abdul Rahman
Options

dark theme implemented

parent 16708e12
Showing with 338 additions and 105 deletions
.storybook/preview.ts
...@@ -2,24 +2,23 @@ import type { Preview } from '@storybook/nextjs' ...@@ -2,24 +2,23 @@ import type { Preview } from '@storybook/nextjs'
import { useEffect } from 'react' import { useEffect } from 'react'
import '../src/app/fonts.css' import '../src/app/fonts.css'
// Decorator to handle theme changes and update HTML attributes
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") console.log(backgroundValue,"backgroundValue")
// Determine theme based on background value // Determine theme based on background value
const theme = backgroundValue === 'dark' ? 'dark-theme' : 'light-theme' const theme = backgroundValue == 'dark' ? 'dark-theme' : ''
useEffect(() => { useEffect(() => {
// Update document root attributes // Update document root attributes
document.documentElement.setAttribute('data-theme', theme) document.documentElement.setAttribute('data-theme', theme)
// Update body attributes // Update body attributes
document.body.setAttribute('data-theme', theme) // document.body.setAttribute('data-theme', theme)
// You can also update specific elements if needed // You can also update specific elements if needed
}, [theme])
console.log("happening") console.log("happening")
}, [theme])
return Story() return Story()
} }
...@@ -47,7 +46,7 @@ const preview: Preview = { ...@@ -47,7 +46,7 @@ const preview: Preview = {
decorators: [ThemeDecorator], decorators: [ThemeDecorator],
initialGlobals: { initialGlobals: {
backgrounds: { value: '#ffe788' }, backgrounds: { value: 'white' },
}, },
} }
......
package-lock.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"name": "blog-app", "name": "blog-app",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"axios": "^1.10.0",
"next": "15.3.4", "next": "15.3.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
...@@ -5216,6 +5217,12 @@ ...@@ -5216,6 +5217,12 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
"license": "MIT"
},
"node_modules/available-typed-arrays": { "node_modules/available-typed-arrays": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
...@@ -5242,6 +5249,17 @@ ...@@ -5242,6 +5249,17 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/axios": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
"integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axobject-query": { "node_modules/axobject-query": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
...@@ -5799,7 +5817,6 @@ ...@@ -5799,7 +5817,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"es-errors": "^1.3.0", "es-errors": "^1.3.0",
...@@ -6071,6 +6088,18 @@ ...@@ -6071,6 +6088,18 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"license": "MIT",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": { "node_modules/commander": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
...@@ -6542,6 +6571,15 @@ ...@@ -6542,6 +6571,15 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"license": "MIT",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/dequal": { "node_modules/dequal": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
...@@ -6711,7 +6749,6 @@ ...@@ -6711,7 +6749,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"call-bind-apply-helpers": "^1.0.1", "call-bind-apply-helpers": "^1.0.1",
...@@ -6915,7 +6952,6 @@ ...@@ -6915,7 +6952,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
...@@ -6925,7 +6961,6 @@ ...@@ -6925,7 +6961,6 @@
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
...@@ -6970,7 +7005,6 @@ ...@@ -6970,7 +7005,6 @@
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"es-errors": "^1.3.0" "es-errors": "^1.3.0"
...@@ -6983,7 +7017,6 @@ ...@@ -6983,7 +7017,6 @@
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"es-errors": "^1.3.0", "es-errors": "^1.3.0",
...@@ -7768,6 +7801,26 @@ ...@@ -7768,6 +7801,26 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": { "node_modules/for-each": {
"version": "0.3.5", "version": "0.3.5",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
...@@ -7832,6 +7885,22 @@ ...@@ -7832,6 +7885,22 @@
"url": "https://opencollective.com/webpack" "url": "https://opencollective.com/webpack"
} }
}, },
"node_modules/form-data": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
"integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"es-set-tostringtag": "^2.1.0",
"hasown": "^2.0.2",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs-extra": { "node_modules/fs-extra": {
"version": "10.1.0", "version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
...@@ -7880,7 +7949,6 @@ ...@@ -7880,7 +7949,6 @@
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
...@@ -7931,7 +7999,6 @@ ...@@ -7931,7 +7999,6 @@
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"call-bind-apply-helpers": "^1.0.2", "call-bind-apply-helpers": "^1.0.2",
...@@ -7956,7 +8023,6 @@ ...@@ -7956,7 +8023,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"dunder-proto": "^1.0.1", "dunder-proto": "^1.0.1",
...@@ -8073,7 +8139,6 @@ ...@@ -8073,7 +8139,6 @@
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
...@@ -8152,7 +8217,6 @@ ...@@ -8152,7 +8217,6 @@
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
...@@ -8165,7 +8229,6 @@ ...@@ -8165,7 +8229,6 @@
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"has-symbols": "^1.0.3" "has-symbols": "^1.0.3"
...@@ -8206,7 +8269,6 @@ ...@@ -8206,7 +8269,6 @@
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"function-bind": "^1.1.2" "function-bind": "^1.1.2"
...@@ -9323,7 +9385,6 @@ ...@@ -9323,7 +9385,6 @@
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
...@@ -9410,7 +9471,6 @@ ...@@ -9410,7 +9471,6 @@
"version": "1.52.0", "version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
...@@ -9420,7 +9480,6 @@ ...@@ -9420,7 +9480,6 @@
"version": "2.1.35", "version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"mime-db": "1.52.0" "mime-db": "1.52.0"
...@@ -10485,6 +10544,12 @@ ...@@ -10485,6 +10544,12 @@
"react-is": "^16.13.1" "react-is": "^16.13.1"
} }
}, },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/public-encrypt": { "node_modules/public-encrypt": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz", "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
......
package.json
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
"build-storybook": "storybook build" "build-storybook": "storybook build"
}, },
"dependencies": { "dependencies": {
"axios": "^1.10.0",
"next": "15.3.4", "next": "15.3.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0" "react-dom": "^19.0.0"
......
public/imgaes/clear-icon.svg
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/> <g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M8 8L16 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 8L8 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g> <g id="SVGRepo_iconCarrier"> <path d="M8 8L16 16" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 8L8 16" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg> </svg>
\ No newline at end of file
......
public/imgaes/clock.svg 0 → 100644
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#a3a3a3">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path d="M12 7V12L10.5 14.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#aeadad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
</svg>
\ No newline at end of file
src/app/globals.css
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
--secondary-bg-color: #f8f9fa; --secondary-bg-color: #f8f9fa;
--primary-text-color: #2d3748; --primary-text-color: #2d3748;
--secondary-text-color: #9d99b3; --secondary-text-color: #9d99b3;
--disabled-button-bg: rgba(115, 40, 255, 0.26);
} }
[data-theme="dark-theme"] { [data-theme="dark-theme"] {
...@@ -10,8 +11,10 @@ ...@@ -10,8 +11,10 @@
--secondary-bg-color: #0b0d0e; --secondary-bg-color: #0b0d0e;
--primary-text-color: #e4e4e4; --primary-text-color: #e4e4e4;
--secondary-text-color: #8fa2ae; --secondary-text-color: #8fa2ae;
--disabled-button-bg: rgba(193, 180, 216, 0.516);
} }
html, html,
body { body {
margin: 0;
} }
src/app/page.tsx
import Image from "next/image"; "use client";
import styles from "./page.module.css"; import CardWrapper from "@/components/TopLevel/CardList/CardWrapper/CardWrapper";
import Header from "@/components/Layout/Header/Header"; import Pagination from "@/components/Shared/Pagination/Pagination";
import { useEffect, useState } from "react";
import { getBlogPosts } from "@/lib/Api";
export default function Home() { export default function Home() {
return <div className={styles.page}></div>; const [currentPage, setCurrentPage] = useState(1);
const [posts, setPosts] = useState<any>();
useEffect(() => {
fetchPost();
}, []);
const fetchPost = async () => {
try {
const response = await getBlogPosts();
console.log("response", response);
setPosts(response);
} catch (err) {
console.log(err, "error while fetching data");
}
};
const handlePageChange = (page: any) => {
setCurrentPage(page);
};
return (
<>
<CardWrapper cardData={posts} />
<Pagination
currentPage={currentPage}
totalPages={8}
onPageChange={handlePageChange}
/>
</>
);
} }
src/components/Base/Button/Button.module.css
...@@ -7,9 +7,9 @@ ...@@ -7,9 +7,9 @@
.button { .button {
border: 0; border: 0;
font-family: "Inter-Medium"; font-family: "Inter-Bold";
cursor: pointer; cursor: pointer;
border-radius: 10px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
.primary:hover { .primary:hover {
color: white; color: white;
background-color: rgb(115, 40, 255) !important; background-color: rgb(115, 101, 243) !important;
} }
.secondary { .secondary {
...@@ -50,13 +50,13 @@ ...@@ -50,13 +50,13 @@
} }
.lg { .lg {
padding: 1rem 2.2rem; padding: 1rem 2.3rem;
font-size: 18px; font-size: 18px;
} }
.button-active { .button-active {
color: white; color: white;
background-color: rgb(115, 40, 255); background-color: rgb(115, 101, 243);
} }
.loader { .loader {
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
} }
.disabled { .disabled {
background-color: rgba(115, 40, 255, 0.26); background-color: var(--disabled-button-bg);
color: gray; color: gray;
pointer-events: none; pointer-events: none;
} }
......
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: "gray" }}>Size</h2> <h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>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: "gray" }}>Loader</h2> <h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>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: "gray" }}>Disabled</h2> <h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>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,7 +46,7 @@ export const Primary = { ...@@ -46,7 +46,7 @@ export const Primary = {
Button Button
</Button> </Button>
</section> </section>
<h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}> <h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>
Loader and Disabled Loader and Disabled
</h2> </h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
...@@ -70,7 +70,7 @@ export const Secondary = { ...@@ -70,7 +70,7 @@ export const Secondary = {
render: () => { render: () => {
return ( return (
<> <>
<h2 style={{ fontFamily: "Inter-Medium", color: "gray" }}>Size</h2> <h2 style={{ fontFamily: "Inter-Medium", color: "black" }}>Size</h2>
<section className={styles["btn-wrapper"]}> <section className={styles["btn-wrapper"]}>
<Button variant="secondary" size="sm"> <Button variant="secondary" size="sm">
Small Small
......
src/components/Base/Input/Input.module.css
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
height: 12px; height: 12px;
width: 100%; width: 100%;
font-size: 15px; font-size: 15px;
color: black; color: var(--primary-text-color);
background-color: var(--secondary-bg-color); background-color: var(--secondary-bg-color);
padding: 1.1rem 0; padding: 1.1rem 0;
font-family: "Inter-Medium"; font-family: "Inter-Medium";
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
} }
.input::placeholder { .input::placeholder {
color: rgba(128, 128, 128, 0.605); color: var(--secondary-text-color);
} }
.label { .label {
......
src/components/Base/Input/Input.stories.tsx
import Input from "./Input"; import Input from "./Input";
import { useState } from "react";
export default { export default {
title: "Components/Base/Input", title: "Components/Base/Input",
component: Input, component: Input,
tags: ["autodocs"], tags: ["autodocs"],
argTypes: { argTypes: {
onChange: { action: "On Input Change" }, onEnter: { action: "Entered Value:: " },
}, },
}; };
export const Default = { export const Default = (args: any) => {
args: { const [value, setValue] = useState("");
placeholder: "Discover news, articles and more..", return (
value: "", <Input
error: false, {...args}
}, value={value}
placeholder="Discover news, articles and more..."
onChange={(e) => setValue(e.target.value)}
onClear={() => setValue("")}
/>
);
}; };
src/components/Base/Input/Input.tsx
...@@ -7,6 +7,7 @@ type InputProps = { ...@@ -7,6 +7,7 @@ type InputProps = {
label?: string; label?: string;
error?: boolean; error?: boolean;
onClear?: () => void; onClear?: () => void;
onEnter?: (value: string) => void;
} & React.InputHTMLAttributes<HTMLInputElement>; } & React.InputHTMLAttributes<HTMLInputElement>;
export default function Input({ export default function Input({
...@@ -14,8 +15,15 @@ export default function Input({ ...@@ -14,8 +15,15 @@ export default function Input({
onClear, onClear,
value, value,
error, error,
onEnter,
...props ...props
}: InputProps) { }: InputProps) {
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
console.log("Entered value:", value);
onEnter?.(value as string);
}
};
return ( return (
<> <>
{label && <div className={styles.label}>{label}</div>} {label && <div className={styles.label}>{label}</div>}
...@@ -56,6 +64,7 @@ export default function Input({ ...@@ -56,6 +64,7 @@ export default function Input({
value != "" ? styles["input-spl"] : styles["input-style"] value != "" ? styles["input-spl"] : styles["input-style"]
}`} }`}
value={value} value={value}
onKeyDown={handleKeyDown}
name="input" name="input"
{...props} {...props}
/> />
......
src/components/Layout/Header/Header.module.css
...@@ -9,6 +9,9 @@ ...@@ -9,6 +9,9 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 1rem 0; padding: 1rem 0;
position: sticky;
top: 0;
scroll-behavior: smooth;
} }
.input-container { .input-container {
......
src/components/Layout/Header/Header.tsx
...@@ -6,7 +6,8 @@ import styles from "./Header.module.css"; ...@@ -6,7 +6,8 @@ import styles from "./Header.module.css";
import Image from "next/image"; import Image from "next/image";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
export default function Header() { export default function Header() {
const [isDark, setIsDark] = useState("light-theme"); const [isDark, setIsDark] = useState("");
const [searchValue, setSearchValue] = useState("");
const handleThemeToggle = () => { const handleThemeToggle = () => {
setIsDark((prev) => { setIsDark((prev) => {
...@@ -19,21 +20,31 @@ export default function Header() { ...@@ -19,21 +20,31 @@ export default function Header() {
}); });
}; };
useEffect(() => { const handleInputChange = (e: any) => {
console.log("triggered"); setSearchValue(e.target.value);
}, [isDark]); };
const handleSearchEnter = (e: string) => {
console.log(e);
};
return ( return (
<header className={styles["header-wrapper"]}> <header className={styles["header-wrapper"]}>
<div className={styles.headerTitle}>NewsBlog</div> <div className={styles.headerTitle}>NewsBlog</div>
<div className={styles["input-container"]}> <div className={styles["input-container"]}>
<Input placeholder={"Discover news, articles and more..."} value="" /> <Input
placeholder={"Discover news, articles and more..."}
value={searchValue}
onClear={() => setSearchValue("")}
onChange={handleInputChange}
onEnter={handleSearchEnter}
/>
</div> </div>
<div className={styles["theme-switcher"]} onClick={handleThemeToggle}> <div className={styles["theme-switcher"]} onClick={handleThemeToggle}>
{isDark == "dark-theme" ? ( {isDark == "dark-theme" ? (
<Image src={themeLogo} alt="image" width={25} /> <Image src={lightTheme} alt="image" width={25} />
) : ( ) : (
<Image src={lightTheme} alt="theme-img" width={25} /> <Image src={themeLogo} alt="theme-img" width={25} />
)} )}
</div> </div>
</header> </header>
......
src/components/Shared/Pagination/Pagination.module.css
...@@ -3,9 +3,10 @@ ...@@ -3,9 +3,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
margin-top: 20px;
flex-wrap: wrap; flex-wrap: wrap;
font-family: "Inter-Medium"; font-family: "Inter-Medium";
background-color: var(--secondary-bg-color);
padding-bottom: 2rem;
} }
.button { .button {
...@@ -15,6 +16,7 @@ ...@@ -15,6 +16,7 @@
color: #333; color: #333;
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
font-family: "Inter-Bold";
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
background: white; background: white;
} }
......
src/components/Shared/Pagination/Pagination.tsx
...@@ -55,26 +55,28 @@ export default function Pagination({ ...@@ -55,26 +55,28 @@ export default function Pagination({
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
{currentPage > 1 && ( {currentPage > 1 && (
<button <Button
variant="primary"
size="md"
onClick={() => onPageChange(currentPage - 1)} onClick={() => onPageChange(currentPage - 1)}
className={styles.button}
> >
« Prev « Prev
</button> </Button>
)} )}
{pages.map((page, index) => { {pages.map((page, index) => {
if (page === "prevDots" || page === "nextDots") { if (page === "prevDots" || page === "nextDots") {
return ( return (
<button <Button
variant="primary"
size="md"
key={`dots-${index}`} key={`dots-${index}`}
className={styles.dots}
onClick={() => onClick={() =>
handleDotsClick(page === "prevDots" ? "prev" : "next") handleDotsClick(page === "prevDots" ? "prev" : "next")
} }
> >
... ...
</button> </Button>
); );
} }
...@@ -82,7 +84,7 @@ export default function Pagination({ ...@@ -82,7 +84,7 @@ export default function Pagination({
<Button <Button
key={`page-${page}`} key={`page-${page}`}
variant="primary" variant="primary"
size="sm" size="md"
active={currentPage === page} active={currentPage === page}
onClick={() => onPageChange(page)} onClick={() => onPageChange(page)}
> >
...@@ -92,12 +94,13 @@ export default function Pagination({ ...@@ -92,12 +94,13 @@ export default function Pagination({
})} })}
{currentPage < totalPages && ( {currentPage < totalPages && (
<button <Button
variant="primary"
size="md"
onClick={() => onPageChange(currentPage + 1)} onClick={() => onPageChange(currentPage + 1)}
className={styles.button}
> >
Next » Next »
</button> </Button>
)} )}
</div> </div>
); );
......
src/components/TopLevel/CardList/Card/Card.module.css
.card { .card {
width: 300px; width: 350px;
border-radius: 10px; border-radius: 10px;
background-color: var(--primary-bg-color); background-color: var(--primary-bg-color);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
...@@ -22,11 +22,23 @@ ...@@ -22,11 +22,23 @@
} }
.card-title { .card-title {
color: var(--primary-text-color); color: var(--primary-text-color);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
} }
.card-description { .card-description {
color: var(--secondary-text-color); color: var(--secondary-text-color);
font-size: 18px; font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
} }
.card-footer { .card-footer {
...@@ -37,7 +49,7 @@ ...@@ -37,7 +49,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1rem 0; padding-bottom: 1rem;
} }
.author-name { .author-name {
...@@ -49,15 +61,21 @@ ...@@ -49,15 +61,21 @@
} }
.post-info { .post-info {
display: flex; display: flex;
align-items: center;
gap: 1rem; gap: 1rem;
font-family: "Inter-Regular"; font-family: "Inter-Regular";
color: rgba(128, 128, 128, 0.53); color: rgba(128, 128, 128, 0.53);
color: var(--secondary-text-color); color: var(--secondary-text-color);
font-size: 14px; font-size: 14px;
padding: 2px 0; padding: 2px 0;
} }
.readtimeWrapper {
display: flex;
align-items: center;
gap: 3px;
}
.author-avatar { .author-avatar {
border-radius: 50%; border-radius: 50%;
} }
src/components/TopLevel/CardList/Card/Card.stories.tsx
...@@ -4,8 +4,19 @@ export default { ...@@ -4,8 +4,19 @@ export default {
title: "Components/TopLevel/CardList/Card", title: "Components/TopLevel/CardList/Card",
tags: ["autodocs"], tags: ["autodocs"],
component: Card, component: Card,
argTypes: {},
}; };
export const Default = { export const Default = {
args: {}, args: {
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",
},
}; };
src/components/TopLevel/CardList/Card/Card.tsx
import styles from "./Card.module.css"; import styles from "./Card.module.css";
function Card({ img, cardTitle, cardDescription, author }: any) { import clock from "../../../../../public/imgaes/clock.svg";
import Image from "next/image";
function Card({
imgUrl,
cardTitle,
cardDescription,
authorName,
postedDate,
readTime,
}: any) {
console.log(imgUrl, "imgUrl");
return ( return (
<article className={styles.card}> <article className={styles.card}>
<img <img
className={styles["card-avatar"]} className={styles["card-avatar"]}
src="https://picsum.photos/300/200" src={`http://localhost:1337${imgUrl}`}
alt="Author photo" alt="Author photo"
/> />
<section className={styles["card-content"]}> <section className={styles["card-content"]}>
<h3 className={styles["card-title"]}> <h3 className={styles["card-title"]}>{cardTitle}</h3>
Lorem ipsum dolor sit amet, consectetur dolor amet <p className={styles["card-description"]}>{cardDescription}</p>
</h3>
<p className={styles["card-description"]}>
Lorem ipsum dolor adipiscing amet, consectetur sit .
</p>
</section> </section>
<footer className={styles["card-footer"]}> <footer className={styles["card-footer"]}>
<div className={styles["author-details"]}> <div className={styles["author-details"]}>
<div> <div>
<img <img
src="https://picsum.photos/50/50" src="https://picsum.photos/55/55"
alt="Author photo" alt="Author photo"
className={styles["author-avatar"]} className={styles["author-avatar"]}
/> />
</div> </div>
<div className="author-info"> <div className="author-info">
<div className={styles["author-name"]}>Syed Abdul Rahman</div> <div className={styles["author-name"]}>{authorName}</div>
<div className={styles["post-info"]}> <div className={styles["post-info"]}>
<div>July 13, 2020</div> <div>{postedDate}.</div>
<div>1 min</div> <div className={styles.readtimeWrapper}>
<Image width={20} src={clock} alt="img" />
{readTime} min
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/components/TopLevel/CardList/CardWrapper/CardWrapper.module.css
.wrapperContainer { .wrapperContainer {
display: grid; display: grid;
grid-template-columns: repeat(3, 300px); grid-template-columns: repeat(3, 350px);
column-gap: 1rem; row-gap: 2rem;
row-gap: 1rem; column-gap: 2rem;
justify-content: center;
box-sizing: border-box;
background-color: var(--secondary-bg-color);
padding: 2rem 0;
} }
src/components/TopLevel/CardList/CardWrapper/CardWrapper.tsx
"use client";
import { Fragment } from "react";
import Card from "../Card/Card"; import Card from "../Card/Card";
import styles from "./CardWrapper.module.css"; import styles from "./CardWrapper.module.css";
const data = [ const data = [
{ {
id: 1, id: 1,
img: "https://placehold.co/300x200", img: "https://picsum.photos/350/300",
title: "Lorem ipsum dolor", title: "Lorem ipsum dolor",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
author: { author: {
name: "John Doe", authorName: "John Doe",
postedDate: "12/07/2025", postedDate: "July 20, 2025",
readTime: "2", readTime: "2",
}, },
}, },
{ {
id: 2, id: 2,
img: "https://placehold.co/300x200", img: "https://picsum.photos/350/300",
title: "Understanding React Hooks", title: "Understanding React Hooks",
content: content:
"Hooks let you use state and other React features without writing a class.", "Hooks let you use state and other React features without writing a class.",
author: { author: {
name: "Jane Smith", authorName: "Jane Smith",
postedDate: "14/07/2025", postedDate: "July 20, 2025",
readTime: "4", readTime: "4",
}, },
}, },
{ {
id: 3, id: 3,
img: "https://placehold.co/300x200", img: "https://picsum.photos/350/300",
title: "Mastering JavaScript Closures", title: "Mastering JavaScript Closures",
content: content:
"Closures are a fundamental concept that every JavaScript developer should know.", "Closures are a fundamental concept that every JavaScript developer should know.",
author: { author: {
name: "Alex Johnson", authorName: "Alex Johnson",
postedDate: "16/07/2025", postedDate: "July 20, 2025",
readTime: "3", readTime: "3",
}, },
}, },
{ {
id: 4, id: 4,
img: "https://placehold.co/300x200", img: "https://picsum.photos/350/300",
title: "CSS Grid vs Flexbox", title: "CSS Grid vs Flexbox",
content: content:
"Both CSS Grid and Flexbox are powerful layout systems. Learn when to use each.", "Both CSS Grid and Flexbox are powerful layout systems. Learn when to use each.",
author: { author: {
name: "Nina Brown", authorName: "Nina Brown",
postedDate: "18/07/2025", postedDate: "July 20, 2025",
readTime: "5", readTime: "5",
}, },
}, },
{ {
id: 5, id: 5,
img: "https://placehold.co/300x200", img: "https://picsum.photos/350/300",
title: "Building Accessible Web Apps", title: "Building Accessible Web Apps",
content: content:
"Accessibility should be a key focus when building modern web applications.", "Accessibility should be a key focus when building modern web applications.",
author: { author: {
name: "Mohammed Ali", authorName: "Mohammed Ali",
postedDate: "20/07/2025", postedDate: "July 20, 2025",
readTime: "6",
},
},
{
id: 6,
img: "https://picsum.photos/350/300",
title: "Building Accessible Web Apps",
content:
"Accessibility should be a key focus when building modern web applications.",
author: {
authorName: "Mohammed Ali",
postedDate: "July 20, 2025",
readTime: "6", readTime: "6",
}, },
}, },
]; ];
function CardWrapper() { function CardWrapper({ cardData }: any) {
return ( return (
<div className={styles.wrapperContainer}> <div className={styles.wrapperContainer}>
{data.map((ele) => ( {cardData?.map((ele: any) => (
<> <Fragment key={ele.id}>
<Card /> <Card
</> cardTitle={ele.Title}
cardDescription={ele.Description}
authorName={ele.Author}
imgUrl={ele.Image.url}
postedDate={ele.PostedOn}
readTime={ele.ReadingTime}
/>
</Fragment>
))} ))}
</div> </div>
); );
......
src/lib/Api.ts
import axios from "axios";
const axiosInstance = axios.create({
baseURL: `${process.env.NEXT_PUBLIC_API_URL}api`,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer 8e32297f4b630b69c5446e36e93144e0b3e12827a84252c6c4e6b08d869f817db9b0f7e5c03b6b0553210ac0efe4f7b68bb9f2c3e784e2485794af05087a81f792bf723af2bab3400c5716b478c95c9b8ac0f2a9f3bf836074d8d48cbfeb2f21d03bab93c6f00d846ae7b116953bff27fb09e4cd79febaf2f1bdd421ed7b9417`
},
});
export const getBlogPosts = async () => {
const url = "blog-posts?populate=Image";
try {
const response = await Methods.getData(url);
return response.data;
} catch (error: any) {
throw error?.response?.data || error;
}
}
const Methods = {
getData: async(url:string)=> {
try {
const response = await axiosInstance.get(url);
return response.data;
} catch (error: any) {
throw error?.response?.data || error;
}
},
}
\ No newline at end of file
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