Content Thumbnail default breakpoint

2025-09-04 21:11:17 -06:00
parent b54ddb16ba
commit 3a4b2d44c2
17 changed files with 894 additions and 11 deletions
@@ -0,0 +1,153 @@
+import ContentThumbnailTemplate from "../../components/ContentThumbnailTemplate";
+
+// Mock blog post data for testing
+const mockPost1 = {
+  slug: "test-post-1",
+  frontmatter: {
+    title: "Resolving Active Conflicts",
+    description:
+      "Practical steps for resolving conflicts while maintaining trust, cooperation, and shared goals",
+    author: "Author name",
+    date: "2025-04-15",
+    tags: ["conflict-resolution", "governance", "community"],
+  },
+  wordCount: 467,
+  readingTime: 3,
+};
+
+const mockPost2 = {
+  slug: "test-post-2",
+  frontmatter: {
+    title: "Operational Security for Mutual Aid",
+    description:
+      "Tactics to protect members, secure communication, and prevent Infiltration",
+    author: "Author name",
+    date: "2025-04-10",
+    tags: ["community-building", "sustainability", "structure"],
+  },
+  wordCount: 523,
+  readingTime: 4,
+};
+
+const mockPost3 = {
+  slug: "test-post-3",
+  frontmatter: {
+    title: "Making decisions without hierarchy",
+    description:
+      "A brief guide to collaborative nonhierarchical decision making",
+    author: "Author name",
+    date: "2025-04-05",
+    tags: ["communication", "remote-work", "collaboration"],
+  },
+  wordCount: 389,
+  readingTime: 2,
+};
+
+export default function TestThumbnailPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-900 mb-8">
+          ContentThumbnailTemplate Test
+        </h1>
+
+        <div className="space-y-12">
+          {/* Vertical Variant */}
+          <section>
+            <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+              Vertical Variant
+            </h2>
+            <div className="flex flex-wrap gap-6">
+              <ContentThumbnailTemplate
+                post={mockPost1}
+                variant="vertical"
+                className="mb-4"
+              />
+              <ContentThumbnailTemplate
+                post={mockPost2}
+                variant="vertical"
+                className="mb-4"
+                showTags={false}
+              />
+              <ContentThumbnailTemplate
+                post={mockPost3}
+                variant="vertical"
+                className="mb-4"
+                showReadingTime={false}
+              />
+            </div>
+          </section>
+
+          {/* Horizontal Variant */}
+          <section>
+            <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+              Horizontal Variant
+            </h2>
+            <div className="space-y-4">
+              <ContentThumbnailTemplate post={mockPost1} variant="horizontal" />
+              <ContentThumbnailTemplate
+                post={mockPost2}
+                variant="horizontal"
+                showTags={false}
+              />
+              <ContentThumbnailTemplate
+                post={mockPost3}
+                variant="horizontal"
+                showReadingTime={false}
+              />
+            </div>
+          </section>
+
+          {/* Component Props */}
+          <section className="bg-white p-6 rounded-lg shadow">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">
+              Component Props
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+              <div>
+                <h3 className="font-medium text-gray-700 mb-2">
+                  Required Props:
+                </h3>
+                <ul className="space-y-1 text-gray-600">
+                  <li>
+                    <code>post</code> - Blog post object with frontmatter
+                  </li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="font-medium text-gray-700 mb-2">
+                  Optional Props:
+                </h3>
+                <ul className="space-y-1 text-gray-600">
+                  <li>
+                    <code>variant</code> - "vertical" (default) or "horizontal"
+                  </li>
+                  <li>
+                    <code>className</code> - Additional CSS classes
+                  </li>
+                  <li>
+                    <code>showTags</code> - Show/hide tags (default: true)
+                  </li>
+                  <li>
+                    <code>showReadingTime</code> - Show/hide reading time
+                    (default: true)
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          {/* Mock Data */}
+          <section className="bg-white p-6 rounded-lg shadow">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">
+              Mock Data Structure
+            </h2>
+            <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto">
+              {JSON.stringify(mockPost1, null, 2)}
+            </pre>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}