diff --git a/JoyboyCommunity/src/modules/Post/index.tsx b/JoyboyCommunity/src/modules/Post/index.tsx index dfff4ae4..819b1756 100644 --- a/JoyboyCommunity/src/modules/Post/index.tsx +++ b/JoyboyCommunity/src/modules/Post/index.tsx @@ -27,7 +27,7 @@ export type PostProps = { event?: NDKEvent; }; -export const Post: React.FC = ({asComment, event}) => { +export const Post: React.FC = ({ asComment, event }) => { const repostedEvent = undefined; const {theme} = useTheme(); @@ -45,6 +45,12 @@ export const Post: React.FC = ({asComment, event}) => { const queryClient = useQueryClient(); const [menuOpen, setMenuOpen] = useState(false); + const [isContentExpanded, setIsContentExpanded] = useState(false); + + const toggleExpandedContent = () => { + setIsContentExpanded((prev) => !prev); + }; + const scale = useSharedValue(1); @@ -107,6 +113,9 @@ export const Post: React.FC = ({asComment, event}) => { ); }; + const content = event?.content || ''; + const truncatedContent = content.length > 200 ? `${content.slice(0, 200)}...` : content; + return ( {repostedEvent && ( @@ -188,9 +197,17 @@ export const Post: React.FC = ({asComment, event}) => { - {event?.content} + {isContentExpanded ? content : truncatedContent} + {content.length > 200 && ( + + + {isContentExpanded ? 'See less' : 'See more...'} + + + )} + {postSource && ( ({ alignItems: 'center', gap: Spacing.xxxsmall, }, + seeMore: { + color: theme.colors.primary, + fontSize: 13, + marginTop: Spacing.xsmall, + }, }));