@lovett/ui 0.0.1

package/src/meta-previews/MetaRightColumnPreview.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import type { PreviewAdData } from './types';
+import { CreativeMedia } from './CreativeMedia';
+
+interface MetaRightColumnPreviewProps {
+  adData: PreviewAdData;
+}
+
+/**
+ * Facebook Desktop Right Column Preview
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Source: desktop-right-column.html extraction
+ * Container: 375x206px
+ */
+export const MetaRightColumnPreview: React.FC<MetaRightColumnPreviewProps> = ({
+  adData,
+}) => {
+  // Facebook Right Column exact design tokens - extracted from Creative Hub
+  const rc = {
+    // Container
+    containerWidth: 375,
+    containerHeight: 206.648,
+    containerBg: 'rgb(255, 255, 255)',
+    fontFamily: 'system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif',
+    baseColor: 'rgb(28, 30, 33)',
+    baseFontSize: 12,
+    baseLineHeight: '16.08px',
+
+    // Inner card
+    cardWidth: 343,
+    cardHeight: 190.648,
+    cardMargin: '0px 8px',
+    cardPadding: '8px',
+    cardRadius: 6,
+
+    // Image
+    imageWidth: 188.648,
+    imageHeight: 188.648,
+    imageMinHeight: 1,
+    imageMaxHeight: 205,
+    imageBorder: '1px solid rgba(0, 0, 0, 0.1)',
+    imageRadius: 8,
+
+    // Content section
+    contentWidth: 142.352,
+    contentPaddingLeft: 12,
+
+    // Headline
+    headlineSize: 15,
+    headlineWeight: 500,
+    headlineColor: 'rgb(8, 8, 9)',
+    headlineLineHeight: '19.64px',
+    headlineHeight: 39.28,
+
+    // Display Link
+    displayLinkSize: 13,
+    displayLinkWeight: 400,
+    displayLinkColor: 'rgb(101, 104, 108)',
+    displayLinkLineHeight: '18.22px',
+  };
+
+  return (
+    <div
+      className="meta-preview"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        fontFamily: rc.fontFamily,
+        fontSize: `${rc.baseFontSize}px`,
+        color: rc.baseColor,
+        lineHeight: rc.baseLineHeight,
+      }}
+    >
+      <div
+        style={{
+          width: `${rc.containerWidth}px`, maxWidth: '100%',
+          height: `${rc.containerHeight}px`,
+          backgroundColor: rc.containerBg,
+          overflow: 'visible',
+        }}
+      >
+        {/* Inner Card */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            width: `${rc.cardWidth}px`,
+            height: `${rc.cardHeight}px`,
+            margin: rc.cardMargin,
+            padding: rc.cardPadding,
+            borderRadius: `${rc.cardRadius}px`,
+            cursor: 'pointer',
+          }}
+        >
+          {/* Content wrapper */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              width: `${rc.cardWidth}px`,
+              height: `${rc.cardHeight}px`,
+            }}
+          >
+            {/* Image - 188.648x188.648px with 8px radius */}
+            <div
+              style={{
+                width: `${rc.imageWidth}px`,
+                height: `${rc.imageHeight}px`,
+                flexShrink: 0,
+              }}
+            >
+              {adData.creativeImage ? (
+                <CreativeMedia
+                  src={adData.creativeImage}
+                  mediaType={adData.creativeMediaType}
+                  alt={adData.headline || 'Ad'}
+                  style={{
+                    width: `${rc.imageWidth}px`,
+                    height: `${rc.imageHeight}px`,
+                    minHeight: `${rc.imageMinHeight}px`,
+                    maxHeight: `${rc.imageMaxHeight}px`,
+                    border: rc.imageBorder,
+                    borderRadius: `${rc.imageRadius}px`,
+                    objectFit: 'cover',
+                    display: 'block',
+                    overflow: 'clip',
+                  }}
+                />
+              ) : (
+                <div
+                  style={{
+                    width: `${rc.imageWidth}px`,
+                    height: `${rc.imageHeight}px`,
+                    minHeight: `${rc.imageMinHeight}px`,
+                    maxHeight: `${rc.imageMaxHeight}px`,
+                    border: rc.imageBorder,
+                    borderRadius: `${rc.imageRadius}px`,
+                    backgroundColor: 'var(--color-surface-100)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <div style={{ textAlign: 'center', color: rc.displayLinkColor }}>
+                    <div
+                      style={{
+                        width: '48px',
+                        height: '48px',
+                        backgroundColor: 'var(--color-surface-200)',
+                        borderRadius: '8px',
+                        margin: '0 auto 8px',
+                      }}
+                    />
+                    <p style={{ fontSize: '12px', margin: 0 }}>1:1</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Text Content */}
+            <div
+              style={{
+                width: `${rc.contentWidth}px`,
+                paddingLeft: `${rc.contentPaddingLeft}px`,
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  margin: '-5px 0px',
+                }}
+              >
+                {/* Headline - font-size: 15px, font-weight: 500, color: rgb(8, 8, 9) */}
+                <div
+                  style={{
+                    margin: '5px 0px',
+                  }}
+                >
+                  <span
+                    style={{
+                      display: 'block',
+                      width: `${rc.contentWidth}px`,
+                      maxWidth: '100%',
+                      fontSize: `${rc.headlineSize}px`,
+                      fontWeight: rc.headlineWeight,
+                      lineHeight: rc.headlineLineHeight,
+                      color: rc.headlineColor,
+                      overflow: 'hidden',
+                      textOverflow: 'clip',
+                    }}
+                  >
+                    <span
+                      style={{
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        maxWidth: '100%',
+                      }}
+                    >
+                      {adData.headline}
+                    </span>
+                  </span>
+                </div>
+
+                {/* Display Link - font-size: 13px, color: rgb(101, 104, 108) */}
+                <div
+                  style={{
+                    margin: '5px 0px',
+                  }}
+                >
+                  <span
+                    style={{
+                      display: 'block',
+                      width: `${rc.contentWidth}px`,
+                      maxWidth: '100%',
+                      fontSize: `${rc.displayLinkSize}px`,
+                      fontWeight: rc.displayLinkWeight,
+                      lineHeight: rc.displayLinkLineHeight,
+                      color: rc.displayLinkColor,
+                      textTransform: 'lowercase',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {adData.displayLink}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MetaRightColumnPreview.displayName = 'MetaRightColumnPreview';

package/src/meta-previews/MetaSearchPreview.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { MoreHorizontal } from 'lucide-react';
+import type { PreviewAdData } from './types';
+import { ProfileAvatar } from './ProfileAvatar';
+
+interface MetaSearchPreviewProps {
+  adData: PreviewAdData;
+}
+
+export const MetaSearchPreview: React.FC<MetaSearchPreviewProps> = ({
+  adData,
+}) => {
+  // Truncate text helper
+  const truncateText = (text: string, limit: number) => {
+    if (!text || text.length <= limit) return text;
+    return text.substring(0, limit);
+  };
+
+  return (
+    <div className="meta-preview w-full h-full">
+      <div
+        className="flex items-center justify-center bg-gray-100 rounded-xl w-full h-full"
+        style={{
+          padding: '24px',
+        }}
+      >
+        <div className="bg-white rounded-lg overflow-hidden w-full max-w-[300px]">
+            {/* Image Section - Square 1:1 */}
+            <div style={{ width: '100%', position: 'relative', paddingBottom: '100%' }}>
+              {adData.creativeImage ? (
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    backgroundImage: `url("${adData.creativeImage}")`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  }}
+                />
+              ) : (
+                <div
+                  className="flex items-center justify-center bg-gray-100"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                  }}
+                >
+                  <div className="text-center text-gray-400">
+                    <div className="w-16 h-16 bg-gray-200 rounded-lg mx-auto mb-2" />
+                    <p className="text-sm">1:1 Image</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Content Section */}
+            <div className="p-4">
+              {/* Profile Section */}
+              <div className="flex items-start gap-2 mb-2">
+                {/* Profile Image */}
+                <div
+                  className="flex-shrink-0 rounded-full border overflow-hidden"
+                  style={{
+                    width: '20px',
+                    height: '20px',
+                    borderColor: 'rgb(235, 237, 240)',
+                  }}
+                >
+                  <ProfileAvatar src={adData.profileImage} name={adData.brandName} fontSize={10} />
+                </div>
+
+                {/* Brand Name */}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-900 truncate">
+                    {truncateText(adData.brandName, 30)}
+                  </p>
+                </div>
+
+                {/* Ellipsis Button */}
+                <button className="flex-shrink-0">
+                  <MoreHorizontal className="w-5 h-5 text-gray-600" />
+                </button>
+              </div>
+
+              {/* Headline */}
+              <h3
+                className="font-medium mb-2 overflow-hidden"
+                style={{
+                  color: 'var(--color-meta-blue)',
+                  fontSize: '15px',
+                  lineHeight: '20px',
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                }}
+              >
+                {adData.headline}
+              </h3>
+
+              {/* Sponsored Tag */}
+              <p className="text-xs text-gray-500">Sponsored</p>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+};