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 export class MetadataCard extends Component<MetadataCardProps> {
  12   constructor(props: any, context: any) {
  13     super(props, context);
  14   }
  15
  16   render() {
  17     const post = this.props.post;
  18
  19     if (post.embed_title && post.url) {
  20       return (
  21         <div className="post-metadata-card card border-secondary mt-3 mb-2">
  22           <div className="row">
  23             <div className="col-12">
  24               <div className="card-body">
  25                 {post.name !== post.embed_title && (
  26                   <>
  27                     <h5 className="card-title d-inline">
  28                       <a className="text-body" href={post.url} rel={relTags}>
  29                         {post.embed_title}
  30                       </a>
  31                     </h5>
  32                     <span className="d-inline-block ms-2 mb-2 small text-muted">
  33                       <a
  34                         className="text-muted fst-italic"
  35                         href={post.url}
  36                         rel={relTags}
  37                       >
  38                         {new URL(post.url).hostname}
  39                         <Icon icon="external-link" classes="ms-1" />
  40                       </a>
  41                     </span>
  42                   </>
  43                 )}
  44                 {post.embed_description && (
  45                   <div
  46                     className="card-text small text-muted md-div"
  47                     dangerouslySetInnerHTML={{
  48                       __html: sanitizeHtml(post.embed_description),
  49                     }}
  50                   />
  51                 )}
  52               </div>
  53             </div>
  54           </div>
  55         </div>
  56       );
  57     } else {
  58       return <></>;
  59     }
  60   }
  61 }