@veeyaainnovatives/blog-card 1.0.0

package/README.md

@@ -0,0 +1,115 @@
+# @veeyaainnovatives/blog-card
+
+A reusable Blog card component for React applications.
+
+## Installation
+
+```bash
+npm install @veeyaainnovatives/blog-card --save
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `react` (^16.8.0 || ^17.0.0 || ^18.0.0)
+- `react-dom` (^16.8.0 || ^17.0.0 || ^18.0.0)
+- `react-bootstrap` (^2.0.0)
+- `react-router-dom` (^6.0.0)
+
+## Usage
+
+```jsx
+import { BlogCard } from '@veeyaainnovatives/blog-card';
+import { Link } from 'react-router-dom';
+import placeholderImage from './path/to/placeholder.png';
+
+const blogs = [
+  {
+    id: 1,
+    title: 'Blog Title',
+    excerpt: 'Blog excerpt...',
+    image: 'https://example.com/image.jpg',
+    slug: 'blog-slug',
+    category: 'Technology',
+    updated_at: '2024-01-01T00:00:00Z',
+    author: 'John Doe'
+  }
+];
+
+function App() {
+  return (
+    <BlogCard
+      blogs={blogs}
+      placeholderImage={placeholderImage}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blogs` | `Array` | **Required** | Array of blog objects |
+| `placeholderImage` | `string` | **Required** | Placeholder image URL for blogs without images |
+| `categoryColors` | `Object` | `{}` | Custom category color mapping |
+| `getTimeAgo` | `Function` | `defaultGetTimeAgo` | Custom function to format time ago |
+| `getCategory` | `Function` | `defaultGetCategory` | Custom function to extract category |
+| `getCategoryColor` | `Function` | `defaultGetCategoryColor` | Custom function to get category color |
+| `LinkComponent` | `Component` | `Link` (react-router-dom) | Custom link component |
+| `className` | `string` | `"g-4"` | Row className |
+| `cardClassName` | `string` | `"blog-card-modern mb-4"` | Card wrapper className |
+| `imageWrapperClassName` | `string` | `"blog-card-image-wrapper"` | Image wrapper className |
+| `imageClassName` | `string` | `"blog-card-img-modern"` | Image className |
+| `categoryTagClassName` | `string` | `"blog-category-tag"` | Category tag className |
+| `contentClassName` | `string` | `"blog-card-content"` | Content wrapper className |
+| `titleClassName` | `string` | `"blog-card-title-modern"` | Title className |
+| `descClassName` | `string` | `"blog-card-desc-modern"` | Description className |
+| `authorClassName` | `string` | `"blog-card-author"` | Author section className |
+| `authorLeftClassName` | `string` | `"blog-author-left"` | Author left section className |
+| `authorAvatarClassName` | `string` | `"blog-author-avatar"` | Author avatar className |
+| `authorInfoClassName` | `string` | `"blog-author-info"` | Author info className |
+| `authorNameClassName` | `string` | `"blog-author-name"` | Author name className |
+| `authorTimeClassName` | `string` | `"blog-author-time"` | Author time className |
+| `arrowLinkClassName` | `string` | `"blog-arrow-link"` | Arrow link className |
+| `colProps` | `Object` | `{ lg: 4, md: 6 }` | Column props for react-bootstrap Col |
+
+## Blog Object Structure
+
+Each blog object should have the following structure:
+
+```javascript
+{
+  id: Number,              // Unique identifier
+  title: String,           // Blog title
+  excerpt: String,         // Blog excerpt/description
+  image: String,          // Blog image URL
+  slug: String,           // Blog slug for routing
+  category: String|Object, // Blog category
+  updated_at: String,     // ISO date string
+  created_at: String,     // ISO date string (fallback for timeAgo)
+  author: String,         // Author name (or writer, user.name, created_by.name)
+}
+```
+
+## Custom Category Colors
+
+You can provide custom category colors:
+
+```jsx
+<BlogCard
+  blogs={blogs}
+  placeholderImage={placeholderImage}
+  categoryColors={{
+    'Technology': '#3B82F6',
+    'Design': '#8B5CF6',
+    'Custom': '#FF0000'
+  }}
+/>
+```
+
+## License
+
+MIT
+

package/dist/index.esm.js

@@ -0,0 +1,235 @@
+import { createElement, useState, useEffect } from 'react';
+import { Row, Col } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+const BlogImage = _ref => {
+  let {
+    image,
+    fallback,
+    className
+  } = _ref;
+  const [imgSrc, setImgSrc] = useState(image || fallback);
+  useEffect(() => {
+    // If no image provided, use fallback
+    if (!image || image.trim() === '') {
+      setImgSrc(fallback);
+      return;
+    }
+
+    // Preload image to check if it exists
+    const img = new Image();
+    img.onerror = () => {
+      // Image failed to load, use fallback
+      setImgSrc(fallback);
+    };
+    img.onload = () => {
+      // Image loaded successfully
+      setImgSrc(image);
+    };
+    img.src = image;
+  }, [image, fallback]);
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      backgroundImage: "url(".concat(imgSrc, ")")
+    },
+    className: className
+  });
+};
+const BlogCard = _ref2 => {
+  let {
+    blogs,
+    placeholderImage,
+    categoryColors,
+    getTimeAgo,
+    getCategory,
+    getCategoryColor,
+    LinkComponent = Link,
+    className = "g-4",
+    cardClassName = "blog-card-modern mb-4",
+    imageWrapperClassName = "blog-card-image-wrapper",
+    imageClassName = "blog-card-img-modern",
+    categoryTagClassName = "blog-category-tag",
+    contentClassName = "blog-card-content",
+    titleClassName = "blog-card-title-modern",
+    descClassName = "blog-card-desc-modern",
+    authorClassName = "blog-card-author",
+    authorLeftClassName = "blog-author-left",
+    authorAvatarClassName = "blog-author-avatar",
+    authorInfoClassName = "blog-author-info",
+    authorNameClassName = "blog-author-name",
+    authorTimeClassName = "blog-author-time",
+    arrowLinkClassName = "blog-arrow-link",
+    colProps = {
+      lg: 4,
+      md: 6
+    }
+  } = _ref2;
+  // Default helper function to get time ago
+  const defaultGetTimeAgo = dateString => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInSeconds = Math.floor((now - date) / 1000);
+    if (diffInSeconds < 60) return 'Just now';
+    if (diffInSeconds < 3600) return "".concat(Math.floor(diffInSeconds / 60), "m ago");
+    if (diffInSeconds < 86400) return "".concat(Math.floor(diffInSeconds / 3600), "h ago");
+    if (diffInSeconds < 172800) return 'Yesterday';
+    if (diffInSeconds < 2592000) return "".concat(Math.floor(diffInSeconds / 86400), "d ago");
+    if (diffInSeconds < 31536000) return "".concat(Math.floor(diffInSeconds / 2592000), "mo ago");
+    return "".concat(Math.floor(diffInSeconds / 31536000), "y ago");
+  };
+
+  // Default helper function to get category
+  const defaultGetCategory = category => {
+    if (!category || typeof category === 'string' && category.trim() === '') return 'General';
+    // If category is an object with name property
+    if (typeof category === 'object' && category.name) {
+      return category.name;
+    }
+    // If category is a string
+    return category || 'General';
+  };
+
+  // Default helper function to get category color
+  const defaultGetCategoryColor = category => {
+    const defaultColors = {
+      'Technology': '#3B82F6',
+      'Food': '#F97316',
+      'Automobile': '#EF4444',
+      'Design': '#8B5CF6',
+      'Architecture': '#10B981',
+      'Interior': '#EC4899',
+      'Construction': '#F59E0B',
+      'BIM': '#06B6D4'
+    };
+
+    // Use custom category colors if provided, otherwise use defaults
+    const colors = categoryColors || defaultColors;
+    return colors[category] || '#6B7280';
+  };
+
+  // Use provided functions or defaults
+  const timeAgoFn = getTimeAgo || defaultGetTimeAgo;
+  const categoryFn = getCategory || defaultGetCategory;
+  const categoryColorFn = getCategoryColor || defaultGetCategoryColor;
+
+  // Safety check: ensure blogs is an array
+  if (!blogs || !Array.isArray(blogs)) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(Row, {
+    className: className,
+    children: blogs.map(blogItem => {
+      var _blogItem$user, _blogItem$created_by;
+      // Use placeholder if image is missing or invalid
+      const blogImage = blogItem.image && blogItem.image.trim() !== '' ? blogItem.image : placeholderImage;
+      const category = categoryFn(blogItem.category);
+      const categoryColor = categoryColorFn(category);
+      const timeAgo = timeAgoFn(blogItem.updated_at || blogItem.created_at);
+      return /*#__PURE__*/createElement(Col, _objectSpread2(_objectSpread2({}, colProps), {}, {
+        key: blogItem.id
+      }), /*#__PURE__*/jsxs("div", {
+        className: cardClassName,
+        children: [/*#__PURE__*/jsx("div", {
+          className: imageWrapperClassName,
+          children: /*#__PURE__*/jsxs(LinkComponent, {
+            to: "/blog-view/".concat(blogItem.slug),
+            children: [/*#__PURE__*/jsx(BlogImage, {
+              image: blogImage,
+              fallback: placeholderImage,
+              className: imageClassName
+            }), /*#__PURE__*/jsx("div", {
+              className: categoryTagClassName,
+              style: {
+                backgroundColor: categoryColor
+              },
+              children: category
+            })]
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: contentClassName,
+          children: [/*#__PURE__*/jsx("h2", {
+            className: titleClassName,
+            children: blogItem.title
+          }), /*#__PURE__*/jsx("p", {
+            className: descClassName,
+            children: blogItem.excerpt
+          }), /*#__PURE__*/jsxs("div", {
+            className: authorClassName,
+            children: [/*#__PURE__*/jsxs("div", {
+              className: authorLeftClassName,
+              children: [/*#__PURE__*/jsx("div", {
+                className: authorAvatarClassName,
+                children: /*#__PURE__*/jsx("i", {
+                  className: "fa-solid fa-user"
+                })
+              }), /*#__PURE__*/jsxs("div", {
+                className: authorInfoClassName,
+                children: [/*#__PURE__*/jsx("span", {
+                  className: authorNameClassName,
+                  children: blogItem.author || blogItem.writer || ((_blogItem$user = blogItem.user) === null || _blogItem$user === void 0 ? void 0 : _blogItem$user.name) || ((_blogItem$created_by = blogItem.created_by) === null || _blogItem$created_by === void 0 ? void 0 : _blogItem$created_by.name) || 'Admin'
+                }), /*#__PURE__*/jsx("span", {
+                  className: authorTimeClassName,
+                  children: timeAgo
+                })]
+              })]
+            }), /*#__PURE__*/jsx(LinkComponent, {
+              to: "/blog-view/".concat(blogItem.slug),
+              className: arrowLinkClassName,
+              children: /*#__PURE__*/jsx("i", {
+                className: "fa-solid fa-arrow-up-right-from-square"
+              })
+            })]
+          })]
+        })]
+      }));
+    })
+  });
+};
+
+export { BlogCard };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/BlogCard.jsx"],"sourcesContent":["import { useState, useEffect } from 'react';\r\nimport { Col, Row } from 'react-bootstrap';\r\nimport { Link } from 'react-router-dom';\r\n\r\n// Component to handle image loading with fallback\r\nconst BlogImage = ({ image, fallback, className }) => {\r\n  const [imgSrc, setImgSrc] = useState(image || fallback);\r\n\r\n  useEffect(() => {\r\n    // If no image provided, use fallback\r\n    if (!image || image.trim() === '') {\r\n      setImgSrc(fallback);\r\n      return;\r\n    }\r\n\r\n    // Preload image to check if it exists\r\n    const img = new Image();\r\n    img.onerror = () => {\r\n      // Image failed to load, use fallback\r\n      setImgSrc(fallback);\r\n    };\r\n    img.onload = () => {\r\n      // Image loaded successfully\r\n      setImgSrc(image);\r\n    };\r\n    img.src = image;\r\n  }, [image, fallback]);\r\n\r\n  return (\r\n    <div\r\n      style={{ backgroundImage: `url(${imgSrc})` }}\r\n      className={className}\r\n    />\r\n  );\r\n};\r\n\r\nconst BlogCard = ({ \r\n  blogs,\r\n  placeholderImage,\r\n  categoryColors,\r\n  getTimeAgo,\r\n  getCategory,\r\n  getCategoryColor,\r\n  LinkComponent = Link,\r\n  className = \"g-4\",\r\n  cardClassName = \"blog-card-modern mb-4\",\r\n  imageWrapperClassName = \"blog-card-image-wrapper\",\r\n  imageClassName = \"blog-card-img-modern\",\r\n  categoryTagClassName = \"blog-category-tag\",\r\n  contentClassName = \"blog-card-content\",\r\n  titleClassName = \"blog-card-title-modern\",\r\n  descClassName = \"blog-card-desc-modern\",\r\n  authorClassName = \"blog-card-author\",\r\n  authorLeftClassName = \"blog-author-left\",\r\n  authorAvatarClassName = \"blog-author-avatar\",\r\n  authorInfoClassName = \"blog-author-info\",\r\n  authorNameClassName = \"blog-author-name\",\r\n  authorTimeClassName = \"blog-author-time\",\r\n  arrowLinkClassName = \"blog-arrow-link\",\r\n  colProps = { lg: 4, md: 6 }\r\n}) => {\r\n  // Default helper function to get time ago\r\n  const defaultGetTimeAgo = (dateString) => {\r\n    const date = new Date(dateString);\r\n    const now = new Date();\r\n    const diffInSeconds = Math.floor((now - date) / 1000);\r\n\r\n    if (diffInSeconds < 60) return 'Just now';\r\n    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;\r\n    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;\r\n    if (diffInSeconds < 172800) return 'Yesterday';\r\n    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)}d ago`;\r\n    if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)}mo ago`;\r\n    return `${Math.floor(diffInSeconds / 31536000)}y ago`;\r\n  };\r\n\r\n  // Default helper function to get category\r\n  const defaultGetCategory = (category) => {\r\n    if (!category || (typeof category === 'string' && category.trim() === '')) return 'General';\r\n    // If category is an object with name property\r\n    if (typeof category === 'object' && category.name) {\r\n      return category.name;\r\n    }\r\n    // If category is a string\r\n    return category || 'General';\r\n  };\r\n\r\n  // Default helper function to get category color\r\n  const defaultGetCategoryColor = (category) => {\r\n    const defaultColors = {\r\n      'Technology': '#3B82F6',\r\n      'Food': '#F97316',\r\n      'Automobile': '#EF4444',\r\n      'Design': '#8B5CF6',\r\n      'Architecture': '#10B981',\r\n      'Interior': '#EC4899',\r\n      'Construction': '#F59E0B',\r\n      'BIM': '#06B6D4',\r\n    };\r\n    \r\n    // Use custom category colors if provided, otherwise use defaults\r\n    const colors = categoryColors || defaultColors;\r\n    return colors[category] || '#6B7280';\r\n  };\r\n\r\n  // Use provided functions or defaults\r\n  const timeAgoFn = getTimeAgo || defaultGetTimeAgo;\r\n  const categoryFn = getCategory || defaultGetCategory;\r\n  const categoryColorFn = getCategoryColor || defaultGetCategoryColor;\r\n\r\n  // Safety check: ensure blogs is an array\r\n  if (!blogs || !Array.isArray(blogs)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Row className={className}>\r\n      {blogs.map((blogItem) => {\r\n        // Use placeholder if image is missing or invalid\r\n        const blogImage = blogItem.image && blogItem.image.trim() !== ''\r\n          ? blogItem.image\r\n          : placeholderImage;\r\n\r\n        const category = categoryFn(blogItem.category);\r\n        const categoryColor = categoryColorFn(category);\r\n        const timeAgo = timeAgoFn(blogItem.updated_at || blogItem.created_at);\r\n\r\n        return (\r\n          <Col {...colProps} key={blogItem.id}>\r\n            <div className={cardClassName}>\r\n              <div className={imageWrapperClassName}>\r\n                <LinkComponent to={`/blog-view/${blogItem.slug}`}>\r\n                  <BlogImage\r\n                    image={blogImage}\r\n                    fallback={placeholderImage}\r\n                    className={imageClassName}\r\n                  />\r\n                  <div \r\n                    className={categoryTagClassName} \r\n                    style={{ backgroundColor: categoryColor }}\r\n                  >\r\n                    {category}\r\n                  </div>\r\n                </LinkComponent>\r\n              </div>\r\n              <div className={contentClassName}>\r\n                <h2 className={titleClassName}>{blogItem.title}</h2>\r\n                <p className={descClassName}>{blogItem.excerpt}</p>\r\n                <div className={authorClassName}>\r\n                  <div className={authorLeftClassName}>\r\n                    <div className={authorAvatarClassName}>\r\n                      <i className=\"fa-solid fa-user\"></i>\r\n                    </div>\r\n                    <div className={authorInfoClassName}>\r\n                      <span className={authorNameClassName}>\r\n                        {blogItem.author || blogItem.writer || blogItem.user?.name || blogItem.created_by?.name || 'Admin'}\r\n                      </span>\r\n                      <span className={authorTimeClassName}>{timeAgo}</span>\r\n                    </div>\r\n                  </div>\r\n                  <LinkComponent\r\n                    to={`/blog-view/${blogItem.slug}`}\r\n                    className={arrowLinkClassName}\r\n                  >\r\n                    <i className=\"fa-solid fa-arrow-up-right-from-square\"></i>\r\n                  </LinkComponent>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </Col>\r\n        );\r\n      })}\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default BlogCard;\r\n\r\n"],"names":["BlogImage","_ref","image","fallback","className","imgSrc","setImgSrc","useState","useEffect","trim","img","Image","onerror","onload","src","_jsx","style","backgroundImage","concat","BlogCard","_ref2","blogs","placeholderImage","categoryColors","getTimeAgo","getCategory","getCategoryColor","LinkComponent","Link","cardClassName","imageWrapperClassName","imageClassName","categoryTagClassName","contentClassName","titleClassName","descClassName","authorClassName","authorLeftClassName","authorAvatarClassName","authorInfoClassName","authorNameClassName","authorTimeClassName","arrowLinkClassName","colProps","lg","md","defaultGetTimeAgo","dateString","date","Date","now","diffInSeconds","Math","floor","defaultGetCategory","category","name","defaultGetCategoryColor","defaultColors","colors","timeAgoFn","categoryFn","categoryColorFn","Array","isArray","Row","children","map","blogItem","_blogItem$user","_blogItem$created_by","blogImage","categoryColor","timeAgo","updated_at","created_at","_createElement","Col","_objectSpread","key","id","_jsxs","to","slug","backgroundColor","title","excerpt","author","writer","user","created_by"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,237 @@
+'use strict';
+
+var react = require('react');
+var reactBootstrap = require('react-bootstrap');
+var reactRouterDom = require('react-router-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+const BlogImage = _ref => {
+  let {
+    image,
+    fallback,
+    className
+  } = _ref;
+  const [imgSrc, setImgSrc] = react.useState(image || fallback);
+  react.useEffect(() => {
+    // If no image provided, use fallback
+    if (!image || image.trim() === '') {
+      setImgSrc(fallback);
+      return;
+    }
+
+    // Preload image to check if it exists
+    const img = new Image();
+    img.onerror = () => {
+      // Image failed to load, use fallback
+      setImgSrc(fallback);
+    };
+    img.onload = () => {
+      // Image loaded successfully
+      setImgSrc(image);
+    };
+    img.src = image;
+  }, [image, fallback]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      backgroundImage: "url(".concat(imgSrc, ")")
+    },
+    className: className
+  });
+};
+const BlogCard = _ref2 => {
+  let {
+    blogs,
+    placeholderImage,
+    categoryColors,
+    getTimeAgo,
+    getCategory,
+    getCategoryColor,
+    LinkComponent = reactRouterDom.Link,
+    className = "g-4",
+    cardClassName = "blog-card-modern mb-4",
+    imageWrapperClassName = "blog-card-image-wrapper",
+    imageClassName = "blog-card-img-modern",
+    categoryTagClassName = "blog-category-tag",
+    contentClassName = "blog-card-content",
+    titleClassName = "blog-card-title-modern",
+    descClassName = "blog-card-desc-modern",
+    authorClassName = "blog-card-author",
+    authorLeftClassName = "blog-author-left",
+    authorAvatarClassName = "blog-author-avatar",
+    authorInfoClassName = "blog-author-info",
+    authorNameClassName = "blog-author-name",
+    authorTimeClassName = "blog-author-time",
+    arrowLinkClassName = "blog-arrow-link",
+    colProps = {
+      lg: 4,
+      md: 6
+    }
+  } = _ref2;
+  // Default helper function to get time ago
+  const defaultGetTimeAgo = dateString => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInSeconds = Math.floor((now - date) / 1000);
+    if (diffInSeconds < 60) return 'Just now';
+    if (diffInSeconds < 3600) return "".concat(Math.floor(diffInSeconds / 60), "m ago");
+    if (diffInSeconds < 86400) return "".concat(Math.floor(diffInSeconds / 3600), "h ago");
+    if (diffInSeconds < 172800) return 'Yesterday';
+    if (diffInSeconds < 2592000) return "".concat(Math.floor(diffInSeconds / 86400), "d ago");
+    if (diffInSeconds < 31536000) return "".concat(Math.floor(diffInSeconds / 2592000), "mo ago");
+    return "".concat(Math.floor(diffInSeconds / 31536000), "y ago");
+  };
+
+  // Default helper function to get category
+  const defaultGetCategory = category => {
+    if (!category || typeof category === 'string' && category.trim() === '') return 'General';
+    // If category is an object with name property
+    if (typeof category === 'object' && category.name) {
+      return category.name;
+    }
+    // If category is a string
+    return category || 'General';
+  };
+
+  // Default helper function to get category color
+  const defaultGetCategoryColor = category => {
+    const defaultColors = {
+      'Technology': '#3B82F6',
+      'Food': '#F97316',
+      'Automobile': '#EF4444',
+      'Design': '#8B5CF6',
+      'Architecture': '#10B981',
+      'Interior': '#EC4899',
+      'Construction': '#F59E0B',
+      'BIM': '#06B6D4'
+    };
+
+    // Use custom category colors if provided, otherwise use defaults
+    const colors = categoryColors || defaultColors;
+    return colors[category] || '#6B7280';
+  };
+
+  // Use provided functions or defaults
+  const timeAgoFn = getTimeAgo || defaultGetTimeAgo;
+  const categoryFn = getCategory || defaultGetCategory;
+  const categoryColorFn = getCategoryColor || defaultGetCategoryColor;
+
+  // Safety check: ensure blogs is an array
+  if (!blogs || !Array.isArray(blogs)) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(reactBootstrap.Row, {
+    className: className,
+    children: blogs.map(blogItem => {
+      var _blogItem$user, _blogItem$created_by;
+      // Use placeholder if image is missing or invalid
+      const blogImage = blogItem.image && blogItem.image.trim() !== '' ? blogItem.image : placeholderImage;
+      const category = categoryFn(blogItem.category);
+      const categoryColor = categoryColorFn(category);
+      const timeAgo = timeAgoFn(blogItem.updated_at || blogItem.created_at);
+      return /*#__PURE__*/react.createElement(reactBootstrap.Col, _objectSpread2(_objectSpread2({}, colProps), {}, {
+        key: blogItem.id
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: cardClassName,
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: imageWrapperClassName,
+          children: /*#__PURE__*/jsxRuntime.jsxs(LinkComponent, {
+            to: "/blog-view/".concat(blogItem.slug),
+            children: [/*#__PURE__*/jsxRuntime.jsx(BlogImage, {
+              image: blogImage,
+              fallback: placeholderImage,
+              className: imageClassName
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: categoryTagClassName,
+              style: {
+                backgroundColor: categoryColor
+              },
+              children: category
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: contentClassName,
+          children: [/*#__PURE__*/jsxRuntime.jsx("h2", {
+            className: titleClassName,
+            children: blogItem.title
+          }), /*#__PURE__*/jsxRuntime.jsx("p", {
+            className: descClassName,
+            children: blogItem.excerpt
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: authorClassName,
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: authorLeftClassName,
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                className: authorAvatarClassName,
+                children: /*#__PURE__*/jsxRuntime.jsx("i", {
+                  className: "fa-solid fa-user"
+                })
+              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                className: authorInfoClassName,
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: authorNameClassName,
+                  children: blogItem.author || blogItem.writer || ((_blogItem$user = blogItem.user) === null || _blogItem$user === void 0 ? void 0 : _blogItem$user.name) || ((_blogItem$created_by = blogItem.created_by) === null || _blogItem$created_by === void 0 ? void 0 : _blogItem$created_by.name) || 'Admin'
+                }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: authorTimeClassName,
+                  children: timeAgo
+                })]
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx(LinkComponent, {
+              to: "/blog-view/".concat(blogItem.slug),
+              className: arrowLinkClassName,
+              children: /*#__PURE__*/jsxRuntime.jsx("i", {
+                className: "fa-solid fa-arrow-up-right-from-square"
+              })
+            })]
+          })]
+        })]
+      }));
+    })
+  });
+};
+
+exports.BlogCard = BlogCard;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/BlogCard.jsx"],"sourcesContent":["import { useState, useEffect } from 'react';\r\nimport { Col, Row } from 'react-bootstrap';\r\nimport { Link } from 'react-router-dom';\r\n\r\n// Component to handle image loading with fallback\r\nconst BlogImage = ({ image, fallback, className }) => {\r\n  const [imgSrc, setImgSrc] = useState(image || fallback);\r\n\r\n  useEffect(() => {\r\n    // If no image provided, use fallback\r\n    if (!image || image.trim() === '') {\r\n      setImgSrc(fallback);\r\n      return;\r\n    }\r\n\r\n    // Preload image to check if it exists\r\n    const img = new Image();\r\n    img.onerror = () => {\r\n      // Image failed to load, use fallback\r\n      setImgSrc(fallback);\r\n    };\r\n    img.onload = () => {\r\n      // Image loaded successfully\r\n      setImgSrc(image);\r\n    };\r\n    img.src = image;\r\n  }, [image, fallback]);\r\n\r\n  return (\r\n    <div\r\n      style={{ backgroundImage: `url(${imgSrc})` }}\r\n      className={className}\r\n    />\r\n  );\r\n};\r\n\r\nconst BlogCard = ({ \r\n  blogs,\r\n  placeholderImage,\r\n  categoryColors,\r\n  getTimeAgo,\r\n  getCategory,\r\n  getCategoryColor,\r\n  LinkComponent = Link,\r\n  className = \"g-4\",\r\n  cardClassName = \"blog-card-modern mb-4\",\r\n  imageWrapperClassName = \"blog-card-image-wrapper\",\r\n  imageClassName = \"blog-card-img-modern\",\r\n  categoryTagClassName = \"blog-category-tag\",\r\n  contentClassName = \"blog-card-content\",\r\n  titleClassName = \"blog-card-title-modern\",\r\n  descClassName = \"blog-card-desc-modern\",\r\n  authorClassName = \"blog-card-author\",\r\n  authorLeftClassName = \"blog-author-left\",\r\n  authorAvatarClassName = \"blog-author-avatar\",\r\n  authorInfoClassName = \"blog-author-info\",\r\n  authorNameClassName = \"blog-author-name\",\r\n  authorTimeClassName = \"blog-author-time\",\r\n  arrowLinkClassName = \"blog-arrow-link\",\r\n  colProps = { lg: 4, md: 6 }\r\n}) => {\r\n  // Default helper function to get time ago\r\n  const defaultGetTimeAgo = (dateString) => {\r\n    const date = new Date(dateString);\r\n    const now = new Date();\r\n    const diffInSeconds = Math.floor((now - date) / 1000);\r\n\r\n    if (diffInSeconds < 60) return 'Just now';\r\n    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;\r\n    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;\r\n    if (diffInSeconds < 172800) return 'Yesterday';\r\n    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)}d ago`;\r\n    if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)}mo ago`;\r\n    return `${Math.floor(diffInSeconds / 31536000)}y ago`;\r\n  };\r\n\r\n  // Default helper function to get category\r\n  const defaultGetCategory = (category) => {\r\n    if (!category || (typeof category === 'string' && category.trim() === '')) return 'General';\r\n    // If category is an object with name property\r\n    if (typeof category === 'object' && category.name) {\r\n      return category.name;\r\n    }\r\n    // If category is a string\r\n    return category || 'General';\r\n  };\r\n\r\n  // Default helper function to get category color\r\n  const defaultGetCategoryColor = (category) => {\r\n    const defaultColors = {\r\n      'Technology': '#3B82F6',\r\n      'Food': '#F97316',\r\n      'Automobile': '#EF4444',\r\n      'Design': '#8B5CF6',\r\n      'Architecture': '#10B981',\r\n      'Interior': '#EC4899',\r\n      'Construction': '#F59E0B',\r\n      'BIM': '#06B6D4',\r\n    };\r\n    \r\n    // Use custom category colors if provided, otherwise use defaults\r\n    const colors = categoryColors || defaultColors;\r\n    return colors[category] || '#6B7280';\r\n  };\r\n\r\n  // Use provided functions or defaults\r\n  const timeAgoFn = getTimeAgo || defaultGetTimeAgo;\r\n  const categoryFn = getCategory || defaultGetCategory;\r\n  const categoryColorFn = getCategoryColor || defaultGetCategoryColor;\r\n\r\n  // Safety check: ensure blogs is an array\r\n  if (!blogs || !Array.isArray(blogs)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Row className={className}>\r\n      {blogs.map((blogItem) => {\r\n        // Use placeholder if image is missing or invalid\r\n        const blogImage = blogItem.image && blogItem.image.trim() !== ''\r\n          ? blogItem.image\r\n          : placeholderImage;\r\n\r\n        const category = categoryFn(blogItem.category);\r\n        const categoryColor = categoryColorFn(category);\r\n        const timeAgo = timeAgoFn(blogItem.updated_at || blogItem.created_at);\r\n\r\n        return (\r\n          <Col {...colProps} key={blogItem.id}>\r\n            <div className={cardClassName}>\r\n              <div className={imageWrapperClassName}>\r\n                <LinkComponent to={`/blog-view/${blogItem.slug}`}>\r\n                  <BlogImage\r\n                    image={blogImage}\r\n                    fallback={placeholderImage}\r\n                    className={imageClassName}\r\n                  />\r\n                  <div \r\n                    className={categoryTagClassName} \r\n                    style={{ backgroundColor: categoryColor }}\r\n                  >\r\n                    {category}\r\n                  </div>\r\n                </LinkComponent>\r\n              </div>\r\n              <div className={contentClassName}>\r\n                <h2 className={titleClassName}>{blogItem.title}</h2>\r\n                <p className={descClassName}>{blogItem.excerpt}</p>\r\n                <div className={authorClassName}>\r\n                  <div className={authorLeftClassName}>\r\n                    <div className={authorAvatarClassName}>\r\n                      <i className=\"fa-solid fa-user\"></i>\r\n                    </div>\r\n                    <div className={authorInfoClassName}>\r\n                      <span className={authorNameClassName}>\r\n                        {blogItem.author || blogItem.writer || blogItem.user?.name || blogItem.created_by?.name || 'Admin'}\r\n                      </span>\r\n                      <span className={authorTimeClassName}>{timeAgo}</span>\r\n                    </div>\r\n                  </div>\r\n                  <LinkComponent\r\n                    to={`/blog-view/${blogItem.slug}`}\r\n                    className={arrowLinkClassName}\r\n                  >\r\n                    <i className=\"fa-solid fa-arrow-up-right-from-square\"></i>\r\n                  </LinkComponent>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </Col>\r\n        );\r\n      })}\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default BlogCard;\r\n\r\n"],"names":["BlogImage","_ref","image","fallback","className","imgSrc","setImgSrc","useState","useEffect","trim","img","Image","onerror","onload","src","_jsx","style","backgroundImage","concat","BlogCard","_ref2","blogs","placeholderImage","categoryColors","getTimeAgo","getCategory","getCategoryColor","LinkComponent","Link","cardClassName","imageWrapperClassName","imageClassName","categoryTagClassName","contentClassName","titleClassName","descClassName","authorClassName","authorLeftClassName","authorAvatarClassName","authorInfoClassName","authorNameClassName","authorTimeClassName","arrowLinkClassName","colProps","lg","md","defaultGetTimeAgo","dateString","date","Date","now","diffInSeconds","Math","floor","defaultGetCategory","category","name","defaultGetCategoryColor","defaultColors","colors","timeAgoFn","categoryFn","categoryColorFn","Array","isArray","Row","children","map","blogItem","_blogItem$user","_blogItem$created_by","blogImage","categoryColor","timeAgo","updated_at","created_at","_createElement","Col","_objectSpread","key","id","_jsxs","to","slug","backgroundColor","title","excerpt","author","writer","user","created_by"],"mappings":"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"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@veeyaainnovatives/blog-card",
+  "version": "1.0.0",
+  "description": "A reusable Blog card component for React applications",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "blog",
+    "card",
+    "component",
+    "veeyaainnovatives"
+  ],
+  "author": "Veeyaa Innovatives",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-bootstrap": "^2.0.0",
+    "react-router-dom": "^6.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "rollup": "^4.6.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/npmveeyaa/blog-card.git"
+  },
+  "homepage": "https://github.com/npmveeyaa/blog-card#readme",
+  "bugs": {
+    "url": "https://github.com/npmveeyaa/blog-card/issues"
+  }
+}
+