import React from 'react';
import { Col } from '@tlon/indigo-react';
import { MentionText } from '~/views/components/MentionText';
import useContactState from '~/logic/state/contact';


export function PostContent(props) {
  const { post, isParent, api, isReply } = props;
  const contacts = useContactState(state => state.contacts);

  return (
    <Col
      width="100%"
      pl="2"
      pr="2"
      pb={isParent || isReply ? "0" : "2"}
      maxHeight={ isParent ? "none" : "300px" }
      textOverflow="ellipsis"
      overflow="hidden"
      display="inline-block">
      <MentionText
        contacts={contacts}
        content={post.contents}
        api={api}
        transcluded={0}
      />
    </Col>
  );
}


import React from 'react';
import { Col, Box } from '@tlon/indigo-react';
import { GraphContentWide } from "~/views/landscape/components/Graph/GraphContentWide";
import styled from 'styled-components';

const TruncatedBox = styled(Col)`
  display: -webkit-box;
  -webkit-line-clamp: ${p => p.truncate ?? 'unset'};
  -webkit-box-orient: vertical;

`;

export function PostContent(props) {
  const { post, isParent, api, isReply } = props;

  return (
    <TruncatedBox
      display="-webkit-box"
      width="100%"
      pl="2"
      pr="2"
      truncate={isParent ? null : 8}
      textOverflow="ellipsis"
      overflow="hidden"
     >
      <GraphContentWide
        transcluded={0}
        post={post}
        api={api}
        showOurContact
      />
    </TruncatedBox>
  );
}


use unified graph rendering