Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import styled from 'styled-components'

import useFetch from '@app/hooks/useFetch'

import Widget from '@app/components/UI/Widget'
import EmptySection from '@app/components/UI/EmptySection'

const StyledNewsList = styled.ul`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 380px;
  padding-bottom: 10px;
  overflow: auto;
`

const StyledNewItem = styled.div`
  display: flex;
  gap: 0.5rem;
  > a:first-child {
    flex-shrink: 0;
  }
  img {
    width: 100px;
    aspect-ratio: 100/60;
    object-fit: cover;
  }
  .post-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    max-width: calc(100% - (100px + 0.5rem));
    h4 {
      font-weight: 600;
      font-size: 1.2rem;
      color: var(--subtitle-color);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      color: var(--font-color);
      font-size: 0.8rem;
    }
  }
`

export default function HomeNews({ currentPost }) {
  const { data: news } = useFetch('/helpers/posts')
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <Widget>
      <Widget.Header title={labels.posts} />

      <Widget.Body>
        <StyledNewsList>
          {!news.length ? (
            <EmptySection message={labels.not_available_posts} />
          ) : (
            news.map(({ link, title, image, date }) => {
              if (link.includes(currentPost)) return null

              return (
                <StyledNewItem key={title}>
                  <Link to={link}>
                    <img src={image} alt={`${title} image`} />
                  </Link>

                  <div className='post-info'>
                    <Link to={link}>
                      <h4 title={title}>{title}</h4>
                    </Link>
                    <span>{date}</span>
                  </div>
                </StyledNewItem>
              )
            })
          )}
        </StyledNewsList>
      </Widget.Body>
    </Widget>
  )
}