Shop integration

Pottery-website/pages/ArticleDetail.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useParams, Navigate } from 'react-router-dom';
+import { useStore } from '../src/context/StoreContext';
+import BlogPostLayout from '../components/BlogPostLayout';
+
+const ArticleDetail: React.FC = () => {
+    const { slug } = useParams<{ slug: string }>();
+    const { articles } = useStore();
+
+    const article = articles.find(a => a.slug === slug);
+
+    if (!article) {
+        // You might want to show a 404 or just redirect back
+        return <Navigate to="/editorial" replace />;
+    }
+
+    return (
+        <BlogPostLayout
+            title={article.title}
+            category={article.category || 'Studio Life'}
+            date={article.date}
+            image={article.image}
+            imageAlt={article.title}
+        >
+            <div className="space-y-12">
+                {article.sections && article.sections.length > 0 ? (
+                    article.sections.map((section: any) => (
+                        <div key={section.id}>
+                            {section.type === 'text' ? (
+                                <p className="mb-6 leading-relaxed text-lg font-light text-stone-600 dark:text-stone-300">
+                                    {section.content}
+                                </p>
+                            ) : (
+                                <div className="my-12">
+                                    <img
+                                        src={section.content}
+                                        alt="Article detail"
+                                        className="w-full shadow-lg rounded-sm"
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    ))
+                ) : (
+                    <p className="italic text-stone-400">No content available for this article yet.</p>
+                )}
+            </div>
+        </BlogPostLayout>
+    );
+};
+
+export default ArticleDetail;