src/shared/components/post/metadata-card.tsx

   1 import { Component } from "inferno";
   2 import { Post } from "lemmy-js-client";
   3 import * as sanitizeHtml from "sanitize-html";
   4 import { relTags } from "../../config";
   5 import { Icon } from "../common/icon";
   6
   7 interface MetadataCardProps {
   8   post: Post;
   9 }
  10
  11 interface MetadataCardState {
  12   expanded: boolean;
  13 }
  14
  15 export class MetadataCard extends Component<
  16   MetadataCardProps,
  17   MetadataCardState
  18 > {
  19   constructor(props: any, context: any) {
  20     super(props, context);
  21   }
  22
  23   render() {
  24     const post = this.props.post;
  25     return (
  26       <>
  27         {post.embed_title && post.url && (
  28           <div className="post-metadata-card card border-secondary mt-3 mb-2">
  29             <div className="row">
  30               <div className="col-12">
  31                 <div className="card-body">
  32                   {post.name !== post.embed_title && (
  33                     <>
  34                       <h5 className="card-title d-inline">
  35                         <a className="text-body" href={post.url} rel={relTags}>
  36                           {post.embed_title}
  37                         </a>
  38                       </h5>
  39                       <span className="d-inline-block ms-2 mb-2 small text-muted">
  40                         <a
  41                           className="text-muted fst-italic"
  42                           href={post.url}
  43                           rel={relTags}
  44                         >
  45                           {new URL(post.url).hostname}
  46                           <Icon icon="external-link" classes="ms-1" />
  47                         </a>
  48                       </span>
  49                     </>
  50                   )}
  51                   {post.embed_description && (
  52                     <div
  53                       className="card-text small text-muted md-div"
  54                       dangerouslySetInnerHTML={{
  55                         __html: sanitizeHtml(post.embed_description),
  56                       }}
  57                     />
  58                   )}
  59                 </div>
  60               </div>
  61             </div>
  62           </div>
  63         )}
  64       </>
  65     );
  66   }
  67 }