sold

src/components/BlogPost.tsx

@@ -5,6 +5,7 @@ import { BlogPost, BlogPostSection } from '@/types/blog'
 interface BlogPostCardProps {
   post: BlogPost
   isLatest: boolean
+  compact?: boolean
 }
 
 const cardStyles = {
@@ -54,11 +55,38 @@ function formatDate(timestamp: string) {
   })
 }
 
-export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
+export function BlogPostCard({ post, isLatest, compact = false }: BlogPostCardProps) {
   const previewUrl = resolveMediaUrl(post.previewImage)
 
+  const containerStyle = compact ? {
+    ...cardStyles.container,
+    padding: '12px',
+    marginBottom: '0'
+  } : cardStyles.container
+
+  const imageWrapperStyle = compact ? {
+    ...cardStyles.imageWrapper,
+    marginLeft: '-12px',
+    marginRight: '-12px',
+    marginTop: '-12px',
+    height: '220px'
+  } : cardStyles.imageWrapper
+
+  const titleStyle = compact ? {
+    ...cardStyles.title,
+    fontSize: '18px',
+    marginBottom: '8px'
+  } : cardStyles.title
+
+  const excerptStyle = compact ? {
+    ...cardStyles.excerpt,
+    fontSize: '13px',
+    marginBottom: '12px',
+    lineHeight: 1.4
+  } : cardStyles.excerpt
+
   return (
-    <article style={cardStyles.container}>
+    <article style={containerStyle}>
       {post.isEditorsPick && (
         <div
           style={{
@@ -73,13 +101,36 @@ export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
             letterSpacing: '0.2em',
             textTransform: 'uppercase',
             transform: 'rotate(-45deg)',
-            boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
+            boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+            zIndex: 2
           }}
         >
           Editor's Pick
         </div>
       )}
 
+      {post.isSold && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '32px',
+            right: '-60px',
+            padding: '8px 64px',
+            backgroundColor: '#c0392b',
+            color: '#F7F1E1',
+            fontFamily: 'Space Mono, monospace',
+            fontSize: '12px',
+            letterSpacing: '0.2em',
+            textTransform: 'uppercase',
+            transform: 'rotate(45deg)',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+            zIndex: 2
+          }}
+        >
+          Sold
+        </div>
+      )}
+
       {isLatest && (
         <div
           style={{
@@ -102,7 +153,7 @@ export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
       {previewUrl && (
         <div
           style={{
-            ...cardStyles.imageWrapper,
+            ...imageWrapperStyle,
             backgroundImage: `url('${previewUrl}')`
           }}
         />
@@ -112,20 +163,20 @@ export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: '12px'
+        marginBottom: compact ? '6px' : '12px'
       }}>
         <span style={{
           fontFamily: 'Space Mono, monospace',
-          fontSize: '12px',
+          fontSize: compact ? '9px' : '12px',
           textTransform: 'uppercase',
-          letterSpacing: '0.15em',
+          letterSpacing: '0.1em',
           color: '#8B7D6B'
         }}>
           {formatDate(post.createdAt)}
         </span>
       </div>
 
-      <h2 style={cardStyles.title}>{post.title}</h2>
+      <h2 style={titleStyle}>{post.title}</h2>
 
       {post.linkUrl && (
         <div style={{ marginBottom: '16px' }}>
@@ -150,7 +201,7 @@ export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
         </div>
       )}
 
-      {post.excerpt && <p style={cardStyles.excerpt}>{post.excerpt}</p>}
+      {post.excerpt && <p style={excerptStyle}>{compact ? `${post.excerpt.substring(0, 80)}...` : post.excerpt}</p>}
 
       <a
         href={`/blog/${post.slug}`}
@@ -158,12 +209,12 @@ export function BlogPostCard({ post, isLatest }: BlogPostCardProps) {
           display: 'inline-flex',
           alignItems: 'center',
           gap: '8px',
-          padding: '12px 18px',
-          border: '2px solid #8B7D6B',
+          padding: compact ? '8px 12px' : '12px 18px',
+          border: compact ? '1px solid #8B7D6B' : '2px solid #8B7D6B',
           backgroundColor: 'transparent',
           fontFamily: 'Space Mono, monospace',
-          fontSize: '12px',
-          letterSpacing: '0.15em',
+          fontSize: compact ? '10px' : '12px',
+          letterSpacing: '0.1em',
           textTransform: 'uppercase',
           textDecoration: 'none',
           color: '#1E1A17',