Skip to content

B
blog-app
Commit 16cc6dcc by Syed Abdul Rahman
Options

tailwind css conversion in progress

parent 07289bf0
Showing with 862 additions and 201 deletions
.storybook/preview.ts
import type { Preview } from '@storybook/nextjs'
import { useEffect } from 'react'
import '../src/app/fonts.css'
import '../src/app/globals.css'
const ThemeDecorator = (Story: any, context: any) => {
const backgroundValue = context.globals.backgrounds?.value
const theme = backgroundValue == 'dark' ? 'dark-theme' : ''
......
package-lock.json
......@@ -8,7 +8,9 @@
"name": "blog-app",
"version": "0.1.0",
"dependencies": {
"@tailwindcss/line-clamp": "^0.4.4",
"axios": "^1.10.0",
"classnames": "^2.5.1",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
......@@ -17,13 +19,16 @@
"devDependencies": {
"@eslint/eslintrc": "^3",
"@storybook/nextjs": "^9.0.12",
"@tailwindcss/postcss": "^4.1.11",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.3.4",
"eslint-plugin-storybook": "^9.0.12",
"postcss": "^8.5.6",
"storybook": "^9.0.12",
"tailwindcss": "^4.1.11",
"typescript": "^5"
}
},
......@@ -34,6 +39,19 @@
"dev": true,
"license": "MIT"
},
"node_modules/@alloc/quick-lru": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@ampproject/remapping": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
......@@ -2918,6 +2936,19 @@
"url": "https://opencollective.com/libvips"
}
},
"node_modules/@isaacs/fs-minipass": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
"integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
"dev": true,
"license": "ISC",
"dependencies": {
"minipass": "^7.0.4"
},
"engines": {
"node": ">=18.0.0"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
......@@ -3415,35 +3446,6 @@
"node": ">=6"
}
},
"node_modules/@storybook/nextjs/node_modules/postcss": {
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/@storybook/nextjs/node_modules/tsconfig-paths": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
......@@ -3707,6 +3709,301 @@
"tslib": "^2.8.0"
}
},
"node_modules/@tailwindcss/line-clamp": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz",
"integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==",
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
}
},
"node_modules/@tailwindcss/node": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
"integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
"enhanced-resolve": "^5.18.1",
"jiti": "^2.4.2",
"lightningcss": "1.30.1",
"magic-string": "^0.30.17",
"source-map-js": "^1.2.1",
"tailwindcss": "4.1.11"
}
},
"node_modules/@tailwindcss/node/node_modules/jiti": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
"integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
"dev": true,
"license": "MIT",
"bin": {
"jiti": "lib/jiti-cli.mjs"
}
},
"node_modules/@tailwindcss/oxide": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
"integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
"detect-libc": "^2.0.4",
"tar": "^7.4.3"
},
"engines": {
"node": ">= 10"
},
"optionalDependencies": {
"@tailwindcss/oxide-android-arm64": "4.1.11",
"@tailwindcss/oxide-darwin-arm64": "4.1.11",
"@tailwindcss/oxide-darwin-x64": "4.1.11",
"@tailwindcss/oxide-freebsd-x64": "4.1.11",
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
"@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
"@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
"@tailwindcss/oxide-linux-x64-musl": "4.1.11",
"@tailwindcss/oxide-wasm32-wasi": "4.1.11",
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
"@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
}
},
"node_modules/@tailwindcss/oxide-android-arm64": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
"integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-darwin-arm64": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
"integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-darwin-x64": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
"integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-freebsd-x64": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
"integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
"integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
"integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
"integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
"integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
"integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-wasm32-wasi": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
"integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
"bundleDependencies": [
"@napi-rs/wasm-runtime",
"@emnapi/core",
"@emnapi/runtime",
"@tybys/wasm-util",
"@emnapi/wasi-threads",
"tslib"
],
"cpu": [
"wasm32"
],
"dev": true,
"license": "MIT",
"optional": true,
"dependencies": {
"@emnapi/core": "^1.4.3",
"@emnapi/runtime": "^1.4.3",
"@emnapi/wasi-threads": "^1.0.2",
"@napi-rs/wasm-runtime": "^0.2.11",
"@tybys/wasm-util": "^0.9.0",
"tslib": "^2.8.0"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
"integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
"integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@tailwindcss/postcss": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
"integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"@tailwindcss/node": "4.1.11",
"@tailwindcss/oxide": "4.1.11",
"postcss": "^8.4.41",
"tailwindcss": "4.1.11"
}
},
"node_modules/@testing-library/dom": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
......@@ -6089,6 +6386,16 @@
"node": ">= 6"
}
},
"node_modules/chownr": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
"integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=18"
}
},
"node_modules/chrome-trace-event": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
......@@ -6120,6 +6427,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/classnames": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
"license": "MIT"
},
"node_modules/clean-css": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
......@@ -6446,36 +6759,7 @@
},
"webpack": {
"optional": true
}
}
},
"node_modules/css-loader/node_modules/postcss": {
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
}
},
"node_modules/css-select": {
......@@ -6738,8 +7022,8 @@
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
"devOptional": true,
"license": "Apache-2.0",
"optional": true,
"engines": {
"node": ">=8"
}
......@@ -9503,6 +9787,245 @@
"node": ">= 0.8.0"
}
},
"node_modules/lightningcss": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
"integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
"dev": true,
"license": "MPL-2.0",
"dependencies": {
"detect-libc": "^2.0.3"
},
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"lightningcss-darwin-arm64": "1.30.1",
"lightningcss-darwin-x64": "1.30.1",
"lightningcss-freebsd-x64": "1.30.1",
"lightningcss-linux-arm-gnueabihf": "1.30.1",
"lightningcss-linux-arm64-gnu": "1.30.1",
"lightningcss-linux-arm64-musl": "1.30.1",
"lightningcss-linux-x64-gnu": "1.30.1",
"lightningcss-linux-x64-musl": "1.30.1",
"lightningcss-win32-arm64-msvc": "1.30.1",
"lightningcss-win32-x64-msvc": "1.30.1"
}
},
"node_modules/lightningcss-darwin-arm64": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
"integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-darwin-x64": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
"integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-freebsd-x64": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
"integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-arm-gnueabihf": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
"integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
"cpu": [
"arm"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-arm64-gnu": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
"integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-arm64-musl": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
"integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-x64-gnu": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
"integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-linux-x64-musl": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
"integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-win32-arm64-msvc": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
"integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lightningcss-win32-x64-msvc": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
"integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MPL-2.0",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
......@@ -10413,6 +10936,45 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/minipass": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/minizlib": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
"integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
"dev": true,
"license": "MIT",
"dependencies": {
"minipass": "^7.1.2"
},
"engines": {
"node": ">= 18"
}
},
"node_modules/mkdirp": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
"integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
"dev": true,
"license": "MIT",
"bin": {
"mkdirp": "dist/cjs/src/bin.js"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
......@@ -10521,6 +11083,34 @@
}
}
},
"node_modules/next/node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/no-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
......@@ -11188,9 +11778,10 @@
}
},
"node_modules/postcss": {
"version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
"integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true,
"funding": [
{
"type": "opencollective",
......@@ -11207,9 +11798,9 @@
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.6",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.2"
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
"engines": {
"node": "^10 || ^12 || >=14"
......@@ -12992,6 +13583,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tailwindcss": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
"license": "MIT"
},
"node_modules/tapable": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
......@@ -13002,6 +13599,34 @@
"node": ">=6"
}
},
"node_modules/tar": {
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
"integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
"dev": true,
"license": "ISC",
"dependencies": {
"@isaacs/fs-minipass": "^4.0.0",
"chownr": "^3.0.0",
"minipass": "^7.1.2",
"minizlib": "^3.0.1",
"mkdirp": "^3.0.1",
"yallist": "^5.0.0"
},
"engines": {
"node": ">=18"
}
},
"node_modules/tar/node_modules/yallist": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
"integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=18"
}
},
"node_modules/terser": {
"version": "5.43.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
......
package.json
......@@ -11,7 +11,9 @@
"build-storybook": "storybook build"
},
"dependencies": {
"@tailwindcss/line-clamp": "^0.4.4",
"axios": "^1.10.0",
"classnames": "^2.5.1",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
......@@ -20,13 +22,16 @@
"devDependencies": {
"@eslint/eslintrc": "^3",
"@storybook/nextjs": "^9.0.12",
"@tailwindcss/postcss": "^4.1.11",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.3.4",
"eslint-plugin-storybook": "^9.0.12",
"postcss": "^8.5.6",
"storybook": "^9.0.12",
"tailwindcss": "^4.1.11",
"typescript": "^5"
}
}
postcss.config.mjs 0 → 100644
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
src/app/globals.css
@import "tailwindcss";
:root {
--primary-bg-color: #ffffff;
--secondary-bg-color: #f8f9fa;
......
src/app/page.tsx
......@@ -3,7 +3,6 @@ import CardWrapper from "@/components/TopLevel/CardList/CardWrapper/CardWrapper"
import Pagination from "@/components/Shared/Pagination/Pagination";
import { useEffect, useState } from "react";
import { getBlogPosts } from "@/lib/Api";
export default function Home() {
const [currentPage, setCurrentPage] = useState(1);
const [posts, setPosts] = useState<any>();
......
src/components/Base/Button/Button.module.css
......@@ -59,15 +59,13 @@
background-color: rgb(115, 101, 243);
}
.loader {
width: 20px;
height: 20px;
/* .loader {
border-radius: 50%;
border: 1px solid gray;
border-top: 2px solid blue;
display: inline-block;
animation: rotate 0.5s linear infinite;
}
} */
.loader-sm {
width: 10px;
......@@ -94,11 +92,11 @@
font-family: "Inter-Medium";
}
@keyframes rotate {
/* @keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
} */
src/components/Base/Button/Button.stories.tsx
......@@ -12,7 +12,7 @@ export const Primary = {
<>
<h2 className={styles.storyTitle}>Size</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="primary" size="sm">
<Button variant="primary" size="sm" disabled={false}>
Small
</Button>
<Button variant="primary" size="md">
......@@ -58,15 +58,6 @@ export const Primary = {
Button
</Button>
</section>
<h2 className={styles.storyTitle}>Pagination Next & Prev</h2>
<section className={styles["btn-wrapper"]}>
<Button variant="primary" size="md">
{"<<Prev"}
</Button>
<Button variant="primary" size="md">
{"Next>>"}
</Button>
</section>
</>
);
},
......
src/components/Base/Button/Button.tsx
import styles from "./Button.module.css";
import classNames from "classnames";
type ButtonProps = {
variant: "primary" | "secondary";
size: "sm" | "md" | "lg";
active?: boolean;
loading?: boolean;
disabled?: boolean;
children: React.ReactNode;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
const Button = ({
variant,
size,
......@@ -7,19 +17,38 @@ const Button = ({
disabled,
children,
...buttonProps
}: any) => {
}: ButtonProps) => {
const buttonClass = classNames(
"flex items-center justify-center gap-2 font-bold rounded-xl cursor-pointer box-border",
{
"px-4 py-2 text-sm": size === "sm",
"px-5 py-2.5 text-base": size === "md",
"px-8 py-4 text-lg": size === "lg",
"bg-[var(--primary-bg-color)] text-[var(--primary-text-color)] hover:bg-indigo-500 hover:text-white":
variant === "primary" && !disabled,
"bg-purple-700 text-white border border-purple-700 hover:bg-white hover:text-gray-600":
variant === "secondary" && !disabled,
"bg-indigo-500 text-white": active,
"bg-[var(--disabled-button-bg)] text-gray-400 pointer-events-none":
disabled,
}
);
const loaderClass = classNames(
"border border-gray-300 border-t-2 border-t-blue-600 rounded-full animate-spin",
{
"w-2.5 h-2.5": size === "sm",
"w-3.5 h-3.5": size === "md",
"w-5 h-5": size === "lg",
}
);
return (
<button
className={`${styles["button"]} ${styles[variant]} ${styles[size]} ${
active ? styles["button-active"] : ""
} ${disabled ? styles["disabled"] : ""}`}
{...buttonProps}
>
<button className={buttonClass} {...buttonProps}>
{loading && (
<>
<div
className={`${styles[`loader-${size}`]} ${styles["loader"]}`}
></div>
<div className={loaderClass}></div>
<span>Loading</span>
</>
)}
......
src/components/Base/Input/Input.module.css
......@@ -6,10 +6,7 @@
}
.inputWrapper input {
border: none;
outline: none;
outline: none;
border: none;
height: 12px;
width: 100%;
font-size: 15px;
......@@ -24,6 +21,10 @@
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.input-style {
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px;
}
.input::placeholder {
color: var(--secondary-text-color);
......@@ -33,10 +34,10 @@
font-family: "Inter-Medium";
padding: 0.5rem 0;
}
.svgWrapper {
height: 12px;
padding: 1.1rem 1rem;
/* background-color: #cccccc43; */
background-color: var(--secondary-bg-color);
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
......@@ -45,6 +46,7 @@
.disabled {
display: none;
}
.error {
box-shadow: 0px 0px 3px 3px rgb(223, 56, 56);
}
......@@ -56,7 +58,3 @@
padding: 0.75rem;
cursor: pointer;
}
.input-style {
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px;
}
src/components/Base/Input/Input.tsx
"use client";
import Image from "next/image";
import styles from "./Input.module.css";
import img from "../../../../public/imgaes/clear-icon.svg";
import classNames from "classnames";
type InputProps = {
label?: string;
......@@ -20,18 +19,45 @@ export default function Input({
}: InputProps) {
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
console.log("Entered value:", value);
onEnter?.(value as string);
}
};
const inputWrapper = classNames(
"flex items-center rounded-[10px] border-[rgba(255,255,255,0.451)] border-[0.2px]",
{ "shadow-[0_0_3px_3px_rgb(223,56,56)]": error === true }
);
const inputClass = classNames(
"outline-none h-[12px] w-full text-[15px] text-[var(--primary-text-color)] bg-[var(--secondary-bg-color)] py-[1.5rem] font-[Inter-Medium]",
{
"!px-[1rem] !py-[1.5rem] rounded-tl-[10px] rounded-bl-[10px]":
value != "",
"!rounded-tr-[10px] rounded-br-[10px]": value == "",
}
);
const searchWrapper = classNames(
"py-[1rem] px-[1rem] bg-[var(--secondary-bg-color)] rounded-tl-[10px] rounded-bl-[10px]",
{
hidden: value != "",
}
);
const clearWrapper = classNames(
"rounded-tr-[10px] rounded-br-[10px] bg-[var(--secondary-bg-color)] p-[1rem] cursor-pointer",
{
hidden: value === "",
}
);
return (
<>
{label && <div className={styles.label}>{label}</div>}
<div className={`${styles.inputWrapper} ${error ? styles.error : ""}`}>
<div
className={`${styles.svgWrapper}
${value != "" ? styles.disabled : ""}`}
>
{label && (
<div className={"font-[Inter-Medium] py-[0.5rem]"}>{label}</div>
)}
<div className={inputWrapper}>
<div className={searchWrapper}>
<svg
width="20px"
height="15px"
......@@ -48,7 +74,6 @@ export default function Input({
strokeWidth="0.384"
></g>
<g id="SVGRepo_iconCarrier">
{" "}
<path
d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
stroke="#787373"
......@@ -60,20 +85,13 @@ export default function Input({
</svg>
</div>
<input
className={`${styles.input} ${
value != "" ? styles["input-spl"] : styles["input-style"]
}`}
className={inputClass}
value={value}
onKeyDown={handleKeyDown}
name="input"
{...props}
/>
<div
className={`${styles["clear-wrapper"]} ${
value == "" ? styles.disabled : ""
} `}
onClick={onClear}
>
<div className={clearWrapper} onClick={onClear}>
<Image height={20} src={img} alt="img" />
</div>
</div>
......
src/components/Layout/Header/Header.tsx
......@@ -2,9 +2,8 @@
import Input from "@/components/Base/Input/Input";
import themeLogo from "../../../../public/imgaes/moon-svgrepo-com.svg";
import lightTheme from "../../../../public/imgaes/sun.svg";
import styles from "./Header.module.css";
import Image from "next/image";
import { useEffect, useState } from "react";
import { useState } from "react";
export default function Header() {
const [isDark, setIsDark] = useState("");
const [searchValue, setSearchValue] = useState("");
......@@ -29,9 +28,19 @@ export default function Header() {
};
return (
<header className={styles["header-wrapper"]}>
<div className={styles.headerTitle}>NewsBlog</div>
<div className={styles["input-container"]}>
<header
className={
"bg-[var(--primary-bg-color)] font-[Inter-Bold] flex justify-around items-center shadow-[0_4px_12px_rgba(0,0,0,0.08)] py-4 w-full sticky top-0"
}
>
<div
className={
"text-[var(--primary-text-color)] font-[Inter-Bold] text-[22px]"
}
>
NewsBlog
</div>
<div className={"w-[30%]"}>
<Input
placeholder={"Discover news, articles and more..."}
value={searchValue}
......@@ -40,7 +49,7 @@ export default function Header() {
onEnter={handleSearchEnter}
/>
</div>
<div className={styles["theme-switcher"]} onClick={handleThemeToggle}>
<div className="cursor-pointer" onClick={handleThemeToggle}>
{isDark == "dark-theme" ? (
<Image src={lightTheme} alt="image" width={25} />
) : (
......
src/components/Shared/Pagination/Pagination.module.css
......@@ -8,39 +8,3 @@
background-color: var(--secondary-bg-color);
padding: 2rem;
}
.button {
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
text-decoration: none;
font-size: 14px;
font-family: "Inter-Bold";
transition: background-color 0.2s ease;
background: white;
}
.button:hover {
background-color: #f0f0f0;
}
.active {
background-color: #0070f3;
color: white;
border-color: #0070f3;
pointer-events: none;
}
.dots {
padding: 6px 12px;
border: none;
background: none;
font-size: 16px;
cursor: pointer;
color: #666;
}
.dots:hover {
color: #000;
}
src/components/Shared/Pagination/Pagination.tsx
......@@ -51,9 +51,12 @@ export default function Pagination({
}
});
};
return (
<div className={styles.wrapper}>
<div
className={
"flex justify-center align-senter gap-[8px] text-[Inter-Medium] bg-[var(--secondary-bg-color)] p-[2rem] flex-wrap"
}
>
{currentPage > 1 && (
<Button
variant="primary"
......
src/components/TopLevel/BlogDetail/BlogDetail.module.css
......@@ -26,7 +26,7 @@ article {
border-radius: 15px;
object-fit: stretch;
width: 100%;
object-fit: cover; /* or 'fill' / 'contain' based on need */
object-fit: cover;
display: block;
}
......
src/components/TopLevel/CardList/Card/Card.module.css
.customLink {
text-decoration: none;
color: inherit;
}
.card {
width: 350px;
border-radius: 10px;
......@@ -17,9 +22,6 @@
font-family: "Inter-Medium";
}
.card figure {
border: 1px solid black;
}
.card-title {
color: var(--primary-text-color);
display: -webkit-box;
......@@ -51,6 +53,9 @@
gap: 1rem;
padding-bottom: 1rem;
}
.author-avatar {
border-radius: 50%;
}
.author-name {
color: rgb(95, 89, 89);
......@@ -75,12 +80,3 @@
align-items: center;
gap: 3px;
}
.author-avatar {
border-radius: 50%;
}
.customLink {
text-decoration: none;
color: inherit;
}
src/components/TopLevel/CardList/Card/Card.stories.tsx
......@@ -9,9 +9,9 @@ export default {
export const Default = {
args: {
cardTitle:
title:
"Lorem ipsum dolor adipiscing amet Lorem ipsum dolor adipiscing amet ",
cardDescription: "Lorem ipsum dolor adipiscing amet, consectetur sit .",
description: "Lorem ipsum dolor adipiscing amet, consectetur sit .",
authorName: "Abdul Rahman",
postedDate: "July 10, 2025",
readTime: "2",
......
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,
cardDescription,
title,
description,
authorName,
postedDate,
readTime,
}: any) {
return (
<Link href={"/"} className={styles.customLink}>
<article className={styles.card}>
<Link href={"/"} className="no-underline text-inherit">
<article
className={
"!w-[350px] rounded-[10px] bg-[var(--primary-bg-color)] shadow-[0px_4px_12px_rgba(0,0,0,0.1)]"
}
>
<img
className={styles["card-avatar"]}
className="w-full h-[200px] object-cover rounded-t-[10px]"
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 className="px-4 ">
<h3 className="text-[var(--primary-text-color)] font-[Inter-Bold] line-clamp-2 text-[20px] mt-8">
{title}
</h3>
<p className="text-[var(--secondary-text-color)] font-[Inter-Medium] text-[16px] line-clamp-2 mt-3">
{description}
</p>
</section>
<footer className={styles["card-footer"]}>
<div className={styles["author-details"]}>
<footer className="px-4 mt-3 pb-3">
<div className="flex items-center gap-4 pb-4">
<div>
<img
src="https://picsum.photos/55/55"
alt="Author photo"
className={styles["author-avatar"]}
className="rounded-full"
/>
</div>
<div className="author-info">
<div className={styles["author-name"]}>{authorName}</div>
<div className={styles["post-info"]}>
<div className="text-[var(--primary-text-color)] font-[Inter-Bold]">
{authorName}
</div>
<div className="flex items-center gap-4 font-[Inter-Regular] text-[var(--secondary-text-color)] text-[14px] py-[2px]">
<div>{postedDate}.</div>
<div className={styles.readtimeWrapper}>
<div className="flex items-center gap-[3px]">
<Image width={20} src={clock} alt="img" />
{readTime} min
</div>
......
src/components/TopLevel/CardList/CardWrapper/CardWrapper.tsx
"use client";
import { Fragment } from "react";
import Card from "../Card/Card";
import styles from "./CardWrapper.module.css";
......@@ -78,12 +77,12 @@ const data = [
function CardWrapper({ cardData }: any) {
return (
<div className={styles.wrapperContainer}>
<div className="grid grid-cols-[repeat(3,350px)] gap-x-8 gap-y-8 justify-center box-border bg-[var(--secondary-bg-color)] py-8">
{cardData?.map((ele: any) => (
<Fragment key={ele.id}>
<Card
cardTitle={ele.Title}
cardDescription={ele.Description}
title={ele.Title}
description={ele?.Description}
authorName={ele.Author}
imgUrl={`http://localhost:1337${ele.Image.url}`}
postedDate={ele.PostedOn}
......
tailwind.config.ts 0 → 100644
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}', // If using Pages Router
'./app/**/*.{js,ts,jsx,tsx}', // If using App Router
'./components/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {},
},
plugins: [require('@tailwindcss/line-clamp')],
}
tsconfig.json
......@@ -22,6 +22,6 @@
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "postcss.config.mjs"],
"exclude": ["node_modules"]
}
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