Function SimilarPosts

packages/shared/src/components/widgets/SimilarPosts.tsx:109–169

({
  posts,
  isLoading,
  className,
  title = 'You might like',
  moreButtonProps,
  ListItem = DefaultListItem,
}: SimilarPostsProps)

DefaultListItem.Placeholder = DefaultListItemPlaceholder;

export default function SimilarPosts({
  posts,
  isLoading,
  className,
  title = 'You might like',
  moreButtonProps,
  ListItem = DefaultListItem,
}: SimilarPostsProps): ReactElement {
  const { logEvent } = useLogContext();
  const { logOpts } = useContext(ActiveFeedContext);
  const moreButtonHref =
    moreButtonProps?.href ?? process.env.NEXT_PUBLIC_WEBAPP_URL ?? '/';
  const moreButtonText = moreButtonProps?.text || 'View all';
  const displayPosts = posts ?? [];

  const onLinkClick = async (post: Post): Promise<void> => {
    logEvent(
      postLogEvent(LogEvent.Click, post, {
        extra: { origin: 'recommendation' },
        ...(logOpts && logOpts),
      }),
    );
  };

  return (
    <WidgetContainer
      className={classNames('flex flex-col overflow-hidden p-4', className)}
    >
      <h4 className="mb-2 font-bold text-text-primary typo-callout">{title}</h4>
      {isLoading ? (
        <>
          <ListItem.Placeholder />
          <ListItem.Placeholder />
          <ListItem.Placeholder />
        </>
      ) : (
        <>
          {displayPosts.map((post) => (
            <ListItem
              key={post.id}
              post={post}
              onLinkClick={() => onLinkClick(post)}
            />
          ))}
        </>
      )}
      <Link href={moreButtonHref} passHref>
        <Button
          variant={ButtonVariant.Tertiary}
          className="mt-2 self-start"
          size={ButtonSize.Small}
          tag="a"
          icon={<ArrowIcon className="rotate-90" />}
          iconPosition={ButtonIconPosition.Right}
        >
          {moreButtonText}
        </Button>
      </Link>