/* components.jsx β shared UI for Christian Dating Do's & Don'ts */
const { useState, useEffect, useRef, useMemo } = React;
/* ----------------------------------------------------------------
LIFE STAGES β single source of truth
---------------------------------------------------------------- */
const STAGES = {
seeking: { id: 'seeking', label: 'Seeking', glyph: 'π', color: 'var(--stage-seeking)', bg: 'var(--stage-seeking-bg)', note: 'Single, trusting God' },
dating: { id: 'dating', label: 'Dating', glyph: 'π¬', color: 'var(--stage-dating)', bg: 'var(--stage-dating-bg)', note: 'In a relationship' },
engaged: { id: 'engaged', label: 'Engaged', glyph: 'π', color: 'var(--stage-engaged)', bg: 'var(--stage-engaged-bg)', note: 'Preparing for marriage' },
starting: { id: 'starting', label: 'Starting Over', glyph: 'π', color: 'var(--stage-starting)', bg: 'var(--stage-starting-bg)', note: 'New season after loss' },
};
const STAGE_ORDER = ['seeking', 'dating', 'engaged', 'starting'];
/* ----------------------------------------------------------------
LOGO
---------------------------------------------------------------- */
function Logo({ size = 'md', mono = false, onClick }) {
const big = size === 'lg';
const wordSize = big ? 28 : size === 'sm' ? 16 : 20;
const eyeSize = big ? 11 : 10;
return (
);
}
function Monogram({ size = 32, mono = false }) {
return (
);
}
/* ----------------------------------------------------------------
LIFE STAGE TAG β small colored pill
---------------------------------------------------------------- */
function StageTag({ stage, small = false }) {
const s = STAGES[stage];
if (!s) return null;
return (
{s.label}
);
}
/* ----------------------------------------------------------------
CATEGORY TAG β Prayer Request / Praise Report / Reflection
matches the soft cream-orange tag style from Altar Wall
---------------------------------------------------------------- */
function CategoryTag({ kind = 'prayer' }) {
const map = {
prayer: { label: 'Prayer Request', bg: 'var(--orange-soft)', fg: 'var(--orange-text)' },
praise: { label: 'Praise Report', bg: 'var(--orange-soft)', fg: 'var(--orange-text)' },
word: { label: 'A Word Today', bg: 'var(--orange-soft)', fg: 'var(--orange-text)' },
wisdom: { label: 'Wisdom', bg: 'var(--orange-soft)', fg: 'var(--orange-text)' },
};
const m = map[kind] || map.prayer;
return (
{m.label}
);
}
/* ----------------------------------------------------------------
REACTION PILL β Altar Wall style
Primary = filled burnt orange; secondaries = outlined white
---------------------------------------------------------------- */
function ReactionPill({ emoji, label, count, active = false, primary = false, onClick }) {
const filled = active || primary;
return (
);
}
/* ----------------------------------------------------------------
POST CARD β community thread item, Altar Wall style
---------------------------------------------------------------- */
function PostCard({ post, onReact, onReply, onReplyReact, locked = false, dim = false, teaser = false }) {
const [expanded, setExpanded] = useState(false);
const replies = post.replies || [];
const replyCount = replies.length;
const interactive = !dim && !teaser;
const handleCardClick = (e) => {
if (!interactive) return;
if (!expanded) setExpanded(true);
};
const handleHeaderClick = (e) => {
e.stopPropagation();
if (!interactive) return;
setExpanded(v => !v);
};
// Inner click guards β anything interactive stops propagation so the card click doesn't fire.
const stop = (e) => e.stopPropagation();
return (
{ if (interactive && !expanded) e.currentTarget.style.boxShadow = '0 1px 3px rgba(74,47,22,0.08), 0 12px 28px rgba(74,47,22,0.10)'; }}
onMouseLeave={e => { if (interactive) e.currentTarget.style.boxShadow = 'var(--shadow-card)'; }}
>
{/* author row β clickable header for collapse */}
{/* tags row */}
{post.category && }
{/* body */}
{post.body}
{/* reactions row */}
!locked && onReact && onReact(post.id, 'praying')}
/>
!locked && onReact && onReact(post.id, 'with_you')}
/>
!locked && onReact && onReact(post.id, 'amen')}
/>
{ e.stopPropagation(); if (interactive) setExpanded(v => !v); }}
/>
{/* expanded: replies */}
{expanded && (
)}
);
}
/* ----------------------------------------------------------------
CHEVRON β small expand/collapse indicator
---------------------------------------------------------------- */
function Chevron({ up }) {
return (
);
}
/* ----------------------------------------------------------------
REPLIES PILL β outlined count, matches reaction pill metrics
---------------------------------------------------------------- */
function RepliesPill({ count, active, interactive = true, onClick }) {
return (
);
}
/* ----------------------------------------------------------------
REPLIES SECTION β list + composer
---------------------------------------------------------------- */
function RepliesSection({ post, replies, locked, onReply, onReplyReact }) {
const [showAll, setShowAll] = useState(false);
const visible = showAll ? replies : replies.slice(0, 3);
const hiddenCount = Math.max(0, replies.length - 3);
return (
e.stopPropagation()}
style={{
marginTop: 18, paddingTop: 18,
borderTop: '1px solid var(--line)',
display: 'flex', flexDirection: 'column', gap: 14,
}}
>
{replies.length === 0 && (
No replies yet. Be the first to encourage {post.name.split(' ')[0]}.
)}
{visible.map(r => (
))}
{!showAll && hiddenCount > 0 && (
)}
onReply && onReply(post.id, text)}
/>
{reply.body}
!locked && onReact && onReact(postId, reply.id, 'praying')}
/>
!locked && onReact && onReact(postId, reply.id, 'with_you')}
/>
!locked && onReact && onReact(postId, reply.id, 'amen')}
/>
);
}
/* ----------------------------------------------------------------
SMALL REACTION PILL β same shape, reduced metrics
---------------------------------------------------------------- */
function SmallReactionPill({ emoji, label, count, active = false, primary = false, onClick }) {
const filled = active || primary;
return (
);
}
/* ----------------------------------------------------------------
REPLY COMPOSER β single-line input + inline Post button
---------------------------------------------------------------- */
function ReplyComposer({ locked, onSubmit }) {
const [text, setText] = useState('');
const MAX = 280;
if (locked) {
return (
);
}
const submit = () => {
const t = text.trim();
if (!t) return;
onSubmit && onSubmit(t.slice(0, MAX));
setText('');
};
const remaining = MAX - text.length;
const nearLimit = remaining <= 40;
return (
{ e.currentTarget.style.borderColor = 'var(--orange)'; e.currentTarget.style.boxShadow = '0 0 0 4px rgba(200, 98, 42, 0.10)'; }}
onBlur={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }}
>
setText(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } }}
placeholder="Share encouragement..."
style={{
flex: 1, minWidth: 0,
border: 'none', outline: 'none', background: 'transparent',
fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.5,
color: 'var(--ink)',
padding: '6px 0',
fontStyle: text ? 'normal' : 'italic',
}}
/>
{text.length > 0 && (
{remaining}
)}
);
}
/* ----------------------------------------------------------------
FILTER BAR β All / Seeking / Dating / Engaged / Starting Over
---------------------------------------------------------------- */
function FilterBar({ value, onChange }) {
const opts = [
{ id: 'all', label: 'All' },
...STAGE_ORDER.map(id => ({ id, label: STAGES[id].label })),
];
return (
{opts.map(o => {
const active = value === o.id;
return (
);
})}
);
}
/* ----------------------------------------------------------------
SHARE BOX β top of thread
---------------------------------------------------------------- */
function ShareBox({ onSubmit, stage }) {
const [text, setText] = useState('');
const [category, setCategory] = useState('prayer');
const [expanded, setExpanded] = useState(false);
const ref = useRef(null);
const submit = () => {
const t = text.trim();
if (!t) return;
onSubmit({ body: t, category, stage });
setText('');
setExpanded(false);
};
return (