npm - @beyondcorp/beyond-ui - Versions diffs - 1.2.53 → 1.2.57 - Mend

@beyondcorp/beyond-ui 1.2.53 → 1.2.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/dist/components/Blog/BlogSidebar.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Hash, Calendar, Clock, Eye } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardContent } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Button } from '../Button/Button.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
+import { useBlogNavigation } from './hooks/useBlogNavigation.js';
+import { sampleBlogPosts, sampleBlogCategories } from './data/sampleData.js';
+const BlogSidebar = ({ type, currentPost, relatedPosts = [], className = '', }) => {
+    const { tableOfContents, activeSection, scrollToSection } = useBlogNavigation();
+    const { isAbove } = useBreakpoint();
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+        });
+    };
+    // Fixed sidebar styles with responsive behavior
+    const sidebarStyles = {
+        position: isAbove('lg') ? 'sticky' : 'static',
+        top: isAbove('lg') ? '1rem' : 'auto',
+        maxHeight: isAbove('lg') ? 'calc(100vh - 2rem)' : 'auto',
+        overflowY: isAbove('lg') ? 'auto' : 'visible',
+    };
+    if (type === 'tableOfContents') {
+        return (jsxs("div", { className: `space-y-6 ${className}`, style: sidebarStyles, children: [jsxs(Card, { className: "lg:sticky lg:top-4", children: [jsx(CardHeader, { children: jsxs(CardTitle, { className: "flex items-center text-base", children: [jsx(Hash, { className: "h-4 w-4 mr-2" }), "Table of Contents"] }) }), jsx(CardContent, { className: "max-h-80 lg:max-h-96 overflow-y-auto", children: tableOfContents.length > 0 ? (jsx("nav", { className: "space-y-1", children: tableOfContents.map((item) => (jsx("button", { onClick: () => scrollToSection(item.anchor), className: `
+                      block w-full text-left px-3 py-2 text-sm rounded-lg transition-all duration-200
+                      ${activeSection === item.anchor
+                                        ? 'bg-primary-50 text-primary-700 border-l-2 border-primary-600 font-medium'
+                                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'}
+                      ${item.level === 1 ? 'font-medium' : ''}
+                      ${item.level === 2 ? 'ml-4 text-xs' : ''}
+                      ${item.level === 3 ? 'ml-8 text-xs' : ''}
+                      ${item.level >= 4 ? 'ml-12 text-xs' : ''}
+                    `, children: item.title }, item.id))) })) : (jsx("p", { className: "text-sm text-gray-500 italic", children: "No headings found in this article" })) })] }), currentPost && isAbove('lg') && (jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { className: "text-base", children: "Article Stats" }) }), jsxs(CardContent, { className: "space-y-3", children: [jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm text-gray-600", children: "Views" }), jsx("span", { className: "font-medium text-sm", children: currentPost.stats.views.toLocaleString() })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm text-gray-600", children: "Likes" }), jsx("span", { className: "font-medium text-sm", children: currentPost.stats.likes })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm text-gray-600", children: "Comments" }), jsx("span", { className: "font-medium text-sm", children: currentPost.stats.comments })] }), jsxs("div", { className: "flex items-center justify-between", children: [jsx("span", { className: "text-sm text-gray-600", children: "Shares" }), jsx("span", { className: "font-medium text-sm", children: currentPost.stats.shares })] })] })] }))] }));
+    }
+    // Navigation sidebar with fixed positioning on desktop
+    const recentPosts = sampleBlogPosts.slice(0, 5);
+    const popularPosts = [...sampleBlogPosts]
+        .sort((a, b) => b.stats.views - a.stats.views)
+        .slice(0, 5);
+    return (jsxs("div", { className: `space-y-6 ${className}`, style: sidebarStyles, children: [jsxs(Card, { className: "lg:sticky lg:top-4", children: [jsx(CardHeader, { children: jsx(CardTitle, { className: "text-base", children: "Categories" }) }), jsx(CardContent, { children: jsx("div", { className: "space-y-2", children: sampleBlogCategories.map(category => (jsxs("div", { className: "flex items-center justify-between group", children: [jsx("a", { href: `/blog/category/${category.slug}`, className: "text-gray-700 hover:text-primary-600 transition-colors text-sm font-medium group-hover:underline", children: category.name }), jsx(Badge, { variant: "outline", className: "text-xs", children: category.postCount })] }, category.id))) }) })] }), jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { className: "text-base", children: "Recent Posts" }) }), jsx(CardContent, { className: "max-h-80 overflow-y-auto", children: jsx("div", { className: "space-y-4", children: recentPosts.map(post => (jsxs("div", { className: "group cursor-pointer", children: [jsx("h4", { className: "font-medium text-gray-900 group-hover:text-primary-600 transition-colors mb-1 line-clamp-2 text-sm leading-tight", children: post.title }), 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" }), jsx(Clock, { className: "h-3 w-3" }), jsxs("span", { children: [post.readingTime, " min"] })] })] }, post.id))) }) })] }), isAbove('md') && (jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { className: "text-base", children: "Popular Posts" }) }), jsx(CardContent, { className: "max-h-80 overflow-y-auto", children: jsx("div", { className: "space-y-4", children: popularPosts.map((post, index) => (jsxs("div", { className: "flex items-start space-x-3 group cursor-pointer", children: [jsx("div", { className: "flex-shrink-0 w-6 h-6 bg-primary-100 rounded-full flex items-center justify-center", children: jsx("span", { className: "text-xs font-bold text-primary-600", children: index + 1 }) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("h4", { className: "font-medium text-gray-900 group-hover:text-primary-600 transition-colors mb-1 line-clamp-2 text-sm leading-tight", children: post.title }), jsxs("div", { className: "flex items-center space-x-2 text-xs text-gray-500", children: [jsx(Eye, { className: "h-3 w-3" }), jsxs("span", { children: [post.stats.views.toLocaleString(), " views"] })] })] })] }, post.id))) }) })] })), isAbove('lg') && (jsxs(Card, { children: [jsx(CardHeader, { children: jsx(CardTitle, { className: "text-base", children: "Stay Updated" }) }), jsxs(CardContent, { children: [jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Get the latest posts delivered right to your inbox." }), jsxs("div", { className: "space-y-3", children: [jsx("input", { type: "email", placeholder: "Enter your email", className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors" }), jsx(Button, { variant: "primary", className: "w-full", size: "sm", children: "Subscribe" })] })] })] }))] }));
+};
+export { BlogSidebar };
+//# sourceMappingURL=BlogSidebar.js.map

package/dist/components/Blog/BlogSidebar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"BlogSidebar.js","sources":["../../../src/components/Blog/BlogSidebar.tsx"],"sourcesContent":["import React from 'react';\nimport { Calendar, Clock, Eye, Hash, ChevronRight } from 'lucide-react';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { Button } from '../Button';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useBlogNavigation } from './hooks/useBlogNavigation';\nimport type { BlogPost } from './types';\nimport { sampleBlogPosts, sampleBlogCategories } from './data/sampleData';\n\ninterface BlogSidebarProps {\n type: 'navigation' | 'tableOfContents';\n currentPost?: BlogPost;\n relatedPosts?: BlogPost[];\n className?: string;\n}\n\nexport const BlogSidebar: React.FC<BlogSidebarProps> = ({\n type,\n currentPost,\n relatedPosts = [],\n className = '',\n}) => {\n const { tableOfContents, activeSection, scrollToSection } = useBlogNavigation();\n const { isAbove } = useBreakpoint();\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n });\n };\n\n // Fixed sidebar styles with responsive behavior\n const sidebarStyles = {\n position: isAbove('lg') ? 'sticky' as const : 'static' as const,\n top: isAbove('lg') ? '1rem' : 'auto',\n maxHeight: isAbove('lg') ? 'calc(100vh - 2rem)' : 'auto',\n overflowY: isAbove('lg') ? 'auto' as const : 'visible' as const,\n };\n\n if (type === 'tableOfContents') {\n return (\n <div className={`space-y-6 ${className}`} style={sidebarStyles}>\n {/* Table of Contents - Fixed on desktop, static on mobile */}\n <Card className=\"lg:sticky lg:top-4\">\n <CardHeader>\n <CardTitle className=\"flex items-center text-base\">\n <Hash className=\"h-4 w-4 mr-2\" />\n Table of Contents\n </CardTitle>\n </CardHeader>\n <CardContent className=\"max-h-80 lg:max-h-96 overflow-y-auto\">\n {tableOfContents.length > 0 ? (\n <nav className=\"space-y-1\">\n {tableOfContents.map((item) => (\n <button\n key={item.id}\n onClick={() => scrollToSection(item.anchor)}\n className={`\n block w-full text-left px-3 py-2 text-sm rounded-lg transition-all duration-200\n ${activeSection === item.anchor\n ? 'bg-primary-50 text-primary-700 border-l-2 border-primary-600 font-medium'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'\n }\n ${item.level === 1 ? 'font-medium' : ''}\n ${item.level === 2 ? 'ml-4 text-xs' : ''}\n ${item.level === 3 ? 'ml-8 text-xs' : ''}\n ${item.level >= 4 ? 'ml-12 text-xs' : ''}\n `}\n >\n {item.title}\n </button>\n ))}\n </nav>\n ) : (\n <p className=\"text-sm text-gray-500 italic\">\n No headings found in this article\n </p>\n )}\n </CardContent>\n </Card>\n\n {/* Article Stats - Only show on desktop */}\n {currentPost && isAbove('lg') && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Article Stats</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-gray-600\">Views</span>\n <span className=\"font-medium text-sm\">{currentPost.stats.views.toLocaleString()}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-gray-600\">Likes</span>\n <span className=\"font-medium text-sm\">{currentPost.stats.likes}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-gray-600\">Comments</span>\n <span className=\"font-medium text-sm\">{currentPost.stats.comments}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-sm text-gray-600\">Shares</span>\n <span className=\"font-medium text-sm\">{currentPost.stats.shares}</span>\n </div>\n </CardContent>\n </Card>\n )}\n </div>\n );\n }\n\n // Navigation sidebar with fixed positioning on desktop\n const recentPosts = sampleBlogPosts.slice(0, 5);\n const popularPosts = [...sampleBlogPosts]\n .sort((a, b) => b.stats.views - a.stats.views)\n .slice(0, 5);\n\n return (\n <div className={`space-y-6 ${className}`} style={sidebarStyles}>\n {/* Categories - Fixed on desktop */}\n <Card className=\"lg:sticky lg:top-4\">\n <CardHeader>\n <CardTitle className=\"text-base\">Categories</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-2\">\n {sampleBlogCategories.map(category => (\n <div key={category.id} className=\"flex items-center justify-between group\">\n <a \n href={`/blog/category/${category.slug}`}\n className=\"text-gray-700 hover:text-primary-600 transition-colors text-sm font-medium group-hover:underline\"\n >\n {category.name}\n </a>\n <Badge variant=\"outline\" className=\"text-xs\">{category.postCount}</Badge>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/* Recent Posts */}\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Recent Posts</CardTitle>\n </CardHeader>\n <CardContent className=\"max-h-80 overflow-y-auto\">\n <div className=\"space-y-4\">\n {recentPosts.map(post => (\n <div key={post.id} className=\"group cursor-pointer\">\n <h4 className=\"font-medium text-gray-900 group-hover:text-primary-600 transition-colors mb-1 line-clamp-2 text-sm leading-tight\">\n {post.title}\n </h4>\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 <Clock className=\"h-3 w-3\" />\n <span>{post.readingTime} min</span>\n </div>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n {/* Popular Posts - Only show on larger screens */}\n {isAbove('md') && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Popular Posts</CardTitle>\n </CardHeader>\n <CardContent className=\"max-h-80 overflow-y-auto\">\n <div className=\"space-y-4\">\n {popularPosts.map((post, index) => (\n <div key={post.id} className=\"flex items-start space-x-3 group cursor-pointer\">\n <div className=\"flex-shrink-0 w-6 h-6 bg-primary-100 rounded-full flex items-center justify-center\">\n <span className=\"text-xs font-bold text-primary-600\">{index + 1}</span>\n </div>\n <div className=\"flex-1 min-w-0\">\n <h4 className=\"font-medium text-gray-900 group-hover:text-primary-600 transition-colors mb-1 line-clamp-2 text-sm leading-tight\">\n {post.title}\n </h4>\n <div className=\"flex items-center space-x-2 text-xs text-gray-500\">\n <Eye className=\"h-3 w-3\" />\n <span>{post.stats.views.toLocaleString()} views</span>\n </div>\n </div>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n )}\n\n {/* Newsletter Signup - Only show on desktop */}\n {isAbove('lg') && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Stay Updated</CardTitle>\n </CardHeader>\n <CardContent>\n <p className=\"text-sm text-gray-600 mb-4\">\n Get the latest posts delivered right to your inbox.\n </p>\n <div className=\"space-y-3\">\n <input\n type=\"email\"\n placeholder=\"Enter your email\"\n className=\"w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors\"\n />\n <Button variant=\"primary\" className=\"w-full\" size=\"sm\">\n Subscribe\n </Button>\n </div>\n </CardContent>\n </Card>\n )}\n </div>\n );\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAkBO,MAAM,WAAW,GAA+B,CAAC,EACtD,IAAI,EACJ,WAAW,EACX,YAAY,GAAG,EAAE,EACjB,SAAS,GAAG,EAAE,GACf,KAAI;IACH,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,iBAAiB,EAAE;AAC/E,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AAEnC,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;AACf,SAAA,CAAC;AACJ,IAAA,CAAC;;AAGD,IAAA,MAAM,aAAa,GAAG;AACpB,QAAA,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,QAAiB,GAAG,QAAiB;AAC/D,QAAA,GAAG,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM,GAAG,MAAM;AACpC,QAAA,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,oBAAoB,GAAG,MAAM;AACxD,QAAA,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,MAAe,GAAG,SAAkB;KAChE;AAED,IAAA,IAAI,IAAI,KAAK,iBAAiB,EAAE;AAC9B,QAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,UAAA,EAAa,SAAS,EAAE,EAAE,KAAK,EAAE,aAAa,aAE5DA,IAAA,CAAC,IAAI,IAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClCC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTD,KAAC,SAAS,EAAA,EAAC,SAAS,EAAC,6BAA6B,aAChDC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,yBAEvB,EAAA,CACD,EACbA,IAAC,WAAW,EAAA,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAC1D,eAAe,CAAC,MAAM,GAAG,CAAC,IACzBA,aAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI,MACxBA,GAAA,CAAA,QAAA,EAAA,EAEE,OAAO,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3C,SAAS,EAAE;;wBAEP,aAAa,KAAK,IAAI,CAAC;AACvB,0CAAE;AACF,0CAAE,oDACJ;wBACE,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,aAAa,GAAG,EAAE;wBACrC,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,cAAc,GAAG,EAAE;wBACtC,IAAI,CAAC,KAAK,KAAK,CAAC,GAAG,cAAc,GAAG,EAAE;wBACtC,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,eAAe,GAAG,EAAE;AACzC,oBAAA,CAAA,EAAA,QAAA,EAEA,IAAI,CAAC,KAAK,EAAA,EAdN,IAAI,CAAC,EAAE,CAeL,CACV,CAAC,GACE,KAENA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,8BAA8B,kDAEvC,CACL,EAAA,CACW,CAAA,EAAA,CACT,EAGN,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,KAC3BD,IAAA,CAAC,IAAI,eACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,WAAW,8BAA0B,EAAA,CAC/C,EACbD,IAAA,CAAC,WAAW,IAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CAChCA,cAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,cAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,EACpDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qBAAqB,YAAE,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,EAAA,CAAQ,CAAA,EAAA,CACnF,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,sBAAa,EACpDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAE,WAAW,CAAC,KAAK,CAAC,KAAK,EAAA,CAAQ,CAAA,EAAA,CAClE,EACND,cAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,cAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAgB,EACvDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,qBAAqB,YAAE,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAA,CAAQ,CAAA,EAAA,CACrE,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,CAChDC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,QAAA,EAAA,CAAc,EACrDA,cAAM,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,GAAQ,CAAA,EAAA,CACnE,CAAA,EAAA,CACM,IACT,CACR,CAAA,EAAA,CACG;IAEV;;IAGA,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AAC/C,IAAA,MAAM,YAAY,GAAG,CAAC,GAAG,eAAe;AACrC,SAAA,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK;AAC5C,SAAA,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IAEd,QACED,cAAK,SAAS,EAAE,aAAa,SAAS,CAAA,CAAE,EAAE,KAAK,EAAE,aAAa,EAAA,QAAA,EAAA,CAE5DA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAA,CAClCC,IAAC,UAAU,EAAA,EAAA,QAAA,EACTA,IAAC,SAAS,EAAA,EAAC,SAAS,EAAC,WAAW,2BAAuB,EAAA,CAC5C,EACbA,IAAC,WAAW,EAAA,EAAA,QAAA,EACVA,aAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,oBAAoB,CAAC,GAAG,CAAC,QAAQ,KAChCD,IAAA,CAAA,KAAA,EAAA,EAAuB,SAAS,EAAC,yCAAyC,aACxEC,GAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,CAAA,eAAA,EAAkB,QAAQ,CAAC,IAAI,CAAA,CAAE,EACvC,SAAS,EAAC,kGAAkG,EAAA,QAAA,EAE3G,QAAQ,CAAC,IAAI,EAAA,CACZ,EACJA,GAAA,CAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAA,QAAA,EAAE,QAAQ,CAAC,SAAS,GAAS,CAAA,EAAA,EAPjE,QAAQ,CAAC,EAAE,CAQf,CACP,CAAC,EAAA,CACE,EAAA,CACM,IACT,EAGPD,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,cAAA,EAAA,CAAyB,GAC9C,EACbA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAC/CA,aAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,WAAW,CAAC,GAAG,CAAC,IAAI,KACnBD,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAC,sBAAsB,aACjDC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kHAAkH,EAAA,QAAA,EAC7H,IAAI,CAAC,KAAK,GACR,EACLD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,aAChEC,GAAA,CAAC,QAAQ,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAChCA,wBAAO,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,EAAA,CAAQ,EAC3CA,mCAAc,EACdA,GAAA,CAAC,KAAK,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAC7BD,IAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAO,IAAI,CAAC,WAAW,EAAA,MAAA,CAAA,EAAA,CAAY,IAC/B,CAAA,EAAA,EAVE,IAAI,CAAC,EAAE,CAWX,CACP,CAAC,EAAA,CACE,EAAA,CACM,IACT,EAGN,OAAO,CAAC,IAAI,CAAC,KACZA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,eAAA,EAAA,CAA0B,GAC/C,EACbA,GAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAC/CA,aAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EACvB,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC5BD,IAAA,CAAA,KAAA,EAAA,EAAmB,SAAS,EAAC,iDAAiD,aAC5EC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oFAAoF,EAAA,QAAA,EACjGA,cAAM,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAAE,KAAK,GAAG,CAAC,EAAA,CAAQ,GACnE,EACND,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,aAC7BC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,kHAAkH,EAAA,QAAA,EAC7H,IAAI,CAAC,KAAK,GACR,EACLD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mDAAmD,aAChEC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,EAC3BD,IAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,CAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAAE,EAAA,QAAA,CAAA,EAAA,CAAc,IAClD,CAAA,EAAA,CACF,CAAA,EAAA,EAZE,IAAI,CAAC,EAAE,CAaX,CACP,CAAC,GACE,EAAA,CACM,CAAA,EAAA,CACT,CACR,EAGA,OAAO,CAAC,IAAI,CAAC,KACZA,IAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAAA,CACHC,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EACTA,GAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,cAAA,EAAA,CAAyB,EAAA,CAC9C,EACbD,IAAA,CAAC,WAAW,eACVC,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,qDAAA,EAAA,CAErC,EACJD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAA,CACxBC,eACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,EAC9B,SAAS,EAAC,2IAA2I,GACrJ,EACFA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,WAAA,EAAA,CAE7C,CAAA,EAAA,CACL,IACM,CAAA,EAAA,CACT,CACR,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/components/Blog/SingleBlogView.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SingleBlogViewProps {
+    postId?: string;
+    onBackClick?: () => void;
+    className?: string;
+}
+export declare const SingleBlogView: React.FC<SingleBlogViewProps>;
+export {};

package/dist/components/Blog/SingleBlogView.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { CodeHighlight } from '../CodeHighlight/CodeHighlight.js';
+import { ChevronLeft, Tag, Calendar, Clock, Eye, Twitter, Facebook, Linkedin, Link, Heart, MessageCircle, Share2 } from 'lucide-react';
+import { Button } from '../Button/Button.js';
+import { Card, CardContent } from '../Card/Card.js';
+import { Badge } from '../Badge/Badge.js';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
+import { showToast } from '../Toast/Toast.js';
+import { useBlogNavigation } from './hooks/useBlogNavigation.js';
+import { BlogCommentSection } from './BlogCommentSection.js';
+import { BlogSidebar } from './BlogSidebar.js';
+import { sampleBlogPosts } from './data/sampleData.js';
+const SingleBlogView = ({ postId = '1', onBackClick, className = '', }) => {
+    const { generateTableOfContents } = useBlogNavigation();
+    const { isAbove, isBelow } = useBreakpoint();
+    // Get blog post data (in real app, this would come from API)
+    const post = sampleBlogPosts.find(p => p.id === postId) || sampleBlogPosts[0];
+    const relatedPosts = sampleBlogPosts.filter(p => p.id !== post.id &&
+        (p.category === post.category || p.tags.some(tag => post.tags.includes(tag)))).slice(0, 3);
+    useEffect(() => {
+        generateTableOfContents(post.content);
+    }, [post.content, generateTableOfContents]);
+    const handleShare = (platform) => {
+        const url = window.location.href;
+        const title = post.title;
+        let shareUrl = '';
+        switch (platform) {
+            case 'twitter':
+                shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;
+                break;
+            case 'facebook':
+                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+                break;
+            case 'linkedin':
+                shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+                break;
+            case 'copy':
+                navigator.clipboard.writeText(url);
+                showToast.success('Link copied to clipboard!');
+                return;
+        }
+        if (shareUrl) {
+            window.open(shareUrl, '_blank', 'width=600,height=400');
+        }
+    };
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    };
+    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: "mb-4 sm:mb-6 lg:mb-8", children: [jsxs(Button, { variant: "ghost", onClick: onBackClick, className: "mb-2 sm:mb-4 p-2 sm:p-3", children: [jsx(ChevronLeft, { className: "h-4 w-4 mr-1 sm:mr-2" }), jsx("span", { className: "text-sm sm:text-base", children: "Back to Blog" })] }), isAbove('md') && (jsxs("nav", { className: "flex items-center space-x-2 text-sm text-gray-600", children: [jsx("a", { href: "/", className: "hover:text-primary-600 transition-colors", children: "Home" }), jsx("span", { children: "/" }), jsx("a", { href: "/blog", className: "hover:text-primary-600 transition-colors", children: "Blog" }), jsx("span", { children: "/" }), jsx("a", { href: `/blog/category/${post.category.toLowerCase()}`, className: "hover:text-primary-600 transition-colors", children: post.category }), jsx("span", { children: "/" }), jsx("span", { className: "text-gray-900 truncate max-w-xs", children: post.title })] }))] }), jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-8", children: [isAbove('lg') && (jsx("div", { className: "lg:col-span-3", children: jsx(BlogSidebar, { type: "navigation", currentPost: post, relatedPosts: relatedPosts }) })), jsxs("div", { className: "lg:col-span-6", children: [jsxs("article", { className: "prose prose-sm sm:prose-base lg:prose-lg max-w-none", children: [jsxs("header", { className: "mb-6 sm:mb-8 not-prose", children: [jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4", children: [jsx(Badge, { variant: "default", className: "text-xs sm:text-sm", style: { backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }, children: post.category }), post.featured && (jsx(Badge, { variant: "warning", className: "text-xs sm:text-sm", children: "Featured" })), post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (jsxs(Badge, { variant: "outline", className: "text-xs", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag)))] }), jsx("h1", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight", children: post.title }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 pb-4 sm:pb-6 border-b border-gray-200 space-y-4 sm:space-y-0", children: [jsxs("div", { className: "flex items-center space-x-3 sm:space-x-4", children: [jsxs(Avatar, { size: isBelow('sm') ? 'sm' : 'lg', children: [jsx(AvatarImage, { src: post.author.avatar }), jsx(AvatarFallback, { children: post.author.name[0] })] }), jsxs("div", { children: [jsx("p", { className: "font-semibold text-gray-900 text-sm sm:text-base", children: post.author.name }), jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600", children: [jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Calendar, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsx("span", { children: formatDate(post.publishedAt) })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Clock, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsxs("span", { children: [post.readingTime, " min read"] })] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Eye, { className: "h-3 w-3 sm:h-4 sm:w-4" }), jsxs("span", { children: [post.stats.views.toLocaleString(), " views"] })] })] })] })] }), jsxs("div", { className: "flex items-center space-x-1 sm:space-x-2", children: [jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('twitter'), className: "p-2", children: jsx(Twitter, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('facebook'), className: "p-2", children: jsx(Facebook, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('linkedin'), className: "p-2", children: jsx(Linkedin, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: isBelow('sm') ? 'sm' : 'md', onClick: () => handleShare('copy'), className: "p-2", children: jsx(Link, { className: "h-4 w-4" }) })] })] }), post.seoMeta.ogImage && (jsx("div", { className: "aspect-video sm:aspect-[16/9] lg:aspect-video bg-gray-100 rounded-lg mb-6 sm:mb-8 overflow-hidden", children: jsx("img", { src: post.seoMeta.ogImage, alt: post.title, className: "w-full h-full object-cover" }) }))] }), jsx("div", { className: "prose prose-sm sm:prose-base lg:prose-lg max-w-none prose-headings:scroll-mt-20", children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: {
+                                                h1: ({ children, ...props }) => (jsx("h1", { id: String(children).toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'), className: "scroll-mt-20", ...props, children: children })),
+                                                h2: ({ children, ...props }) => (jsx("h2", { id: String(children).toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'), className: "scroll-mt-20", ...props, children: children })),
+                                                h3: ({ children, ...props }) => (jsx("h3", { id: String(children).toLowerCase().replace(/[^a-z0-9\s-]/g, '').replace(/\s+/g, '-'), className: "scroll-mt-20", ...props, children: children })),
+                                                code: (props) => {
+                                                    const { inline, className, children } = props;
+                                                    if (inline) {
+                                                        return (jsx("code", { className: "bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono border", ...props, children: children }));
+                                                    }
+                                                    // Extract language from className (e.g. language-js)
+                                                    const match = /language-(\w+)/.exec(className || '');
+                                                    return (jsxs("div", { className: "relative group", children: [jsx(CodeHighlight, { code: String(children).replace(/\n$/, ''), language: match ? match[1] : 'javascript' }), jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-600", onClick: () => {
+                                                                    navigator.clipboard.writeText(String(children));
+                                                                    showToast.success('Code copied to clipboard!');
+                                                                }, children: "Copy" })] }));
+                                                },
+                                            }, children: post.content }) }), jsxs("footer", { className: "mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 not-prose", children: [jsxs("div", { className: "mb-6", children: [jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 mb-3", children: "Tags" }), jsx("div", { className: "flex flex-wrap gap-2", children: post.tags.map(tag => (jsxs(Badge, { variant: "outline", className: "cursor-pointer hover:bg-primary-50 text-xs sm:text-sm", children: [jsx(Tag, { className: "h-3 w-3 mr-1" }), tag] }, tag))) })] }), jsx(Card, { className: "mb-6 sm:mb-8", children: jsx(CardContent, { className: "p-4 sm:p-6", children: jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start space-y-4 sm:space-y-0 sm:space-x-4", children: [jsxs(Avatar, { size: isBelow('sm') ? 'md' : 'lg', className: "mx-auto sm:mx-0", children: [jsx(AvatarImage, { src: post.author.avatar }), jsx(AvatarFallback, { children: post.author.name[0] })] }), jsxs("div", { className: "flex-1 text-center sm:text-left", children: [jsxs("h3", { className: "font-semibold text-gray-900 mb-2 text-sm sm:text-base", children: ["About ", post.author.name] }), jsx("p", { className: "text-gray-600 mb-4 text-sm sm:text-base", children: post.author.bio || 'Passionate writer and developer sharing insights about modern web development.' }), jsxs("div", { className: "flex justify-center sm:justify-start space-x-2 sm:space-x-4", children: [jsx(Button, { variant: "outline", size: "sm", children: "Follow" }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Twitter, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Linkedin, { className: "h-4 w-4" }) })] })] })] }) }) }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8 p-4 sm:p-6 bg-gray-50 rounded-lg space-y-4 sm:space-y-0", children: [jsxs("div", { className: "flex items-center justify-center sm:justify-start space-x-4 sm:space-x-6", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Heart, { className: "h-4 w-4 sm:h-5 sm:w-5 text-red-500" }), jsx("span", { className: "font-medium text-sm sm:text-base", children: post.stats.likes })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(MessageCircle, { className: "h-4 w-4 sm:h-5 sm:w-5 text-blue-500" }), jsx("span", { className: "font-medium text-sm sm:text-base", children: post.stats.comments })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsx(Share2, { className: "h-4 w-4 sm:h-5 sm:w-5 text-green-500" }), jsx("span", { className: "font-medium text-sm sm:text-base", children: post.stats.shares })] })] }), jsxs(Button, { variant: "primary", size: isBelow('sm') ? 'sm' : 'md', onClick: () => showToast.success('Post liked!'), className: "w-full sm:w-auto", children: [jsx(Heart, { className: "h-4 w-4 mr-2" }), "Like this post"] })] })] })] }), jsx(BlogCommentSection, { postId: post.id })] }), isAbove('lg') && (jsx("div", { className: "lg:col-span-3", children: jsx(BlogSidebar, { type: "tableOfContents", currentPost: post }) }))] }), isBelow('lg') && (jsx("div", { className: "mt-8 sm:mt-12", children: jsx(BlogSidebar, { type: "navigation", currentPost: post, relatedPosts: relatedPosts }) })), relatedPosts.length > 0 && (jsxs("div", { className: "mt-12 sm:mt-16", children: [jsx("h2", { className: "text-xl sm:text-2xl font-bold text-gray-900 mb-6 sm:mb-8", children: "Related Posts" }), jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: relatedPosts.map(relatedPost => (jsxs(Card, { className: "hover:shadow-lg transition-shadow cursor-pointer", children: [jsx("div", { className: "aspect-video bg-gray-100 rounded-t-lg overflow-hidden", children: jsx("img", { src: relatedPost.seoMeta.ogImage || 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=400', alt: relatedPost.title, className: "w-full h-full object-cover hover:scale-105 transition-transform duration-300" }) }), jsxs(CardContent, { className: "p-4", children: [jsx(Badge, { variant: "outline", className: "mb-2 text-xs", children: relatedPost.category }), jsx("h3", { className: "font-semibold text-gray-900 mb-2 line-clamp-2 text-sm sm:text-base", children: relatedPost.title }), jsx("p", { className: "text-gray-600 text-xs sm:text-sm mb-3 line-clamp-2", children: relatedPost.excerpt }), jsxs("div", { className: "flex items-center justify-between text-xs sm:text-sm text-gray-500", children: [jsx("span", { children: formatDate(relatedPost.publishedAt) }), jsxs("span", { children: [relatedPost.readingTime, " min read"] })] })] })] }, relatedPost.id))) })] }))] }));
+};
+export { SingleBlogView };
+//# sourceMappingURL=SingleBlogView.js.map

package/dist/components/Blog/SingleBlogView.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SingleBlogView.js","sources":["../../../src/components/Blog/SingleBlogView.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { CodeHighlight } from '../CodeHighlight/CodeHighlight';\nimport { \n Calendar, \n Clock, \n User, \n Tag, \n Share2, \n Heart, \n MessageCircle,\n Eye,\n ChevronLeft,\n Facebook,\n Twitter,\n Linkedin,\n Link as LinkIcon\n} from 'lucide-react';\nimport { Button } from '../Button';\nimport { Card, CardHeader, CardTitle, CardContent } from '../Card';\nimport { Badge } from '../Badge';\nimport { Avatar, AvatarImage, AvatarFallback } from '../Avatar';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { showToast } from '../Toast';\nimport { useBlogNavigation } from './hooks/useBlogNavigation';\nimport { BlogCommentSection } from './BlogCommentSection';\nimport { BlogSidebar } from './BlogSidebar';\nimport type { BlogPost } from './types';\nimport { sampleBlogPosts } from './data/sampleData';\n\ninterface SingleBlogViewProps {\n postId?: string;\n onBackClick?: () => void;\n className?: string;\n}\n\nexport const SingleBlogView: React.FC<SingleBlogViewProps> = ({\n postId = '1',\n onBackClick,\n className = '',\n}) => {\n const { generateTableOfContents } = useBlogNavigation();\n const { isAbove, isBelow } = useBreakpoint();\n \n // Get blog post data (in real app, this would come from API)\n const post = sampleBlogPosts.find(p => p.id === postId) || sampleBlogPosts[0];\n const relatedPosts = sampleBlogPosts.filter(p => \n p.id !== post.id && \n (p.category === post.category || p.tags.some(tag => post.tags.includes(tag)))\n ).slice(0, 3);\n\n useEffect(() => {\n generateTableOfContents(post.content);\n }, [post.content, generateTableOfContents]);\n\n const handleShare = (platform: string) => {\n const url = window.location.href;\n const title = post.title;\n \n let shareUrl = '';\n switch (platform) {\n case 'twitter':\n shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;\n break;\n case 'facebook':\n shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;\n break;\n case 'linkedin':\n shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;\n break;\n case 'copy':\n navigator.clipboard.writeText(url);\n showToast.success('Link copied to clipboard!');\n return;\n }\n \n if (shareUrl) {\n window.open(shareUrl, '_blank', 'width=600,height=400');\n }\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\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 {/* Back Navigation - Mobile optimized */}\n <div className=\"mb-4 sm:mb-6 lg:mb-8\">\n <Button variant=\"ghost\" onClick={onBackClick} className=\"mb-2 sm:mb-4 p-2 sm:p-3\">\n <ChevronLeft className=\"h-4 w-4 mr-1 sm:mr-2\" />\n <span className=\"text-sm sm:text-base\">Back to Blog</span>\n </Button>\n \n {/* Breadcrumb - Hidden on mobile, visible on tablet+ */}\n {isAbove('md') && (\n <nav className=\"flex items-center space-x-2 text-sm text-gray-600\">\n <a href=\"/\" className=\"hover:text-primary-600 transition-colors\">Home</a>\n <span>/</span>\n <a href=\"/blog\" className=\"hover:text-primary-600 transition-colors\">Blog</a>\n <span>/</span>\n <a href={`/blog/category/${post.category.toLowerCase()}`} className=\"hover:text-primary-600 transition-colors\">\n {post.category}\n </a>\n <span>/</span>\n <span className=\"text-gray-900 truncate max-w-xs\">{post.title}</span>\n </nav>\n )}\n </div>\n\n {/* Responsive Layout: Mobile stacked, Desktop with sidebars */}\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 lg:gap-8\">\n {/* Left Sidebar - Hidden on mobile/tablet, fixed on desktop */}\n {isAbove('lg') && (\n <div className=\"lg:col-span-3\">\n <BlogSidebar \n type=\"navigation\"\n currentPost={post}\n relatedPosts={relatedPosts}\n />\n </div>\n )}\n\n {/* Main Content - Full width on mobile, centered on desktop */}\n <div className=\"lg:col-span-6\">\n <article className=\"prose prose-sm sm:prose-base lg:prose-lg max-w-none\">\n {/* Article Header */}\n <header className=\"mb-6 sm:mb-8 not-prose\">\n <div className=\"flex flex-wrap items-center gap-2 mb-4\">\n <Badge \n variant=\"default\"\n className=\"text-xs sm:text-sm\"\n style={{ backgroundColor: post.category === 'Design' ? '#8b5cf6' : '#3b82f6' }}\n >\n {post.category}\n </Badge>\n {post.featured && (\n <Badge variant=\"warning\" className=\"text-xs sm:text-sm\">Featured</Badge>\n )}\n {post.tags.slice(0, isBelow('sm') ? 1 : 2).map(tag => (\n <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n \n <h1 className=\"text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4 sm:mb-6 leading-tight\">\n {post.title}\n </h1>\n \n {/* Author and Meta Info - Responsive layout */}\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 pb-4 sm:pb-6 border-b border-gray-200 space-y-4 sm:space-y-0\">\n <div className=\"flex items-center space-x-3 sm:space-x-4\">\n <Avatar size={isBelow('sm') ? 'sm' : 'lg'}>\n <AvatarImage src={post.author.avatar} />\n <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"font-semibold text-gray-900 text-sm sm:text-base\">{post.author.name}</p>\n <div className=\"flex flex-wrap items-center gap-2 sm:gap-4 text-xs sm:text-sm text-gray-600\">\n <div className=\"flex items-center space-x-1\">\n <Calendar className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{formatDate(post.publishedAt)}</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Clock className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{post.readingTime} min read</span>\n </div>\n <div className=\"flex items-center space-x-1\">\n <Eye className=\"h-3 w-3 sm:h-4 sm:w-4\" />\n <span>{post.stats.views.toLocaleString()} views</span>\n </div>\n </div>\n </div>\n </div>\n\n {/* Social Sharing - Responsive button sizes */}\n <div className=\"flex items-center space-x-1 sm:space-x-2\">\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('twitter')}\n className=\"p-2\"\n >\n <Twitter className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('facebook')}\n className=\"p-2\"\n >\n <Facebook className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('linkedin')}\n className=\"p-2\"\n >\n <Linkedin className=\"h-4 w-4\" />\n </Button>\n <Button \n variant=\"ghost\" \n size={isBelow('sm') ? 'sm' : 'md'} \n onClick={() => handleShare('copy')}\n className=\"p-2\"\n >\n <LinkIcon className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n\n {/* Featured Image - Responsive aspect ratio */}\n {post.seoMeta.ogImage && (\n <div className=\"aspect-video sm:aspect-[16/9] lg:aspect-video bg-gray-100 rounded-lg mb-6 sm:mb-8 overflow-hidden\">\n <img\n src={post.seoMeta.ogImage}\n alt={post.title}\n className=\"w-full h-full object-cover\"\n />\n </div>\n )}\n </header>\n\n {/* Article Content with Enhanced Syntax Highlighting */}\n <div className=\"prose prose-sm sm:prose-base lg:prose-lg max-w-none prose-headings:scroll-mt-20\">\n <ReactMarkdown\n remarkPlugins={[remarkGfm]}\n components={{\n h1: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h1\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h1>\n ),\n h2: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h2\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h2>\n ),\n h3: ({ children, ...props }: { children?: React.ReactNode; [key: string]: any }) => (\n <h3\n id={String(children).toLowerCase().replace(/[^a-z0-9\\s-]/g, '').replace(/\\s+/g, '-')}\n className=\"scroll-mt-20\"\n {...props}\n >\n {children}\n </h3>\n ),\n code: (props: { inline?: boolean; className?: string; children?: React.ReactNode }) => {\n const { inline, className, children } = props;\n if (inline) {\n return (\n <code\n className=\"bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono border\"\n {...props}\n >\n {children}\n </code>\n );\n }\n // Extract language from className (e.g. language-js)\n const match = /language-(\\w+)/.exec(className || '');\n return (\n <div className=\"relative group\">\n <CodeHighlight\n code={String(children).replace(/\\n$/, '')}\n language={match ? match[1] : 'javascript'}\n />\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-800 hover:bg-gray-700 text-gray-300 border border-gray-600\"\n onClick={() => {\n navigator.clipboard.writeText(String(children));\n showToast.success('Code copied to clipboard!');\n }}\n >\n Copy\n </Button>\n </div>\n );\n },\n }}\n >\n {post.content}\n </ReactMarkdown>\n </div>\n\n {/* Article Footer */}\n <footer className=\"mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 not-prose\">\n {/* Tags */}\n <div className=\"mb-6\">\n <h3 className=\"text-base sm:text-lg font-semibold text-gray-900 mb-3\">Tags</h3>\n <div className=\"flex flex-wrap gap-2\">\n {post.tags.map(tag => (\n <Badge key={tag} variant=\"outline\" className=\"cursor-pointer hover:bg-primary-50 text-xs sm:text-sm\">\n <Tag className=\"h-3 w-3 mr-1\" />\n {tag}\n </Badge>\n ))}\n </div>\n </div>\n\n {/* Author Bio */}\n <Card className=\"mb-6 sm:mb-8\">\n <CardContent className=\"p-4 sm:p-6\">\n <div className=\"flex flex-col sm:flex-row sm:items-start space-y-4 sm:space-y-0 sm:space-x-4\">\n <Avatar size={isBelow('sm') ? 'md' : 'lg'} className=\"mx-auto sm:mx-0\">\n <AvatarImage src={post.author.avatar} />\n <AvatarFallback>{post.author.name[0]}</AvatarFallback>\n </Avatar>\n <div className=\"flex-1 text-center sm:text-left\">\n <h3 className=\"font-semibold text-gray-900 mb-2 text-sm sm:text-base\">About {post.author.name}</h3>\n <p className=\"text-gray-600 mb-4 text-sm sm:text-base\">\n {post.author.bio || 'Passionate writer and developer sharing insights about modern web development.'}\n </p>\n <div className=\"flex justify-center sm:justify-start space-x-2 sm:space-x-4\">\n <Button variant=\"outline\" size=\"sm\">Follow</Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Twitter className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"ghost\" size=\"sm\">\n <Linkedin className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n\n {/* Article Stats - Responsive layout */}\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 sm:mb-8 p-4 sm:p-6 bg-gray-50 rounded-lg space-y-4 sm:space-y-0\">\n <div className=\"flex items-center justify-center sm:justify-start space-x-4 sm:space-x-6\">\n <div className=\"flex items-center space-x-2\">\n <Heart className=\"h-4 w-4 sm:h-5 sm:w-5 text-red-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.likes}</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <MessageCircle className=\"h-4 w-4 sm:h-5 sm:w-5 text-blue-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.comments}</span>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Share2 className=\"h-4 w-4 sm:h-5 sm:w-5 text-green-500\" />\n <span className=\"font-medium text-sm sm:text-base\">{post.stats.shares}</span>\n </div>\n </div>\n <Button \n variant=\"primary\" \n size={isBelow('sm') ? 'sm' : 'md'}\n onClick={() => showToast.success('Post liked!')}\n className=\"w-full sm:w-auto\"\n >\n <Heart className=\"h-4 w-4 mr-2\" />\n Like this post\n </Button>\n </div>\n </footer>\n </article>\n\n {/* Comments Section */}\n <BlogCommentSection postId={post.id} />\n </div>\n\n {/* Right Sidebar - Table of Contents (Desktop only) */}\n {isAbove('lg') && (\n <div className=\"lg:col-span-3\">\n <BlogSidebar \n type=\"tableOfContents\"\n currentPost={post}\n />\n </div>\n )}\n </div>\n\n {/* Mobile Navigation Sidebar - Show categories on mobile */}\n {isBelow('lg') && (\n <div className=\"mt-8 sm:mt-12\">\n <BlogSidebar \n type=\"navigation\"\n currentPost={post}\n relatedPosts={relatedPosts}\n />\n </div>\n )}\n\n {/* Related Posts - Responsive grid */}\n {relatedPosts.length > 0 && (\n <div className=\"mt-12 sm:mt-16\">\n <h2 className=\"text-xl sm:text-2xl font-bold text-gray-900 mb-6 sm:mb-8\">Related Posts</h2>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6\">\n {relatedPosts.map(relatedPost => (\n <Card key={relatedPost.id} className=\"hover:shadow-lg transition-shadow cursor-pointer\">\n <div className=\"aspect-video bg-gray-100 rounded-t-lg overflow-hidden\">\n <img\n src={relatedPost.seoMeta.ogImage || 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=400'}\n alt={relatedPost.title}\n className=\"w-full h-full object-cover hover:scale-105 transition-transform duration-300\"\n />\n </div>\n <CardContent className=\"p-4\">\n <Badge variant=\"outline\" className=\"mb-2 text-xs\">\n {relatedPost.category}\n </Badge>\n <h3 className=\"font-semibold text-gray-900 mb-2 line-clamp-2 text-sm sm:text-base\">\n {relatedPost.title}\n </h3>\n <p className=\"text-gray-600 text-xs sm:text-sm mb-3 line-clamp-2\">\n {relatedPost.excerpt}\n </p>\n <div className=\"flex items-center justify-between text-xs sm:text-sm text-gray-500\">\n <span>{formatDate(relatedPost.publishedAt)}</span>\n <span>{relatedPost.readingTime} min read</span>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n )}\n </div>\n );\n};"],"names":["_jsxs","_jsx","LinkIcon"],"mappings":"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"}

package/dist/components/Blog/data/sampleData.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { BlogPost, BlogComment, BlogCategory } from '../types';
+export declare const sampleBlogPosts: BlogPost[];
+export declare const sampleBlogComments: BlogComment[];
+export declare const sampleBlogCategories: BlogCategory[];