feat: rebuild portfolio with React + TanStack Start

src/components/blocks/block-renderer.tsx

@@ -0,0 +1,55 @@
+import { RichText } from './rich-text'
+import { Quote } from './quote'
+import { Media } from './media'
+import { Slider } from './slider'
+
+import type { IRichText } from './rich-text'
+import type { IQuote } from './quote'
+import type { IMedia } from './media'
+import type { ISlider } from './slider'
+
+// Union type of all block types
+export type Block = IRichText | IQuote | IMedia | ISlider
+
+interface BlockRendererProps {
+  blocks: Array<Block>
+}
+
+/**
+ * BlockRenderer - Renders dynamic content blocks from Strapi
+ *
+ * Usage:
+ * ```tsx
+ * <BlockRenderer blocks={article.blocks} />
+ * ```
+ */
+export function BlockRenderer({ blocks }: Readonly<BlockRendererProps>) {
+  if (!blocks || blocks.length === 0) return null
+
+  const renderBlock = (block: Block) => {
+    switch (block.__component) {
+      case 'shared.rich-text':
+        return <RichText {...block} />
+      case 'shared.quote':
+        return <Quote {...block} />
+      case 'shared.media':
+        return <Media {...block} />
+      case 'shared.slider':
+        return <Slider {...block} />
+      default:
+        // Log unknown block types in development
+        console.warn('Unknown block type:', (block as any).__component)
+        return null
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {blocks.map((block, index) => (
+        <div key={`${block.__component}-${block.id}-${index}`}>
+          {renderBlock(block)}
+        </div>
+      ))}
+    </div>
+  )
+}