@medalsocial/meda
Version:
Shared Meda UI shell and runtime package.
27 lines (26 loc) • 5.35 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Globe, MessageCircle, MoreHorizontal, Share2, ThumbsUp } from 'lucide-react';
import { cn } from '../../lib/utils.js';
import { Avatar } from '../internal/avatar.js';
import { Textarea } from '../internal/textarea.js';
export const DEFAULT_FACEBOOK_LABELS = {
justNow: 'Just now',
placeholder: "What's on your mind?",
comments: (count) => `${count} comments`,
shares: (count) => `${count} shares`,
like: 'Like',
comment: 'Comment',
share: 'Share',
moreOptions: 'More options',
};
/**
* Facebook feed-card preview. Renders displayName, avatar, content, optional
* media grid, and the standard Like/Comment/Share footer.
*/
/* v8 ignore next 11 — v8 phantom duplicate function record */
export function FacebookPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
const l = { ...DEFAULT_FACEBOOK_LABELS, ...labels };
/* v8 ignore next — v8 phantom duplicate function body record at this position */
return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "facebook", className: cn('@container bg-white text-gray-900 @[420px]:text-[15px] dark:bg-[#242526] dark:text-[#E4E6EB]', className), children: [_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-10 w-10" }), _jsxs("div", { children: [_jsx("p", { className: "cursor-pointer font-semibold text-[15px] text-gray-900 hover:underline", children: displayName }), _jsxs("div", { className: "flex items-center gap-1 text-[13px] text-gray-500", children: [_jsx("span", { children: l.justNow }), _jsx("span", { children: "\u00B7" }), _jsx(Globe, { className: "h-3 w-3", "aria-hidden": "true" })] })] })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 text-gray-500 hover:bg-gray-100", children: _jsx(MoreHorizontal, { className: "h-5 w-5" }) })] }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "mt-3 min-h-[60px] text-[15px] text-gray-900 placeholder:text-gray-500" })) : (_jsx("p", { className: "mt-3 whitespace-pre-wrap break-words text-[15px]", children: content }))] }), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: cn('bg-gray-100', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length === 2 && 'grid grid-cols-2 gap-0.5', mediaUrls.length === 3 && 'grid grid-cols-2 gap-0.5', mediaUrls.length >= 4 && 'grid grid-cols-2 gap-0.5'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsxs("div", { className: cn('relative bg-gray-200', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length === 2 && 'aspect-square', mediaUrls.length === 3 && i === 0 && 'row-span-2', mediaUrls.length >= 4 && 'aspect-square'), children: [_jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }), mediaUrls.length > 4 && i === 3 && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: _jsxs("span", { className: "font-semibold text-2xl text-white", children: ["+", mediaUrls.length - 4] }) }))] }, url))) })), _jsxs("div", { className: "flex items-center justify-between px-4 py-2 text-[13px] text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("div", { className: "flex -space-x-1", children: [_jsx("div", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-full bg-[#1877F2]", children: _jsx(ThumbsUp, { className: "h-2.5 w-2.5 text-white", fill: "currentColor" }) }), _jsx("div", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-full bg-red-500", children: _jsx("span", { className: "text-[10px]", "aria-hidden": "true", children: "\u2665" }) })] }), _jsx("span", { children: "0" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { children: l.comments(0) }), _jsx("span", { children: l.shares(0) })] })] }), _jsx("div", { className: "mx-4 border-gray-200 border-t" }), _jsxs("div", { className: "flex items-center justify-around px-2 py-1", children: [_jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-2 text-gray-600 hover:bg-gray-100", children: [_jsx(ThumbsUp, { className: "h-5 w-5" }), _jsx("span", { className: "font-semibold text-[15px]", children: l.like })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-2 text-gray-600 hover:bg-gray-100", children: [_jsx(MessageCircle, { className: "h-5 w-5" }), _jsx("span", { className: "font-semibold text-[15px]", children: l.comment })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-2 text-gray-600 hover:bg-gray-100", children: [_jsx(Share2, { className: "h-5 w-5" }), _jsx("span", { className: "font-semibold text-[15px]", children: l.share })] })] })] }));
}