@beyondcorp/beyond-ui 1.2.53 → 1.2.55

package/dist/components/Blog/AllBlogsView.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { BlogPost } from './types';
+interface AllBlogsViewProps {
+    onPostClick?: (post: BlogPost) => void;
+    className?: string;
+}
+export declare const AllBlogsView: React.FC<AllBlogsViewProps>;
+export {};

package/dist/components/Blog/AllBlogsView.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Search, Grid2x2, List, Filter, X, Tag, MessageCircle, Calendar, Eye, Heart } from 'lucide-react';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+import { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from '../Modal/Modal.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
+import { useBlog } from './hooks/useBlog.js';
+import { sampleBlogCategories } from './data/sampleData.js';
+
+const AllBlogsView = ({ onPostClick, className = '', }) => {
+    const [viewMode, setViewMode] = useState('grid');
+    const [showFilters, setShowFilters] = useState(false);
+    const { isAbove, isBelow } = useBreakpoint();
+    const { posts, loading, error, filters, pagination, updateFilters, clearFilters, loadMore, searchPosts, } = useBlog({ pageSize: 12 });
+    const handleFilterChange = (filterType, value) => {
+        updateFilters({ [filterType]: value });
+    };
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    };
+    // Responsive grid columns based on screen size and view mode
+    const getGridColumns = () => {
+        if (viewMode === 'list')
+            return 'grid-cols-1';
+        if (isBelow('sm'))
+            return 'grid-cols-1';
+        if (isBelow('lg'))
+            return 'grid-cols-2';
+        return 'grid-cols-2 xl:grid-cols-3';
+    };
+    const BlogPostCard = ({ post, viewMode }) => (jsxs(Card, { className: `hover:shadow-lg transition-all duration-300 cursor-pointer ${viewMode === 'list' ? 'flex flex-col sm:flex-row' : ''}`, onClick: () => onPostClick?.(post), children: [jsx("div", { className: `${viewMode === 'list'
+                    ? 'w-full sm:w-64 sm:flex-shrink-0 aspect-video sm:aspect-square'
+                    : 'aspect-video'} bg-gray-100 rounded-t-lg ${viewMode === 'list' ? 'sm:rounded-l-lg sm:rounded-tr-none' : ''} overflow-hidden`, children: jsx("img", { src: post.seoMeta.ogImage || 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=400', alt: post.title, className: "w-full h-full object-cover hover:scale-105 transition-transform duration-300" }) }), jsx("div", { className: `${viewMode === 'list' ? 'flex-1' : ''}`, children: jsxs(CardContent, { className: "p-4 sm:p-6", children: [jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-3", children: [jsx(Badge, { variant: "default", className: "text-xs", style: { backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }, children: post.category }), post.featured && (jsx(Badge, { variant: "warning", className: "text-xs", children: "Featured" }))] }), jsx("h2", { className: "text-lg sm:text-xl font-bold text-gray-900 mb-3 line-clamp-2 leading-tight", children: post.title }), jsx("p", { className: "text-gray-600 mb-4 line-clamp-3 text-sm sm:text-base leading-relaxed", children: post.excerpt }), jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 space-y-3 sm:space-y-0", children: jsxs("div", { className: "flex items-center space-x-3", children: [jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: post.author.avatar }), jsx(AvatarFallback, { children: post.author.name[0] })] }), jsxs("div", { children: [jsx("p", { className: "text-sm font-medium text-gray-900", children: post.author.name }), jsxs("div", { className: "flex items-center space-x-2 text-xs text-gray-500", children: [jsx(Calendar, { className: "h-3 w-3" }), jsx("span", { children: formatDate(post.publishedAt) }), jsx("span", { children: "\u2022" }), jsxs("span", { children: [post.readingTime, " min read"] })] })] })] }) }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-3 sm:space-x-4 text-sm text-gray-500", children: [jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Eye, { className: "h-4 w-4" }), jsx("span", { className: "hidden sm:inline", children: post.stats.views.toLocaleString() }), jsx("span", { className: "sm:hidden", children: post.stats.views > 999 ? `${Math.floor(post.stats.views / 1000)}k` : post.stats.views })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Heart, { className: "h-4 w-4" }), jsx("span", { children: post.stats.likes })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(MessageCircle, { className: "h-4 w-4" }), jsx("span", { children: post.stats.comments })] })] }), jsxs("div", { className: "flex flex-wrap gap-1", children: [post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (jsx(Badge, { variant: "outline", className: "text-xs", children: tag }, tag))), post.tags.length > (isBelow('sm') ? 1 : 2) && (jsxs(Badge, { variant: "outline", className: "text-xs", children: ["+", post.tags.length - (isBelow('sm') ? 1 : 2)] }))] })] })] }) })] }));
+    return (jsxs("div", { className: `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 ${className}`, children: [jsxs("div", { className: "flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 mb-6 sm:mb-8", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl sm:text-3xl font-bold text-gray-900 mb-2", children: "Blog Posts" }), jsx("p", { className: "text-gray-600 text-sm sm:text-base", children: "Discover insights, tutorials, and stories from our community" })] }), jsxs("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center space-y-3 sm:space-y-0 sm:space-x-4", children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search posts...", value: filters.search, onChange: (e) => searchPosts(e.target.value), className: "pl-10 w-full sm:w-64" })] }), jsxs("select", { value: filters.sortBy, onChange: (e) => handleFilterChange('sortBy', e.target.value), className: "border border-gray-300 rounded-lg px-3 py-2 bg-white text-sm sm:text-base", children: [jsx("option", { value: "newest", children: "Newest First" }), jsx("option", { value: "oldest", children: "Oldest First" }), jsx("option", { value: "popular", children: "Most Popular" }), jsx("option", { value: "trending", children: "Trending" })] }), isAbove('sm') && (jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === 'grid' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('grid'), children: jsx(Grid2x2, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === 'list' ? 'primary' : 'ghost', size: "sm", onClick: () => setViewMode('list'), children: jsx(List, { className: "h-4 w-4" }) })] })), jsxs(Button, { variant: "outline", onClick: () => setShowFilters(!showFilters), className: "lg:hidden", children: [jsx(Filter, { className: "mr-2 h-4 w-4" }), "Filters"] })] })] }), jsxs("div", { className: "flex gap-6 lg:gap-8", children: [jsx("div", { className: `${showFilters ? 'block' : 'hidden'} lg:block w-full lg:w-64 lg:flex-shrink-0`, children: jsx("div", { className: "lg:sticky lg:top-4", style: {
+                                maxHeight: isAbove('lg') ? 'calc(100vh - 2rem)' : 'auto',
+                                overflowY: isAbove('lg') ? 'auto' : 'visible',
+                            }, children: jsxs(Card, { children: [jsx(CardHeader, { children: jsxs(CardTitle, { className: "flex items-center justify-between text-base", children: [jsx("span", { children: "Filters" }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: "Clear All" }), isBelow('lg') && (jsx(Button, { variant: "ghost", size: "sm", onClick: () => setShowFilters(false), children: jsx(X, { className: "h-4 w-4" }) }))] })] }) }), jsxs(CardContent, { className: "space-y-6", children: [jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3 text-sm", children: "Categories" }), jsx("div", { className: "space-y-2", children: sampleBlogCategories.map(category => (jsxs("label", { className: "flex items-center space-x-2 cursor-pointer", children: [jsx("input", { type: "checkbox", checked: filters.categories.includes(category.id), onChange: (e) => {
+                                                                        const newCategories = e.target.checked
+                                                                            ? [...filters.categories, category.id]
+                                                                            : filters.categories.filter(c => c !== category.id);
+                                                                        handleFilterChange('categories', newCategories);
+                                                                    }, className: "rounded border-gray-300 text-primary-600 focus:ring-primary-500" }), jsx("span", { className: "text-sm text-gray-700", children: category.name }), jsx(Badge, { variant: "outline", className: "text-xs ml-auto", children: category.postCount })] }, category.id))) })] }), jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3 text-sm", children: "Popular Tags" }), jsx("div", { className: "flex flex-wrap gap-2", children: ['React', 'TypeScript', 'CSS', 'JavaScript', 'Design', 'Performance'].map(tag => (jsxs(Badge, { variant: filters.tags.includes(tag) ? 'default' : 'outline', className: "cursor-pointer text-xs hover:bg-primary-50 transition-colors", onClick: () => {
+                                                                const newTags = filters.tags.includes(tag)
+                                                                    ? filters.tags.filter(t => t !== tag)
+                                                                    : [...filters.tags, tag];
+                                                                handleFilterChange('tags', newTags);
+                                                            }, children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag))) })] })] })] }) }) }), jsx("div", { className: "flex-1 min-w-0", children: loading ? (jsx("div", { className: `grid gap-4 sm:gap-6 ${getGridColumns()}`, children: Array.from({ length: 6 }).map((_, i) => (jsxs(Card, { children: [jsx("div", { className: "aspect-video bg-gray-100 rounded-t-lg", children: jsx(Skeleton, { className: "w-full h-full" }) }), jsxs(CardContent, { className: "p-4 sm:p-6", children: [jsx(Skeleton, { className: "h-4 w-20 mb-3" }), jsx(Skeleton, { className: "h-6 w-full mb-3" }), jsx(Skeleton, { className: "h-4 w-full mb-2" }), jsx(Skeleton, { className: "h-4 w-3/4 mb-4" }), jsxs("div", { className: "flex items-center space-x-3", children: [jsx(Skeleton, { className: "h-8 w-8 rounded-full" }), jsx(Skeleton, { className: "h-4 w-24" })] })] })] }, i))) })) : error ? (jsxs("div", { className: "text-center py-12", children: [jsx("div", { className: "text-red-500 mb-4", children: jsx(MessageCircle, { className: "h-12 sm:h-16 w-12 sm:w-16 mx-auto" }) }), jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "Error Loading Posts" }), jsx("p", { className: "text-gray-600 mb-4 text-sm sm:text-base", children: error }), jsx(Button, { variant: "primary", onClick: () => window.location.reload(), children: "Try Again" })] })) : posts.length === 0 ? (jsxs("div", { className: "text-center py-12", children: [jsx("div", { className: "text-gray-400 mb-4", children: jsx(Search, { className: "h-12 sm:h-16 w-12 sm:w-16 mx-auto" }) }), jsx("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "No posts found" }), jsx("p", { className: "text-gray-600 mb-4 text-sm sm:text-base", children: "Try adjusting your search or filter criteria" }), jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear Filters" })] })) : (jsxs(Fragment, { children: [jsx("div", { className: `grid gap-4 sm:gap-6 ${getGridColumns()}`, children: posts.map(post => (jsx(BlogPostCard, { post: post, viewMode: viewMode }, post.id))) }), pagination.hasNext && (jsx("div", { className: "text-center mt-8 sm:mt-12", children: jsx(Button, { variant: "outline", onClick: loadMore, disabled: loading, size: isBelow('sm') ? 'sm' : 'md', className: "w-full sm:w-auto", children: loading ? 'Loading...' : 'Load More Posts' }) })), jsxs("div", { className: "mt-6 sm:mt-8 text-center text-sm text-gray-600", children: ["Showing ", posts.length, " of ", pagination.total, " posts"] })] })) })] }), jsxs(Modal, { open: showFilters && isBelow('lg'), onOpenChange: setShowFilters, children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: "Filter Posts" }) }), jsx(ModalContent, { children: jsxs("div", { className: "space-y-6", children: [jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Categories" }), jsx("div", { className: "space-y-2", children: sampleBlogCategories.map(category => (jsxs("label", { className: "flex items-center space-x-2", children: [jsx("input", { type: "checkbox", checked: filters.categories.includes(category.id), onChange: (e) => {
+                                                            const newCategories = e.target.checked
+                                                                ? [...filters.categories, category.id]
+                                                                : filters.categories.filter(c => c !== category.id);
+                                                            handleFilterChange('categories', newCategories);
+                                                        }, className: "rounded border-gray-300" }), jsx("span", { className: "text-sm text-gray-700", children: category.name }), jsx(Badge, { variant: "outline", className: "text-xs", children: category.postCount })] }, category.id))) })] }), jsxs("div", { children: [jsx("h4", { className: "font-medium text-gray-900 mb-3", children: "Tags" }), jsx("div", { className: "flex flex-wrap gap-2", children: ['React', 'TypeScript', 'CSS', 'JavaScript', 'Design', 'Performance'].map(tag => (jsxs(Badge, { variant: filters.tags.includes(tag) ? 'default' : 'outline', className: "cursor-pointer", onClick: () => {
+                                                    const newTags = filters.tags.includes(tag)
+                                                        ? filters.tags.filter(t => t !== tag)
+                                                        : [...filters.tags, tag];
+                                                    handleFilterChange('tags', newTags);
+                                                }, children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag))) })] })] }) }), jsxs(ModalFooter, { children: [jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear All" }), jsx(Button, { variant: "primary", onClick: () => setShowFilters(false), children: "Apply Filters" })] })] })] }));
+};
+
+export { AllBlogsView };
+//# sourceMappingURL=AllBlogsView.js.map

package/dist/components/Blog/AllBlogsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllBlogsView.js","sources":["../../../src/components/Blog/AllBlogsView.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Search, Filter, Grid2x2 as Grid, List, Calendar, User, Tag, Eye, Heart, MessageCircle, X } from 'lucide-react';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { Skeleton } from '../Skeleton';\nimport { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from '../Modal';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useBlog } from './hooks/useBlog';\nimport type { BlogPost, BlogFilters } from './types';\nimport { sampleBlogCategories } from './data/sampleData';\n\ninterface AllBlogsViewProps {\n  onPostClick?: (post: BlogPost) => void;\n  className?: string;\n}\n\nexport const AllBlogsView: React.FC<AllBlogsViewProps> = ({\n  onPostClick,\n  className = '',\n}) => {\n  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');\n  const [showFilters, setShowFilters] = useState(false);\n  const { isAbove, isBelow } = useBreakpoint();\n  \n  const {\n    posts,\n    loading,\n    error,\n    filters,\n    pagination,\n    updateFilters,\n    clearFilters,\n    loadMore,\n    searchPosts,\n  } = useBlog({ pageSize: 12 });\n\n  const handleFilterChange = (filterType: keyof BlogFilters, value: any) => {\n    updateFilters({ [filterType]: value });\n  };\n\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleDateString('en-US', {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  };\n\n  // Responsive grid columns based on screen size and view mode\n  const getGridColumns = () => {\n    if (viewMode === 'list') return 'grid-cols-1';\n    if (isBelow('sm')) return 'grid-cols-1';\n    if (isBelow('lg')) return 'grid-cols-2';\n    return 'grid-cols-2 xl:grid-cols-3';\n  };\n\n  const BlogPostCard: React.FC<{ post: BlogPost; viewMode: 'grid' | 'list' }> = ({ post, viewMode }) => (\n    <Card \n      className={`hover:shadow-lg transition-all duration-300 cursor-pointer ${\n        viewMode === 'list' ? 'flex flex-col sm:flex-row' : ''\n      }`}\n      onClick={() => onPostClick?.(post)}\n    >\n      <div className={`${\n        viewMode === 'list' \n          ? 'w-full sm:w-64 sm:flex-shrink-0 aspect-video sm:aspect-square' \n          : 'aspect-video'\n      } bg-gray-100 rounded-t-lg ${viewMode === 'list' ? 'sm:rounded-l-lg sm:rounded-tr-none' : ''} overflow-hidden`}>\n        <img\n          src={post.seoMeta.ogImage || 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=400'}\n          alt={post.title}\n          className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-300\"\n        />\n      </div>\n      <div className={`${viewMode === 'list' ? 'flex-1' : ''}`}>\n        <CardContent className=\"p-4 sm:p-6\">\n          <div className=\"flex flex-wrap items-center gap-2 mb-3\">\n            <Badge \n              variant=\"default\"\n              className=\"text-xs\"\n              style={{ backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }}\n            >\n              {post.category}\n            </Badge>\n            {post.featured && (\n              <Badge variant=\"warning\" className=\"text-xs\">Featured</Badge>\n            )}\n          </div>\n          \n          <h2 className=\"text-lg sm:text-xl font-bold text-gray-900 mb-3 line-clamp-2 leading-tight\">\n            {post.title}\n          </h2>\n          \n          <p className=\"text-gray-600 mb-4 line-clamp-3 text-sm sm:text-base leading-relaxed\">\n            {post.excerpt}\n          </p>\n\n          <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 space-y-3 sm:space-y-0\">\n            <div className=\"flex items-center space-x-3\">\n              <Avatar size=\"sm\">\n                <AvatarImage src={post.author.avatar} />\n                <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n              </Avatar>\n              <div>\n                <p className=\"text-sm font-medium text-gray-900\">{post.author.name}</p>\n                <div className=\"flex items-center space-x-2 text-xs text-gray-500\">\n                  <Calendar className=\"h-3 w-3\" />\n                  <span>{formatDate(post.publishedAt)}</span>\n                  <span>•</span>\n                  <span>{post.readingTime} min read</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center space-x-3 sm:space-x-4 text-sm text-gray-500\">\n              <div className=\"flex items-center space-x-1\">\n                <Eye className=\"h-4 w-4\" />\n                <span className=\"hidden sm:inline\">{post.stats.views.toLocaleString()}</span>\n                <span className=\"sm:hidden\">{post.stats.views > 999 ? `${Math.floor(post.stats.views/1000)}k` : post.stats.views}</span>\n              </div>\n              <div className=\"flex items-center space-x-1\">\n                <Heart className=\"h-4 w-4\" />\n                <span>{post.stats.likes}</span>\n              </div>\n              <div className=\"flex items-center space-x-1\">\n                <MessageCircle className=\"h-4 w-4\" />\n                <span>{post.stats.comments}</span>\n              </div>\n            </div>\n            \n            <div className=\"flex flex-wrap gap-1\">\n              {post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (\n                <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n                  {tag}\n                </Badge>\n              ))}\n              {post.tags.length > (isBelow('sm') ? 1 : 2) && (\n                <Badge variant=\"outline\" className=\"text-xs\">\n                  +{post.tags.length - (isBelow('sm') ? 1 : 2)}\n                </Badge>\n              )}\n            </div>\n          </div>\n        </CardContent>\n      </div>\n    </Card>\n  );\n\n  return (\n    <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8 ${className}`}>\n      {/* Header - Responsive layout */}\n      <div className=\"flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 mb-6 sm:mb-8\">\n        <div>\n          <h1 className=\"text-2xl sm:text-3xl font-bold text-gray-900 mb-2\">Blog Posts</h1>\n          <p className=\"text-gray-600 text-sm sm:text-base\">\n            Discover insights, tutorials, and stories from our community\n          </p>\n        </div>\n        \n        {/* Search and Controls - Responsive layout */}\n        <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center space-y-3 sm:space-y-0 sm:space-x-4\">\n          <div className=\"relative\">\n            <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n            <Input\n              placeholder=\"Search posts...\"\n              value={filters.search}\n              onChange={(e) => searchPosts(e.target.value)}\n              className=\"pl-10 w-full sm:w-64\"\n            />\n          </div>\n          \n          <select\n            value={filters.sortBy}\n            onChange={(e) => handleFilterChange('sortBy', e.target.value)}\n            className=\"border border-gray-300 rounded-lg px-3 py-2 bg-white text-sm sm:text-base\"\n          >\n            <option value=\"newest\">Newest First</option>\n            <option value=\"oldest\">Oldest First</option>\n            <option value=\"popular\">Most Popular</option>\n            <option value=\"trending\">Trending</option>\n          </select>\n\n          {/* View Mode Toggle - Hidden on mobile */}\n          {isAbove('sm') && (\n            <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\n              <Button\n                variant={viewMode === 'grid' ? 'primary' : 'ghost'}\n                size=\"sm\"\n                onClick={() => setViewMode('grid')}\n              >\n                <Grid className=\"h-4 w-4\" />\n              </Button>\n              <Button\n                variant={viewMode === 'list' ? 'primary' : 'ghost'}\n                size=\"sm\"\n                onClick={() => setViewMode('list')}\n              >\n                <List className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          <Button\n            variant=\"outline\"\n            onClick={() => setShowFilters(!showFilters)}\n            className=\"lg:hidden\"\n          >\n            <Filter className=\"mr-2 h-4 w-4\" />\n            Filters\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex gap-6 lg:gap-8\">\n        {/* Filters Sidebar - Fixed on desktop, modal on mobile */}\n        <div className={`${showFilters ? 'block' : 'hidden'} lg:block w-full lg:w-64 lg:flex-shrink-0`}>\n          <div \n            className=\"lg:sticky lg:top-4\"\n            style={{\n              maxHeight: isAbove('lg') ? 'calc(100vh - 2rem)' : 'auto',\n              overflowY: isAbove('lg') ? 'auto' : 'visible',\n            }}\n          >\n            <Card>\n              <CardHeader>\n                <CardTitle className=\"flex items-center justify-between text-base\">\n                  <span>Filters</span>\n                  <div className=\"flex items-center space-x-2\">\n                    <Button variant=\"ghost\" size=\"sm\" onClick={clearFilters}>\n                      Clear All\n                    </Button>\n                    {isBelow('lg') && (\n                      <Button variant=\"ghost\" size=\"sm\" onClick={() => setShowFilters(false)}>\n                        <X className=\"h-4 w-4\" />\n                      </Button>\n                    )}\n                  </div>\n                </CardTitle>\n              </CardHeader>\n              <CardContent className=\"space-y-6\">\n                {/* Categories */}\n                <div>\n                  <h4 className=\"font-medium text-gray-900 mb-3 text-sm\">Categories</h4>\n                  <div className=\"space-y-2\">\n                    {sampleBlogCategories.map(category => (\n                      <label key={category.id} className=\"flex items-center space-x-2 cursor-pointer\">\n                        <input\n                          type=\"checkbox\"\n                          checked={filters.categories.includes(category.id)}\n                          onChange={(e) => {\n                            const newCategories = e.target.checked\n                              ? [...filters.categories, category.id]\n                              : filters.categories.filter(c => c !== category.id);\n                            handleFilterChange('categories', newCategories);\n                          }}\n                          className=\"rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n                        />\n                        <span className=\"text-sm text-gray-700\">{category.name}</span>\n                        <Badge variant=\"outline\" className=\"text-xs ml-auto\">\n                          {category.postCount}\n                        </Badge>\n                      </label>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Popular Tags */}\n                <div>\n                  <h4 className=\"font-medium text-gray-900 mb-3 text-sm\">Popular Tags</h4>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {['React', 'TypeScript', 'CSS', 'JavaScript', 'Design', 'Performance'].map(tag => (\n                      <Badge\n                        key={tag}\n                        variant={filters.tags.includes(tag) ? 'default' : 'outline'}\n                        className=\"cursor-pointer text-xs hover:bg-primary-50 transition-colors\"\n                        onClick={() => {\n                          const newTags = filters.tags.includes(tag)\n                            ? filters.tags.filter(t => t !== tag)\n                            : [...filters.tags, tag];\n                          handleFilterChange('tags', newTags);\n                        }}\n                      >\n                        <Tag className=\"h-3 w-3 mr-1\" />\n                        {tag}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        {/* Blog Posts - Responsive grid */}\n        <div className=\"flex-1 min-w-0\">\n          {loading ? (\n            <div className={`grid gap-4 sm:gap-6 ${getGridColumns()}`}>\n              {Array.from({ length: 6 }).map((_, i) => (\n                <Card key={i}>\n                  <div className=\"aspect-video bg-gray-100 rounded-t-lg\">\n                    <Skeleton className=\"w-full h-full\" />\n                  </div>\n                  <CardContent className=\"p-4 sm:p-6\">\n                    <Skeleton className=\"h-4 w-20 mb-3\" />\n                    <Skeleton className=\"h-6 w-full mb-3\" />\n                    <Skeleton className=\"h-4 w-full mb-2\" />\n                    <Skeleton className=\"h-4 w-3/4 mb-4\" />\n                    <div className=\"flex items-center space-x-3\">\n                      <Skeleton className=\"h-8 w-8 rounded-full\" />\n                      <Skeleton className=\"h-4 w-24\" />\n                    </div>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          ) : error ? (\n            <div className=\"text-center py-12\">\n              <div className=\"text-red-500 mb-4\">\n                <MessageCircle className=\"h-12 sm:h-16 w-12 sm:w-16 mx-auto\" />\n              </div>\n              <h3 className=\"text-lg font-medium text-gray-900 mb-2\">Error Loading Posts</h3>\n              <p className=\"text-gray-600 mb-4 text-sm sm:text-base\">{error}</p>\n              <Button variant=\"primary\" onClick={() => window.location.reload()}>\n                Try Again\n              </Button>\n            </div>\n          ) : posts.length === 0 ? (\n            <div className=\"text-center py-12\">\n              <div className=\"text-gray-400 mb-4\">\n                <Search className=\"h-12 sm:h-16 w-12 sm:w-16 mx-auto\" />\n              </div>\n              <h3 className=\"text-lg font-medium text-gray-900 mb-2\">No posts found</h3>\n              <p className=\"text-gray-600 mb-4 text-sm sm:text-base\">\n                Try adjusting your search or filter criteria\n              </p>\n              <Button variant=\"outline\" onClick={clearFilters}>\n                Clear Filters\n              </Button>\n            </div>\n          ) : (\n            <>\n              <div className={`grid gap-4 sm:gap-6 ${getGridColumns()}`}>\n                {posts.map(post => (\n                  <BlogPostCard key={post.id} post={post} viewMode={viewMode} />\n                ))}\n              </div>\n\n              {/* Load More / Pagination - Responsive button */}\n              {pagination.hasNext && (\n                <div className=\"text-center mt-8 sm:mt-12\">\n                  <Button\n                    variant=\"outline\"\n                    onClick={loadMore}\n                    disabled={loading}\n                    size={isBelow('sm') ? 'sm' : 'md'}\n                    className=\"w-full sm:w-auto\"\n                  >\n                    {loading ? 'Loading...' : 'Load More Posts'}\n                  </Button>\n                </div>\n              )}\n\n              {/* Results Info */}\n              <div className=\"mt-6 sm:mt-8 text-center text-sm text-gray-600\">\n                Showing {posts.length} of {pagination.total} posts\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Mobile Filters Modal */}\n      <Modal open={showFilters && isBelow('lg')} onOpenChange={setShowFilters}>\n        <ModalHeader>\n          <ModalTitle>Filter Posts</ModalTitle>\n        </ModalHeader>\n        <ModalContent>\n          <div className=\"space-y-6\">\n            {/* Categories */}\n            <div>\n              <h4 className=\"font-medium text-gray-900 mb-3\">Categories</h4>\n              <div className=\"space-y-2\">\n                {sampleBlogCategories.map(category => (\n                  <label key={category.id} className=\"flex items-center space-x-2\">\n                    <input\n                      type=\"checkbox\"\n                      checked={filters.categories.includes(category.id)}\n                      onChange={(e) => {\n                        const newCategories = e.target.checked\n                          ? [...filters.categories, category.id]\n                          : filters.categories.filter(c => c !== category.id);\n                        handleFilterChange('categories', newCategories);\n                      }}\n                      className=\"rounded border-gray-300\"\n                    />\n                    <span className=\"text-sm text-gray-700\">{category.name}</span>\n                    <Badge variant=\"outline\" className=\"text-xs\">\n                      {category.postCount}\n                    </Badge>\n                  </label>\n                ))}\n              </div>\n            </div>\n\n            {/* Tags */}\n            <div>\n              <h4 className=\"font-medium text-gray-900 mb-3\">Tags</h4>\n              <div className=\"flex flex-wrap gap-2\">\n                {['React', 'TypeScript', 'CSS', 'JavaScript', 'Design', 'Performance'].map(tag => (\n                  <Badge\n                    key={tag}\n                    variant={filters.tags.includes(tag) ? 'default' : 'outline'}\n                    className=\"cursor-pointer\"\n                    onClick={() => {\n                      const newTags = filters.tags.includes(tag)\n                        ? filters.tags.filter(t => t !== tag)\n                        : [...filters.tags, tag];\n                      handleFilterChange('tags', newTags);\n                    }}\n                  >\n                    <Tag className=\"h-3 w-3 mr-1\" />\n                    {tag}\n                  </Badge>\n                ))}\n              </div>\n            </div>\n          </div>\n        </ModalContent>\n        <ModalFooter>\n          <Button variant=\"outline\" onClick={clearFilters}>\n            Clear All\n          </Button>\n          <Button variant=\"primary\" onClick={() => setShowFilters(false)}>\n            Apply Filters\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </div>\n  );\n};"],"names":["_jsxs","_jsx","Grid","_Fragment"],"mappings":"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"}

package/dist/components/Blog/BlogCommentSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface BlogCommentSectionProps {
+    postId: string;
+    className?: string;
+}
+export declare const BlogCommentSection: React.FC<BlogCommentSectionProps>;
+export {};

package/dist/components/Blog/BlogCommentSection.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { MessageCircle, Send, ThumbsUp, ThumbsDown, Reply, Flag } from 'lucide-react';
+import { Button } from '../Button/Button.js';
+import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
+import { Badge } from '../Badge/Badge.js';
+import { Alert, AlertDescription } from '../Alert/Alert.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
+import { useComments } from './hooks/useComments.js';
+
+const CommentItem = ({ comment, onLike, onDislike, onReport, onReply, level = 0, }) => {
+    const [showReplyForm, setShowReplyForm] = useState(false);
+    const [replyContent, setReplyContent] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const { isBelow } = useBreakpoint();
+    const handleReplySubmit = async () => {
+        if (!replyContent.trim())
+            return;
+        setIsSubmitting(true);
+        try {
+            await onReply(replyContent, comment.id);
+            setReplyContent('');
+            setShowReplyForm(false);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: isBelow('sm') ? '2-digit' : 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    return (jsxs("div", { className: `${level > 0 ? 'ml-4 sm:ml-6 lg:ml-8 pl-3 sm:pl-4 border-l-2 border-gray-100' : ''}`, children: [jsxs("div", { className: "flex items-start space-x-3 mb-4", children: [jsxs(Avatar, { size: isBelow('sm') ? 'sm' : 'md', children: [jsx(AvatarImage, { src: comment.author.avatar }), jsx(AvatarFallback, { children: comment.author.name[0] })] }), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center space-y-1 sm:space-y-0 sm:space-x-2 mb-2", children: [jsx("span", { className: "font-medium text-gray-900 text-sm sm:text-base", children: comment.author.name }), jsx("span", { className: "text-xs sm:text-sm text-gray-500", children: formatDate(comment.createdAt) }), comment.isReported && (jsx(Badge, { variant: "warning", className: "text-xs", children: "Reported" }))] }), jsx("p", { className: "text-gray-700 mb-3 leading-relaxed text-sm sm:text-base", children: comment.content }), jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4", children: [jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onLike(comment.id), className: "text-gray-500 hover:text-green-600 p-1 sm:p-2", children: [jsx(ThumbsUp, { className: "h-3 w-3 sm:h-4 sm:w-4 mr-1" }), jsx("span", { className: "text-xs sm:text-sm", children: comment.likes })] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onDislike(comment.id), className: "text-gray-500 hover:text-red-600 p-1 sm:p-2", children: [jsx(ThumbsDown, { className: "h-3 w-3 sm:h-4 sm:w-4 mr-1" }), jsx("span", { className: "text-xs sm:text-sm", children: comment.dislikes })] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setShowReplyForm(!showReplyForm), className: "text-gray-500 hover:text-primary-600 p-1 sm:p-2", children: [jsx(Reply, { className: "h-3 w-3 sm:h-4 sm:w-4 mr-1" }), jsx("span", { className: "text-xs sm:text-sm", children: "Reply" })] }), jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onReport(comment.id), className: "text-gray-500 hover:text-orange-600 p-1 sm:p-2", children: [jsx(Flag, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsx("span", { className: "sr-only", children: "Report" })] })] }), showReplyForm && (jsxs("div", { className: "mt-4 p-3 sm:p-4 bg-gray-50 rounded-lg", children: [jsx(Textarea, { placeholder: "Write a reply...", value: replyContent, onChange: (e) => setReplyContent(e.target.value), className: "mb-3 text-sm sm:text-base", rows: 3 }), jsxs("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2", children: [jsxs(Button, { variant: "primary", size: "sm", onClick: handleReplySubmit, disabled: !replyContent.trim() || isSubmitting, className: "w-full sm:w-auto", children: [jsx(Send, { className: "h-3 w-3 sm:h-4 sm:w-4 mr-1" }), isSubmitting ? 'Posting...' : 'Post Reply'] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setShowReplyForm(false), className: "w-full sm:w-auto", children: "Cancel" })] })] }))] })] }), comment.replies && comment.replies.length > 0 && (jsx("div", { className: "mt-4", children: comment.replies.map(reply => (jsx(CommentItem, { comment: reply, onLike: onLike, onDislike: onDislike, onReport: onReport, onReply: onReply, level: level + 1 }, reply.id))) }))] }));
+};
+const BlogCommentSection = ({ postId, className = '', }) => {
+    const [newComment, setNewComment] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const { isBelow } = useBreakpoint();
+    const { comments, loading, error, addComment, likeComment, dislikeComment, reportComment, getCommentCount, } = useComments({ postId });
+    const handleSubmitComment = async () => {
+        if (!newComment.trim())
+            return;
+        setIsSubmitting(true);
+        try {
+            await addComment(newComment);
+            setNewComment('');
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleReply = async (content, parentId) => {
+        await addComment(content, parentId);
+    };
+    return (jsx("div", { className: `mt-8 sm:mt-12 ${className}`, children: jsxs(Card, { children: [jsx(CardHeader, { children: jsxs(CardTitle, { className: "flex items-center text-lg sm:text-xl", children: [jsx(MessageCircle, { className: "h-5 w-5 mr-2" }), "Comments (", getCommentCount(), ")"] }) }), jsxs(CardContent, { children: [jsx("div", { className: "mb-6 sm:mb-8", children: jsxs("div", { className: "flex items-start space-x-3", children: [jsxs(Avatar, { size: isBelow('sm') ? 'sm' : 'md', children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "YU" })] }), jsxs("div", { className: "flex-1", children: [jsx(Textarea, { placeholder: "Share your thoughts...", value: newComment, onChange: (e) => setNewComment(e.target.value), className: "mb-3 text-sm sm:text-base", rows: isBelow('sm') ? 3 : 4 }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0", children: [jsx("p", { className: "text-xs sm:text-sm text-gray-500", children: "Be respectful and constructive in your comments." }), jsxs(Button, { variant: "primary", onClick: handleSubmitComment, disabled: !newComment.trim() || isSubmitting, size: isBelow('sm') ? 'sm' : 'md', className: "w-full sm:w-auto", children: [jsx(Send, { className: "h-3 w-3 sm:h-4 sm:w-4 mr-2" }), isSubmitting ? 'Posting...' : 'Post Comment'] })] })] })] }) }), error && (jsx(Alert, { variant: "danger", className: "mb-6", children: jsx(AlertDescription, { children: error }) })), jsx("div", { className: "space-y-4 sm:space-y-6", children: loading ? (jsxs("div", { className: "text-center py-8", children: [jsx("div", { className: "animate-spin rounded-full h-6 w-6 sm:h-8 sm:w-8 border-b-2 border-primary-600 mx-auto" }), jsx("p", { className: "text-gray-600 mt-2 text-sm sm:text-base", children: "Loading comments..." })] })) : comments.length === 0 ? (jsxs("div", { className: "text-center py-8", children: [jsx(MessageCircle, { className: "h-10 w-10 sm:h-12 sm:w-12 text-gray-400 mx-auto mb-4" }), jsx("h3", { className: "text-base sm:text-lg font-medium text-gray-900 mb-2", children: "No comments yet" }), jsx("p", { className: "text-gray-600 text-sm sm:text-base", children: "Be the first to share your thoughts!" })] })) : (comments.map(comment => (jsx(CommentItem, { comment: comment, onLike: likeComment, onDislike: dislikeComment, onReport: reportComment, onReply: handleReply }, comment.id)))) })] })] }) }));
+};
+
+export { BlogCommentSection };
+//# sourceMappingURL=BlogCommentSection.js.map

package/dist/components/Blog/BlogCommentSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogCommentSection.js","sources":["../../../src/components/Blog/BlogCommentSection.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { MessageCircle, ThumbsUp, ThumbsDown, Flag, Reply, Send, MoreHorizontal } from 'lucide-react';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Textarea } from '../Textarea';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { Badge } from '../Badge';\nimport { Alert, AlertDescription } from '../Alert';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useComments } from './hooks/useComments';\nimport type { BlogComment } from './types';\n\ninterface BlogCommentSectionProps {\n  postId: string;\n  className?: string;\n}\n\ninterface CommentItemProps {\n  comment: BlogComment;\n  onLike: (commentId: string) => void;\n  onDislike: (commentId: string) => void;\n  onReport: (commentId: string) => void;\n  onReply: (content: string, parentId: string) => void;\n  level?: number;\n}\n\nconst CommentItem: React.FC<CommentItemProps> = ({\n  comment,\n  onLike,\n  onDislike,\n  onReport,\n  onReply,\n  level = 0,\n}) => {\n  const [showReplyForm, setShowReplyForm] = useState(false);\n  const [replyContent, setReplyContent] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const { isBelow } = useBreakpoint();\n\n  const handleReplySubmit = async () => {\n    if (!replyContent.trim()) return;\n    \n    setIsSubmitting(true);\n    try {\n      await onReply(replyContent, comment.id);\n      setReplyContent('');\n      setShowReplyForm(false);\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const formatDate = (dateString: string) => {\n    return new Date(dateString).toLocaleDateString('en-US', {\n      month: 'short',\n      day: 'numeric',\n      year: isBelow('sm') ? '2-digit' : 'numeric',\n      hour: '2-digit',\n      minute: '2-digit',\n    });\n  };\n\n  return (\n    <div className={`${level > 0 ? 'ml-4 sm:ml-6 lg:ml-8 pl-3 sm:pl-4 border-l-2 border-gray-100' : ''}`}>\n      <div className=\"flex items-start space-x-3 mb-4\">\n        <Avatar size={isBelow('sm') ? 'sm' : 'md'}>\n          <AvatarImage src={comment.author.avatar} />\n          <AvatarFallback>{comment.author.name[0]}</AvatarFallback>\n        </Avatar>\n        \n        <div className=\"flex-1 min-w-0\">\n          <div className=\"flex flex-col sm:flex-row sm:items-center space-y-1 sm:space-y-0 sm:space-x-2 mb-2\">\n            <span className=\"font-medium text-gray-900 text-sm sm:text-base\">{comment.author.name}</span>\n            <span className=\"text-xs sm:text-sm text-gray-500\">{formatDate(comment.createdAt)}</span>\n            {comment.isReported && (\n              <Badge variant=\"warning\" className=\"text-xs\">Reported</Badge>\n            )}\n          </div>\n          \n          <p className=\"text-gray-700 mb-3 leading-relaxed text-sm sm:text-base\">{comment.content}</p>\n          \n          {/* Comment Actions - Responsive layout */}\n          <div className=\"flex flex-wrap items-center gap-2 sm:gap-4\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onLike(comment.id)}\n              className=\"text-gray-500 hover:text-green-600 p-1 sm:p-2\"\n            >\n              <ThumbsUp className=\"h-3 w-3 sm:h-4 sm:w-4 mr-1\" />\n              <span className=\"text-xs sm:text-sm\">{comment.likes}</span>\n            </Button>\n            \n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onDislike(comment.id)}\n              className=\"text-gray-500 hover:text-red-600 p-1 sm:p-2\"\n            >\n              <ThumbsDown className=\"h-3 w-3 sm:h-4 sm:w-4 mr-1\" />\n              <span className=\"text-xs sm:text-sm\">{comment.dislikes}</span>\n            </Button>\n            \n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowReplyForm(!showReplyForm)}\n              className=\"text-gray-500 hover:text-primary-600 p-1 sm:p-2\"\n            >\n              <Reply className=\"h-3 w-3 sm:h-4 sm:w-4 mr-1\" />\n              <span className=\"text-xs sm:text-sm\">Reply</span>\n            </Button>\n            \n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => onReport(comment.id)}\n              className=\"text-gray-500 hover:text-orange-600 p-1 sm:p-2\"\n            >\n              <Flag className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n              <span className=\"sr-only\">Report</span>\n            </Button>\n          </div>\n\n          {/* Reply Form - Responsive design */}\n          {showReplyForm && (\n            <div className=\"mt-4 p-3 sm:p-4 bg-gray-50 rounded-lg\">\n              <Textarea\n                placeholder=\"Write a reply...\"\n                value={replyContent}\n                onChange={(e) => setReplyContent(e.target.value)}\n                className=\"mb-3 text-sm sm:text-base\"\n                rows={3}\n              />\n              <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center space-y-2 sm:space-y-0 sm:space-x-2\">\n                <Button\n                  variant=\"primary\"\n                  size=\"sm\"\n                  onClick={handleReplySubmit}\n                  disabled={!replyContent.trim() || isSubmitting}\n                  className=\"w-full sm:w-auto\"\n                >\n                  <Send className=\"h-3 w-3 sm:h-4 sm:w-4 mr-1\" />\n                  {isSubmitting ? 'Posting...' : 'Post Reply'}\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  onClick={() => setShowReplyForm(false)}\n                  className=\"w-full sm:w-auto\"\n                >\n                  Cancel\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Nested Replies */}\n      {comment.replies && comment.replies.length > 0 && (\n        <div className=\"mt-4\">\n          {comment.replies.map(reply => (\n            <CommentItem\n              key={reply.id}\n              comment={reply}\n              onLike={onLike}\n              onDislike={onDislike}\n              onReport={onReport}\n              onReply={onReply}\n              level={level + 1}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const BlogCommentSection: React.FC<BlogCommentSectionProps> = ({\n  postId,\n  className = '',\n}) => {\n  const [newComment, setNewComment] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const { isBelow } = useBreakpoint();\n  \n  const {\n    comments,\n    loading,\n    error,\n    addComment,\n    likeComment,\n    dislikeComment,\n    reportComment,\n    getCommentCount,\n  } = useComments({ postId });\n\n  const handleSubmitComment = async () => {\n    if (!newComment.trim()) return;\n    \n    setIsSubmitting(true);\n    try {\n      await addComment(newComment);\n      setNewComment('');\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  const handleReply = async (content: string, parentId: string) => {\n    await addComment(content, parentId);\n  };\n\n  return (\n    <div className={`mt-8 sm:mt-12 ${className}`}>\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"flex items-center text-lg sm:text-xl\">\n            <MessageCircle className=\"h-5 w-5 mr-2\" />\n            Comments ({getCommentCount()})\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          {/* Comment Form - Responsive design */}\n          <div className=\"mb-6 sm:mb-8\">\n            <div className=\"flex items-start space-x-3\">\n              <Avatar size={isBelow('sm') ? 'sm' : 'md'}>\n                <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n                <AvatarFallback>YU</AvatarFallback>\n              </Avatar>\n              <div className=\"flex-1\">\n                <Textarea\n                  placeholder=\"Share your thoughts...\"\n                  value={newComment}\n                  onChange={(e) => setNewComment(e.target.value)}\n                  className=\"mb-3 text-sm sm:text-base\"\n                  rows={isBelow('sm') ? 3 : 4}\n                />\n                <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0\">\n                  <p className=\"text-xs sm:text-sm text-gray-500\">\n                    Be respectful and constructive in your comments.\n                  </p>\n                  <Button\n                    variant=\"primary\"\n                    onClick={handleSubmitComment}\n                    disabled={!newComment.trim() || isSubmitting}\n                    size={isBelow('sm') ? 'sm' : 'md'}\n                    className=\"w-full sm:w-auto\"\n                  >\n                    <Send className=\"h-3 w-3 sm:h-4 sm:w-4 mr-2\" />\n                    {isSubmitting ? 'Posting...' : 'Post Comment'}\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Error State */}\n          {error && (\n            <Alert variant=\"danger\" className=\"mb-6\">\n              <AlertDescription>{error}</AlertDescription>\n            </Alert>\n          )}\n\n          {/* Comments List */}\n          <div className=\"space-y-4 sm:space-y-6\">\n            {loading ? (\n              <div className=\"text-center py-8\">\n                <div className=\"animate-spin rounded-full h-6 w-6 sm:h-8 sm:w-8 border-b-2 border-primary-600 mx-auto\"></div>\n                <p className=\"text-gray-600 mt-2 text-sm sm:text-base\">Loading comments...</p>\n              </div>\n            ) : comments.length === 0 ? (\n              <div className=\"text-center py-8\">\n                <MessageCircle className=\"h-10 w-10 sm:h-12 sm:w-12 text-gray-400 mx-auto mb-4\" />\n                <h3 className=\"text-base sm:text-lg font-medium text-gray-900 mb-2\">No comments yet</h3>\n                <p className=\"text-gray-600 text-sm sm:text-base\">Be the first to share your thoughts!</p>\n              </div>\n            ) : (\n              comments.map(comment => (\n                <CommentItem\n                  key={comment.id}\n                  comment={comment}\n                  onLike={likeComment}\n                  onDislike={dislikeComment}\n                  onReport={reportComment}\n                  onReply={handleReply}\n                />\n              ))\n            )}\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;AA0BA,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,CAAC,GACV,KAAI;IACH,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AAEnC,IAAA,MAAM,iBAAiB,GAAG,YAAW;AACnC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;YAAE;QAE1B,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI;YACF,MAAM,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,EAAE,CAAC;YACvC,eAAe,CAAC,EAAE,CAAC;YACnB,gBAAgB,CAAC,KAAK,CAAC;QACzB;gBAAU;YACR,eAAe,CAAC,KAAK,CAAC;QACxB;AACF,IAAA,CAAC;AAED,IAAA,MAAM,UAAU,GAAG,CAAC,UAAkB,KAAI;QACxC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;AACtD,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,GAAG,EAAE,SAAS;AACd,YAAA,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,SAAS;AAC3C,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,CAAC;AACJ,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAG,KAAK,GAAG,CAAC,GAAG,8DAA8D,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CAClGA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAAA,CAC9CA,IAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,EAAA,QAAA,EAAA,CACvCC,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAA,CAAI,EAC3CA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAA,CAAkB,CAAA,EAAA,CAClD,EAETD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAC7BA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oFAAoF,EAAA,QAAA,EAAA,CACjGC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,EAAA,CAAQ,EAC7FA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAE,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,EAAA,CAAQ,EACxF,OAAO,CAAC,UAAU,KACjBA,GAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAA,QAAA,EAAA,UAAA,EAAA,CAAiB,CAC9D,CAAA,EAAA,CACG,EAENA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,yDAAyD,EAAA,QAAA,EAAE,OAAO,CAAC,OAAO,EAAA,CAAK,EAG5FD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,CACzDA,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EACjC,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,CAEzDC,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,CAAG,EACnDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,OAAO,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CACpD,EAETD,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,EACpC,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,CAEvDC,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,CAAG,EACrDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,OAAO,CAAC,QAAQ,EAAA,CAAQ,CAAA,EAAA,CACvD,EAETD,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,gBAAgB,CAAC,CAAC,aAAa,CAAC,EAC/C,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAA,CAE3DC,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,CAAG,EAChDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CAC1C,EAETD,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EACnC,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAA,CAE1DC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAA,CAAG,EAC1CA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,SAAS,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,CAAA,EAAA,CAChC,CAAA,EAAA,CACL,EAGL,aAAa,KACZD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAC,QAAQ,EAAA,EACP,WAAW,EAAC,kBAAkB,EAC9B,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAChD,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAE,CAAC,EAAA,CACP,EACFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC1GA,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,iBAAiB,EAC1B,QAAQ,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,YAAY,EAC9C,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAE5BC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,CAAG,EAC9C,YAAY,GAAG,YAAY,GAAG,YAAY,CAAA,EAAA,CACpC,EACTA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,CAAC,EACtC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,QAAA,EAAA,CAGrB,CAAA,EAAA,CACL,CAAA,EAAA,CACF,CACP,CAAA,EAAA,CACG,CAAA,EAAA,CACF,EAGL,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5CA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,MAAM,EAAA,QAAA,EAClB,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,KACxBA,GAAA,CAAC,WAAW,EAAA,EAEV,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GAAG,CAAC,EAAA,EANX,KAAK,CAAC,EAAE,CAOb,CACH,CAAC,EAAA,CACE,CACP,CAAA,EAAA,CACG;AAEV,CAAC;AAEM,MAAM,kBAAkB,GAAsC,CAAC,EACpE,MAAM,EACN,SAAS,GAAG,EAAE,GACf,KAAI;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAChD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvD,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;IAEnC,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,EACL,UAAU,EACV,WAAW,EACX,cAAc,EACd,aAAa,EACb,eAAe,GAChB,GAAG,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;AAE3B,IAAA,MAAM,mBAAmB,GAAG,YAAW;AACrC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAAE;QAExB,eAAe,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI;AACF,YAAA,MAAM,UAAU,CAAC,UAAU,CAAC;YAC5B,aAAa,CAAC,EAAE,CAAC;QACnB;gBAAU;YACR,eAAe,CAAC,KAAK,CAAC;QACxB;AACF,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,OAAO,OAAe,EAAE,QAAgB,KAAI;AAC9D,QAAA,MAAM,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC;AACrC,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAE,EAAA,QAAA,EAC1CD,IAAA,CAAC,IAAI,eACHC,GAAA,CAAC,UAAU,cACTD,IAAA,CAAC,SAAS,IAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CACzDC,IAAC,aAAa,EAAA,EAAC,SAAS,EAAC,cAAc,GAAG,EAAA,YAAA,EAC/B,eAAe,EAAE,EAAA,GAAA,CAAA,EAAA,CAClB,GACD,EACbD,IAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EAAA,CAEVC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,cAAc,EAAA,QAAA,EAC3BD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCA,IAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,aACvCC,GAAA,CAAC,WAAW,IAAC,GAAG,EAAC,iGAAiG,EAAA,CAAG,EACrHA,GAAA,CAAC,cAAc,qBAAoB,CAAA,EAAA,CAC5B,EACTD,cAAK,SAAS,EAAC,QAAQ,EAAA,QAAA,EAAA,CACrBC,GAAA,CAAC,QAAQ,EAAA,EACP,WAAW,EAAC,wBAAwB,EACpC,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAA,CAC3B,EACFD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qFAAqF,aAClGC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,iEAE3C,EACJD,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,YAAY,EAC5C,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,EACjC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAE5BC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,4BAA4B,EAAA,CAAG,EAC9C,YAAY,GAAG,YAAY,GAAG,cAAc,CAAA,EAAA,CACtC,IACL,CAAA,EAAA,CACF,CAAA,EAAA,CACF,EAAA,CACF,EAGL,KAAK,KACJA,IAAC,KAAK,EAAA,EAAC,OAAO,EAAC,QAAQ,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACtCA,GAAA,CAAC,gBAAgB,cAAE,KAAK,EAAA,CAAoB,EAAA,CACtC,CACT,EAGDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA,QAAA,EACpC,OAAO,IACND,cAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAC/BC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uFAAuF,EAAA,CAAO,EAC7GA,WAAG,SAAS,EAAC,yCAAyC,EAAA,QAAA,EAAA,qBAAA,EAAA,CAAwB,CAAA,EAAA,CAC1E,IACJ,QAAQ,CAAC,MAAM,KAAK,CAAC,IACvBD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAC/BC,IAAC,aAAa,EAAA,EAAC,SAAS,EAAC,sDAAsD,EAAA,CAAG,EAClFA,YAAI,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAAA,iBAAA,EAAA,CAAqB,EACxFA,WAAG,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAA,sCAAA,EAAA,CAAyC,IACtF,KAEN,QAAQ,CAAC,GAAG,CAAC,OAAO,KAClBA,GAAA,CAAC,WAAW,EAAA,EAEV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,WAAW,EAAA,EALf,OAAO,CAAC,EAAE,CAMf,CACH,CAAC,CACH,EAAA,CACG,IACM,CAAA,EAAA,CACT,EAAA,CACH;AAEV;;;;"}

package/dist/components/Blog/BlogLayout.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BlogPost } from './types';
+interface BlogLayoutProps {
+    children: React.ReactNode;
+    currentView?: 'allBlogs' | 'singleBlog' | 'category' | 'author';
+    currentPost?: BlogPost;
+    onNavigate?: (view: string, data?: any) => void;
+    className?: string;
+}
+export declare const BlogLayout: React.FC<BlogLayoutProps>;
+export {};

package/dist/components/Blog/BlogLayout.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { PenTool, Home, BookOpen, User, Search, X, Menu } from 'lucide-react';
+import { Button } from '../Button/Button.js';
+import { Input } from '../Input/Input.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
+import { Badge } from '../Badge/Badge.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
+import { cn } from '../../utils/cn.js';
+
+const BlogLayout = ({ children, currentView = 'allBlogs', currentPost, onNavigate, className = '', }) => {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const { isAbove, isBelow } = useBreakpoint();
+    const handleSearch = (query) => {
+        setSearchQuery(query);
+        onNavigate?.('search', { query });
+    };
+    const navigationItems = [
+        { id: 'home', label: 'Home', icon: Home, href: '/' },
+        { id: 'blog', label: 'All Posts', icon: BookOpen, href: '/blog' },
+        { id: 'categories', label: 'Categories', icon: PenTool, href: '/blog/categories' },
+        { id: 'authors', label: 'Authors', icon: User, href: '/blog/authors' },
+    ];
+    return (jsxs("div", { className: cn('min-h-screen bg-gray-50', className), children: [jsx("header", { className: "bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm", children: jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [jsxs("div", { className: "flex items-center justify-between h-14 sm:h-16", children: [jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3", children: [jsx("div", { className: "w-7 h-7 sm:w-8 sm:h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(PenTool, { className: "h-4 w-4 sm:h-5 sm:w-5 text-white" }) }), jsxs("div", { children: [jsx("span", { className: "font-bold text-lg sm:text-xl text-gray-900", children: "Beyond Blog" }), jsx("div", { className: "text-xs text-primary-600 font-medium hidden sm:block", children: "Insights & Tutorials" })] })] }), isAbove('lg') && (jsx("nav", { className: "flex items-center space-x-8", children: navigationItems.map(item => (jsxs("a", { href: item.href, className: "flex items-center space-x-2 text-gray-700 hover:text-primary-600 font-medium transition-colors", children: [jsx(item.icon, { className: "h-4 w-4" }), jsx("span", { children: item.label })] }, item.id))) })), jsxs("div", { className: "flex items-center space-x-2 sm:space-x-4", children: [isAbove('md') && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search posts...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "pl-10 w-48 lg:w-64 text-sm" })] })), jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3", children: [jsxs(Button, { variant: "outline", size: isBelow('sm') ? 'sm' : 'md', children: [jsx(PenTool, { className: "h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" }), jsx("span", { className: "hidden sm:inline", children: "Write" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setMobileMenuOpen(!mobileMenuOpen), className: "lg:hidden p-2", children: mobileMenuOpen ? jsx(X, { className: "h-5 w-5" }) : jsx(Menu, { className: "h-5 w-5" }) })] })] }), mobileMenuOpen && isBelow('lg') && (jsx("div", { className: "border-t border-gray-200 py-4", children: jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search posts...", value: searchQuery, onChange: (e) => handleSearch(e.target.value), className: "pl-10 text-sm" })] }), jsx("nav", { className: "space-y-2", children: navigationItems.map(item => (jsxs("a", { href: item.href, className: "flex items-center space-x-2 px-3 py-2 text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-lg transition-colors", onClick: () => setMobileMenuOpen(false), children: [jsx(item.icon, { className: "h-4 w-4" }), jsx("span", { children: item.label })] }, item.id))) })] }) }))] }) }), currentView === 'singleBlog' && currentPost && (jsx("div", { className: "bg-white border-b border-gray-200", children: jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8", children: jsxs("div", { className: "text-center", children: [jsx(Badge, { variant: "default", className: "mb-3 sm:mb-4 text-xs sm:text-sm", children: currentPost.category }), jsx("h1", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-3 sm:mb-4 leading-tight", children: currentPost.title }), jsx("p", { className: "text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed", children: currentPost.excerpt })] }) }) })), jsx("main", { className: "flex-1", children: children }), jsx("footer", { className: "bg-gray-900 text-white mt-12 sm:mt-16", children: jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12", children: [jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8", children: [jsxs("div", { className: "sm:col-span-2 lg:col-span-1", children: [jsxs("div", { className: "flex items-center space-x-2 mb-4", children: [jsx(PenTool, { className: "h-5 w-5 sm:h-6 sm:w-6 text-white" }), jsx("span", { className: "font-bold text-lg sm:text-xl", children: "Beyond Blog" })] }), jsx("p", { className: "text-gray-300 mb-4 text-sm sm:text-base", children: "Sharing insights, tutorials, and stories about modern web development and design." })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4 text-sm sm:text-base", children: "Quick Links" }), jsxs("ul", { className: "space-y-2 text-gray-300 text-sm", children: [jsx("li", { children: jsx("a", { href: "/blog", className: "hover:text-white transition-colors", children: "All Posts" }) }), jsx("li", { children: jsx("a", { href: "/blog/categories", className: "hover:text-white transition-colors", children: "Categories" }) }), jsx("li", { children: jsx("a", { href: "/blog/authors", className: "hover:text-white transition-colors", children: "Authors" }) }), jsx("li", { children: jsx("a", { href: "/blog/archive", className: "hover:text-white transition-colors", children: "Archive" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4 text-sm sm:text-base", children: "Categories" }), jsxs("ul", { className: "space-y-2 text-gray-300 text-sm", children: [jsx("li", { children: jsx("a", { href: "/blog/development", className: "hover:text-white transition-colors", children: "Development" }) }), jsx("li", { children: jsx("a", { href: "/blog/design", className: "hover:text-white transition-colors", children: "Design" }) }), jsx("li", { children: jsx("a", { href: "/blog/accessibility", className: "hover:text-white transition-colors", children: "Accessibility" }) }), jsx("li", { children: jsx("a", { href: "/blog/performance", className: "hover:text-white transition-colors", children: "Performance" }) })] })] }), jsxs("div", { children: [jsx("h4", { className: "font-semibold text-white mb-4 text-sm sm:text-base", children: "Stay Updated" }), jsx("p", { className: "text-gray-300 mb-4 text-xs sm:text-sm", children: "Get the latest posts delivered to your inbox." }), jsxs("div", { className: "space-y-2", children: [jsx(Input, { type: "email", placeholder: "Enter your email", className: "bg-gray-800 border-gray-700 text-white placeholder-gray-400 text-sm" }), jsx(Button, { variant: "primary", size: "sm", className: "w-full", children: "Subscribe" })] })] })] }), jsx("div", { className: "border-t border-gray-700 mt-6 sm:mt-8 pt-6 sm:pt-8 text-center text-gray-300", children: jsx("p", { className: "text-xs sm:text-sm", children: "\u00A9 2024 Beyond Blog. All rights reserved." }) })] }) })] }));
+};
+
+export { BlogLayout };
+//# sourceMappingURL=BlogLayout.js.map

package/dist/components/Blog/BlogLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogLayout.js","sources":["../../../src/components/Blog/BlogLayout.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Menu, X, Search, PenTool, BookOpen, User, Home } from 'lucide-react';\nimport { Button } from '../Button';\nimport { Input } from '../Input';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { Badge } from '../Badge';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { cn } from '../../utils/cn';\nimport type { BlogPost } from './types';\n\ninterface BlogLayoutProps {\n  children: React.ReactNode;\n  currentView?: 'allBlogs' | 'singleBlog' | 'category' | 'author';\n  currentPost?: BlogPost;\n  onNavigate?: (view: string, data?: any) => void;\n  className?: string;\n}\n\nexport const BlogLayout: React.FC<BlogLayoutProps> = ({\n  children,\n  currentView = 'allBlogs',\n  currentPost,\n  onNavigate,\n  className = '',\n}) => {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const { isAbove, isBelow } = useBreakpoint();\n\n  const handleSearch = (query: string) => {\n    setSearchQuery(query);\n    onNavigate?.('search', { query });\n  };\n\n  const navigationItems = [\n    { id: 'home', label: 'Home', icon: Home, href: '/' },\n    { id: 'blog', label: 'All Posts', icon: BookOpen, href: '/blog' },\n    { id: 'categories', label: 'Categories', icon: PenTool, href: '/blog/categories' },\n    { id: 'authors', label: 'Authors', icon: User, href: '/blog/authors' },\n  ];\n\n  return (\n    <div className={cn('min-h-screen bg-gray-50', className)}>\n      {/* Fixed Header with responsive design */}\n      <header className=\"bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"flex items-center justify-between h-14 sm:h-16\">\n            {/* Brand - Responsive sizing */}\n            <div className=\"flex items-center space-x-2 sm:space-x-3\">\n              <div className=\"w-7 h-7 sm:w-8 sm:h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n                <PenTool className=\"h-4 w-4 sm:h-5 sm:w-5 text-white\" />\n              </div>\n              <div>\n                <span className=\"font-bold text-lg sm:text-xl text-gray-900\">Beyond Blog</span>\n                <div className=\"text-xs text-primary-600 font-medium hidden sm:block\">Insights & Tutorials</div>\n              </div>\n            </div>\n\n            {/* Desktop Navigation - Hidden on mobile/tablet */}\n            {isAbove('lg') && (\n              <nav className=\"flex items-center space-x-8\">\n                {navigationItems.map(item => (\n                  <a\n                    key={item.id}\n                    href={item.href}\n                    className=\"flex items-center space-x-2 text-gray-700 hover:text-primary-600 font-medium transition-colors\"\n                  >\n                    <item.icon className=\"h-4 w-4\" />\n                    <span>{item.label}</span>\n                  </a>\n                ))}\n              </nav>\n            )}\n\n            {/* Search and User - Responsive layout */}\n            <div className=\"flex items-center space-x-2 sm:space-x-4\">\n              {/* Search - Hidden on mobile, visible on tablet+ */}\n              {isAbove('md') && (\n                <div className=\"relative\">\n                  <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n                  <Input\n                    placeholder=\"Search posts...\"\n                    value={searchQuery}\n                    onChange={(e) => handleSearch(e.target.value)}\n                    className=\"pl-10 w-48 lg:w-64 text-sm\"\n                  />\n                </div>\n              )}\n\n              {/* User Profile - Responsive sizing */}\n              <div className=\"flex items-center space-x-2 sm:space-x-3\">\n                <Button variant=\"outline\" size={isBelow('sm') ? 'sm' : 'md'}>\n                  <PenTool className=\"h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2\" />\n                  <span className=\"hidden sm:inline\">Write</span>\n                </Button>\n                <Avatar size=\"sm\">\n                  <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n                  <AvatarFallback>JD</AvatarFallback>\n                </Avatar>\n              </div>\n\n              {/* Mobile Menu Button */}\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n                className=\"lg:hidden p-2\"\n              >\n                {mobileMenuOpen ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n              </Button>\n            </div>\n          </div>\n\n          {/* Mobile Menu - Responsive dropdown */}\n          {mobileMenuOpen && isBelow('lg') && (\n            <div className=\"border-t border-gray-200 py-4\">\n              <div className=\"space-y-4\">\n                {/* Mobile Search */}\n                <div className=\"relative\">\n                  <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n                  <Input\n                    placeholder=\"Search posts...\"\n                    value={searchQuery}\n                    onChange={(e) => handleSearch(e.target.value)}\n                    className=\"pl-10 text-sm\"\n                  />\n                </div>\n\n                {/* Mobile Navigation */}\n                <nav className=\"space-y-2\">\n                  {navigationItems.map(item => (\n                    <a\n                      key={item.id}\n                      href={item.href}\n                      className=\"flex items-center space-x-2 px-3 py-2 text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-lg transition-colors\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      <item.icon className=\"h-4 w-4\" />\n                      <span>{item.label}</span>\n                    </a>\n                  ))}\n                </nav>\n              </div>\n            </div>\n          )}\n        </div>\n      </header>\n\n      {/* Page Title for Single Post - Responsive design */}\n      {currentView === 'singleBlog' && currentPost && (\n        <div className=\"bg-white border-b border-gray-200\">\n          <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8\">\n            <div className=\"text-center\">\n              <Badge variant=\"default\" className=\"mb-3 sm:mb-4 text-xs sm:text-sm\">\n                {currentPost.category}\n              </Badge>\n              <h1 className=\"text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-3 sm:mb-4 leading-tight\">\n                {currentPost.title}\n              </h1>\n              <p className=\"text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed\">\n                {currentPost.excerpt}\n              </p>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Main Content - Responsive padding */}\n      <main className=\"flex-1\">\n        {children}\n      </main>\n\n      {/* Footer - Responsive design */}\n      <footer className=\"bg-gray-900 text-white mt-12 sm:mt-16\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12\">\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8\">\n            {/* Brand */}\n            <div className=\"sm:col-span-2 lg:col-span-1\">\n              <div className=\"flex items-center space-x-2 mb-4\">\n                <PenTool className=\"h-5 w-5 sm:h-6 sm:w-6 text-white\" />\n                <span className=\"font-bold text-lg sm:text-xl\">Beyond Blog</span>\n              </div>\n              <p className=\"text-gray-300 mb-4 text-sm sm:text-base\">\n                Sharing insights, tutorials, and stories about modern web development and design.\n              </p>\n            </div>\n\n            {/* Quick Links */}\n            <div>\n              <h4 className=\"font-semibold text-white mb-4 text-sm sm:text-base\">Quick Links</h4>\n              <ul className=\"space-y-2 text-gray-300 text-sm\">\n                <li><a href=\"/blog\" className=\"hover:text-white transition-colors\">All Posts</a></li>\n                <li><a href=\"/blog/categories\" className=\"hover:text-white transition-colors\">Categories</a></li>\n                <li><a href=\"/blog/authors\" className=\"hover:text-white transition-colors\">Authors</a></li>\n                <li><a href=\"/blog/archive\" className=\"hover:text-white transition-colors\">Archive</a></li>\n              </ul>\n            </div>\n\n            {/* Categories */}\n            <div>\n              <h4 className=\"font-semibold text-white mb-4 text-sm sm:text-base\">Categories</h4>\n              <ul className=\"space-y-2 text-gray-300 text-sm\">\n                <li><a href=\"/blog/development\" className=\"hover:text-white transition-colors\">Development</a></li>\n                <li><a href=\"/blog/design\" className=\"hover:text-white transition-colors\">Design</a></li>\n                <li><a href=\"/blog/accessibility\" className=\"hover:text-white transition-colors\">Accessibility</a></li>\n                <li><a href=\"/blog/performance\" className=\"hover:text-white transition-colors\">Performance</a></li>\n              </ul>\n            </div>\n\n            {/* Newsletter - Responsive form */}\n            <div>\n              <h4 className=\"font-semibold text-white mb-4 text-sm sm:text-base\">Stay Updated</h4>\n              <p className=\"text-gray-300 mb-4 text-xs sm:text-sm\">\n                Get the latest posts delivered to your inbox.\n              </p>\n              <div className=\"space-y-2\">\n                <Input\n                  type=\"email\"\n                  placeholder=\"Enter your email\"\n                  className=\"bg-gray-800 border-gray-700 text-white placeholder-gray-400 text-sm\"\n                />\n                <Button variant=\"primary\" size=\"sm\" className=\"w-full\">\n                  Subscribe\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          {/* Footer Bottom */}\n          <div className=\"border-t border-gray-700 mt-6 sm:mt-8 pt-6 sm:pt-8 text-center text-gray-300\">\n            <p className=\"text-xs sm:text-sm\">&copy; 2024 Beyond Blog. All rights reserved.</p>\n          </div>\n        </div>\n      </footer>\n    </div>\n  );\n};"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/Blog/BlogShowcase.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BlogShowcase: React.FC;

package/dist/components/Blog/BlogShowcase.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { PenTool, Eye, Code, LayoutGrid } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs/Tabs.js';
+import { BlogLayout } from './BlogLayout.js';
+import { AllBlogsView } from './AllBlogsView.js';
+import { SingleBlogView } from './SingleBlogView.js';
+import { showToast } from '../Toast/Toast.js';
+
+const BlogShowcase = () => {
+    const [currentView, setCurrentView] = useState('allBlogs');
+    const [selectedPost, setSelectedPost] = useState(null);
+    const handlePostClick = (post) => {
+        setSelectedPost(post);
+        setCurrentView('singleBlog');
+        showToast.info(`Viewing: ${post.title}`);
+    };
+    const handleBackClick = () => {
+        setCurrentView('allBlogs');
+        setSelectedPost(null);
+    };
+    const codeExamples = {
+        singleBlog: `import { SingleBlogView } from '@/components/Blog';
+
+function BlogPost({ postId }) {
+  return (
+    <SingleBlogView
+      postId={postId}
+      onBackClick={() => navigate('/blog')}
+    />
+  );
+}`,
+        allBlogs: `import { AllBlogsView } from '@/components/Blog';
+
+function BlogIndex() {
+  return (
+    <AllBlogsView
+      onPostClick={(post) => navigate(\`/blog/\${post.slug}\`)}
+    />
+  );
+}`,
+        layout: `import { BlogLayout } from '@/components/Blog';
+
+function BlogApp() {
+  return (
+    <BlogLayout currentView="allBlogs">
+      <AllBlogsView />
+    </BlogLayout>
+  );
+}`,
+        hooks: `import { useBlog, useComments } from '@/components/Blog/hooks';
+
+function BlogComponent() {
+  const { posts, loading, searchPosts } = useBlog();
+  const { comments, addComment } = useComments({ postId: '1' });
+  
+  return (
+    <div>
+      {/* Use blog data and functionality */}
+    </div>
+  );
+}`,
+    };
+    return (jsxs("div", { className: "space-y-6", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "Blog System" }), jsx("p", { className: "text-gray-600 mt-1", children: "Comprehensive blog components with markdown support, comments, and navigation" })] }), jsxs(Badge, { variant: "outline", className: "flex items-center", children: [jsx(PenTool, { className: "h-4 w-4 mr-1" }), "Blog System"] })] }), jsxs(Tabs, { value: "demo", onValueChange: () => { }, children: [jsxs(TabsList, { children: [jsxs(TabsTrigger, { value: "demo", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Live Demo"] }), jsxs(TabsTrigger, { value: "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code Examples"] }), jsxs(TabsTrigger, { value: "features", children: [jsx(LayoutGrid, { className: "h-4 w-4 mr-2" }), "Features"] })] }), jsx(TabsContent, { value: "demo", className: "mt-6", children: jsx(Card, { children: jsx(CardContent, { className: "p-0", children: jsx("div", { className: "h-[800px] overflow-auto border border-gray-200 rounded-lg", children: jsx(BlogLayout, { currentView: currentView, currentPost: selectedPost || undefined, onNavigate: (view, data) => {
+                                            if (view === 'search') {
+                                                showToast.info(`Searching for: ${data.query}`);
+                                            }
+                                        }, children: currentView === 'allBlogs' ? (jsx(AllBlogsView, { onPostClick: handlePostClick })) : (jsx(SingleBlogView, { postId: selectedPost?.id, onBackClick: handleBackClick })) }) }) }) }) }), jsx(TabsContent, { value: "code", className: "mt-6", children: jsx("div", { className: "space-y-6", children: Object.entries(codeExamples).map(([key, code]) => (jsxs(Card, { children: [jsx(CardHeader, { children: jsxs(CardTitle, { className: "capitalize", children: [key.replace(/([A-Z])/g, ' $1'), " Example"] }) }), jsx(CardContent, { children: jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm", children: jsx("code", { children: code }) }) })] }, key))) }) }), jsx(TabsContent, { value: "features", className: "mt-6", children: jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "SingleBlogView Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Markdown rendering with syntax highlighting" }), jsx("li", { children: "\u2022 Social sharing buttons (Twitter, Facebook, LinkedIn)" }), jsx("li", { children: "\u2022 Reading time estimation" }), jsx("li", { children: "\u2022 SEO-friendly meta tags" }), jsx("li", { children: "\u2022 Author bio and profile integration" }), jsx("li", { children: "\u2022 Related posts recommendations" }), jsx("li", { children: "\u2022 Article statistics and engagement metrics" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "AllBlogsView Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Responsive grid and list view modes" }), jsx("li", { children: "\u2022 Advanced search and filtering" }), jsx("li", { children: "\u2022 Category and tag-based filtering" }), jsx("li", { children: "\u2022 Multiple sorting options" }), jsx("li", { children: "\u2022 Infinite scroll pagination" }), jsx("li", { children: "\u2022 Loading states and error handling" }), jsx("li", { children: "\u2022 Mobile-responsive design" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "BlogSidebar Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Table of contents with smooth scrolling" }), jsx("li", { children: "\u2022 Active section highlighting" }), jsx("li", { children: "\u2022 Recent and popular posts" }), jsx("li", { children: "\u2022 Category navigation" }), jsx("li", { children: "\u2022 Newsletter signup integration" }), jsx("li", { children: "\u2022 Responsive sidebar behavior" }), jsx("li", { children: "\u2022 Sticky positioning for better UX" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Comment System Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 Nested comment replies support" }), jsx("li", { children: "\u2022 Like/dislike functionality" }), jsx("li", { children: "\u2022 Comment moderation and reporting" }), jsx("li", { children: "\u2022 Real-time comment validation" }), jsx("li", { children: "\u2022 User authentication integration" }), jsx("li", { children: "\u2022 Responsive comment threading" }), jsx("li", { children: "\u2022 Comment statistics and engagement" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Custom Hooks" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsxs("li", { children: ["\u2022 ", jsx("strong", { children: "useBlog:" }), " Blog data management and filtering"] }), jsxs("li", { children: ["\u2022 ", jsx("strong", { children: "useComments:" }), " Comment CRUD operations"] }), jsxs("li", { children: ["\u2022 ", jsx("strong", { children: "useBlogNavigation:" }), " Table of contents and scrolling"] }), jsx("li", { children: "\u2022 Debounced search functionality" }), jsx("li", { children: "\u2022 Pagination and infinite scroll support" }), jsx("li", { children: "\u2022 Error handling and loading states" }), jsx("li", { children: "\u2022 TypeScript support throughout" })] }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { children: "Technical Features" }) }), jsx(CardContent, { children: jsxs("ul", { className: "space-y-2 text-sm text-gray-600", children: [jsx("li", { children: "\u2022 React 18+ with modern hooks patterns" }), jsx("li", { children: "\u2022 Complete TypeScript support" }), jsx("li", { children: "\u2022 Markdown rendering with react-markdown" }), jsx("li", { children: "\u2022 Syntax highlighting for code blocks" }), jsx("li", { children: "\u2022 SEO optimization with meta tags" }), jsx("li", { children: "\u2022 Responsive design with mobile-first approach" }), jsx("li", { children: "\u2022 Accessibility features (ARIA labels, keyboard nav)" })] }) })] })] }) })] })] }));
+};
+
+export { BlogShowcase };
+//# sourceMappingURL=BlogShowcase.js.map

package/dist/components/Blog/BlogShowcase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogShowcase.js","sources":["../../../src/components/Blog/BlogShowcase.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { PenTool, LayoutGrid as Layout, Code, Eye } from 'lucide-react';\r\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\r\nimport { Badge } from '../Badge';\r\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs';\r\nimport { BlogLayout } from './BlogLayout';\r\nimport { AllBlogsView } from './AllBlogsView';\r\nimport { SingleBlogView } from './SingleBlogView';\r\nimport { showToast } from '../Toast';\r\nimport type { BlogPost } from './types';\r\n\r\nexport const BlogShowcase: React.FC = () => {\r\n  const [currentView, setCurrentView] = useState<'allBlogs' | 'singleBlog'>('allBlogs');\r\n  const [selectedPost, setSelectedPost] = useState<BlogPost | null>(null);\r\n\r\n  const handlePostClick = (post: BlogPost) => {\r\n    setSelectedPost(post);\r\n    setCurrentView('singleBlog');\r\n    showToast.info(`Viewing: ${post.title}`);\r\n  };\r\n\r\n  const handleBackClick = () => {\r\n    setCurrentView('allBlogs');\r\n    setSelectedPost(null);\r\n  };\r\n\r\n  const codeExamples = {\r\n    singleBlog: `import { SingleBlogView } from '@/components/Blog';\r\n\r\nfunction BlogPost({ postId }) {\r\n  return (\r\n    <SingleBlogView\r\n      postId={postId}\r\n      onBackClick={() => navigate('/blog')}\r\n    />\r\n  );\r\n}`,\r\n    allBlogs: `import { AllBlogsView } from '@/components/Blog';\r\n\r\nfunction BlogIndex() {\r\n  return (\r\n    <AllBlogsView\r\n      onPostClick={(post) => navigate(\\`/blog/\\${post.slug}\\`)}\r\n    />\r\n  );\r\n}`,\r\n    layout: `import { BlogLayout } from '@/components/Blog';\r\n\r\nfunction BlogApp() {\r\n  return (\r\n    <BlogLayout currentView=\"allBlogs\">\r\n      <AllBlogsView />\r\n    </BlogLayout>\r\n  );\r\n}`,\r\n    hooks: `import { useBlog, useComments } from '@/components/Blog/hooks';\r\n\r\nfunction BlogComponent() {\r\n  const { posts, loading, searchPosts } = useBlog();\r\n  const { comments, addComment } = useComments({ postId: '1' });\r\n  \r\n  return (\r\n    <div>\r\n      {/* Use blog data and functionality */}\r\n    </div>\r\n  );\r\n}`,\r\n  };\r\n\r\n  return (\r\n    <div className=\"space-y-6\">\r\n      {/* Header */}\r\n      <div className=\"flex items-center justify-between\">\r\n        <div>\r\n          <h1 className=\"text-2xl font-bold text-gray-900\">Blog System</h1>\r\n          <p className=\"text-gray-600 mt-1\">\r\n            Comprehensive blog components with markdown support, comments, and navigation\r\n          </p>\r\n        </div>\r\n        <Badge variant=\"outline\" className=\"flex items-center\">\r\n          <PenTool className=\"h-4 w-4 mr-1\" />\r\n          Blog System\r\n        </Badge>\r\n      </div>\r\n\r\n      {/* Tabs */}\r\n      <Tabs value=\"demo\" onValueChange={() => {}}>\r\n        <TabsList>\r\n          <TabsTrigger value=\"demo\">\r\n            <Eye className=\"h-4 w-4 mr-2\" />\r\n            Live Demo\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"code\">\r\n            <Code className=\"h-4 w-4 mr-2\" />\r\n            Code Examples\r\n          </TabsTrigger>\r\n          <TabsTrigger value=\"features\">\r\n            <Layout className=\"h-4 w-4 mr-2\" />\r\n            Features\r\n          </TabsTrigger>\r\n        </TabsList>\r\n\r\n        <TabsContent value=\"demo\" className=\"mt-6\">\r\n          <Card>\r\n            <CardContent className=\"p-0\">\r\n              <div className=\"h-[800px] overflow-auto border border-gray-200 rounded-lg\">\r\n                <BlogLayout\r\n                  currentView={currentView}\r\n                  currentPost={selectedPost || undefined}\r\n                  onNavigate={(view, data) => {\r\n                    if (view === 'search') {\r\n                      showToast.info(`Searching for: ${data.query}`);\r\n                    }\r\n                  }}\r\n                >\r\n                  {currentView === 'allBlogs' ? (\r\n                    <AllBlogsView onPostClick={handlePostClick} />\r\n                  ) : (\r\n                    <SingleBlogView\r\n                      postId={selectedPost?.id}\r\n                      onBackClick={handleBackClick}\r\n                    />\r\n                  )}\r\n                </BlogLayout>\r\n              </div>\r\n            </CardContent>\r\n          </Card>\r\n        </TabsContent>\r\n\r\n        <TabsContent value=\"code\" className=\"mt-6\">\r\n          <div className=\"space-y-6\">\r\n            {Object.entries(codeExamples).map(([key, code]) => (\r\n              <Card key={key}>\r\n                <CardHeader>\r\n                  <CardTitle className=\"capitalize\">{key.replace(/([A-Z])/g, ' $1')} Example</CardTitle>\r\n                </CardHeader>\r\n                <CardContent>\r\n                  <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm\">\r\n                    <code>{code}</code>\r\n                  </pre>\r\n                </CardContent>\r\n              </Card>\r\n            ))}\r\n          </div>\r\n        </TabsContent>\r\n\r\n        <TabsContent value=\"features\" className=\"mt-6\">\r\n          <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>SingleBlogView Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Markdown rendering with syntax highlighting</li>\r\n                  <li>• Social sharing buttons (Twitter, Facebook, LinkedIn)</li>\r\n                  <li>• Reading time estimation</li>\r\n                  <li>• SEO-friendly meta tags</li>\r\n                  <li>• Author bio and profile integration</li>\r\n                  <li>• Related posts recommendations</li>\r\n                  <li>• Article statistics and engagement metrics</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>AllBlogsView Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Responsive grid and list view modes</li>\r\n                  <li>• Advanced search and filtering</li>\r\n                  <li>• Category and tag-based filtering</li>\r\n                  <li>• Multiple sorting options</li>\r\n                  <li>• Infinite scroll pagination</li>\r\n                  <li>• Loading states and error handling</li>\r\n                  <li>• Mobile-responsive design</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>BlogSidebar Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Table of contents with smooth scrolling</li>\r\n                  <li>• Active section highlighting</li>\r\n                  <li>• Recent and popular posts</li>\r\n                  <li>• Category navigation</li>\r\n                  <li>• Newsletter signup integration</li>\r\n                  <li>• Responsive sidebar behavior</li>\r\n                  <li>• Sticky positioning for better UX</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>Comment System Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• Nested comment replies support</li>\r\n                  <li>• Like/dislike functionality</li>\r\n                  <li>• Comment moderation and reporting</li>\r\n                  <li>• Real-time comment validation</li>\r\n                  <li>• User authentication integration</li>\r\n                  <li>• Responsive comment threading</li>\r\n                  <li>• Comment statistics and engagement</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>Custom Hooks</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• <strong>useBlog:</strong> Blog data management and filtering</li>\r\n                  <li>• <strong>useComments:</strong> Comment CRUD operations</li>\r\n                  <li>• <strong>useBlogNavigation:</strong> Table of contents and scrolling</li>\r\n                  <li>• Debounced search functionality</li>\r\n                  <li>• Pagination and infinite scroll support</li>\r\n                  <li>• Error handling and loading states</li>\r\n                  <li>• TypeScript support throughout</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n\r\n            <Card>\r\n              <CardHeader>\r\n                <CardTitle>Technical Features</CardTitle>\r\n              </CardHeader>\r\n              <CardContent>\r\n                <ul className=\"space-y-2 text-sm text-gray-600\">\r\n                  <li>• React 18+ with modern hooks patterns</li>\r\n                  <li>• Complete TypeScript support</li>\r\n                  <li>• Markdown rendering with react-markdown</li>\r\n                  <li>• Syntax highlighting for code blocks</li>\r\n                  <li>• SEO optimization with meta tags</li>\r\n                  <li>• Responsive design with mobile-first approach</li>\r\n                  <li>• Accessibility features (ARIA labels, keyboard nav)</li>\r\n                </ul>\r\n              </CardContent>\r\n            </Card>\r\n          </div>\r\n        </TabsContent>\r\n      </Tabs>\r\n    </div>\r\n  );\r\n};"],"names":["_jsxs","_jsx","Layout"],"mappings":"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"}

package/dist/components/Blog/BlogSidebar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { BlogPost } from './types';
+interface BlogSidebarProps {
+    type: 'navigation' | 'tableOfContents';
+    currentPost?: BlogPost;
+    relatedPosts?: BlogPost[];
+    className?: string;
+}
+export declare const BlogSidebar: React.FC<BlogSidebarProps>;
+export {};