@autobusal/common 1.2.1 → 1.3.0

package/BlogItem/BlogItem.tsx

@@ -1,38 +1,35 @@
 import { TFunction } from 'i18next';
-import { Trans } from 'react-i18next';
-import { Image, LinkTitle, PostedBy, LinkCategory, TextPreview, LinkMore, TextView } from './styles';
+import { FiCalendar } from 'react-icons/fi';
+import Image from './Image';
+import { LinkTitle, Details, DisplayDate, TextPreview, TextView, ButtonLink } from './styles';
 import { ArticleData } from '@autobusal/providers/types/articles';
 
 interface Props {
   article: ArticleData
-  type: 'preview' | 'view'
+  type: 'preview' | 'view' | 'short'
   t: TFunction<'common'>
 }
 
 const BlogItem = ({ article, type, t }: Props): JSX.Element => (
   <div className="box">
-    { article.image_url !== null && <Image src={ article.image_url } /> }
+    { article.image_url !== null && <Image type={ type } internal={ article.internal } image_url={ article.image_url } /> }
 
     <LinkTitle to={ `/blog/article/${ article.internal }` }>{ article.title }</LinkTitle>
 
-    <PostedBy>
-      <Trans
-        i18nKey="blog_item.posted_by"
-        ns="common"
-        values={{
-          date: article.created_at,
-          name: article.category.name
-        }}
-        components={{
-          category: <LinkCategory to={ `/blog?category=${ article.category.id }` } />
-        }}
-      />
-    </PostedBy>
+    <Details>
+      <DisplayDate>
+        <FiCalendar />
+        { article.display_at }
+      </DisplayDate>
+
+      { article.category && <ButtonLink to={ `/blog?category=${ article.category.id }` }>{ article.category.name }</ButtonLink> }
+    </Details>
 
     { type === 'preview' && (
       <TextPreview>
         { article.stripped } &nbsp;
-        <LinkMore to={ `/blog/article/${ article.internal }` }>{ t('blog_item.read_more', { ns: 'common' }) }</LinkMore>
+
+        <ButtonLink $marginTop={ 10 } to={ `/blog/article/${ article.internal }` }>{ t('blog_item.read_more', { ns: 'common' }) }</ButtonLink>
       </TextPreview>
     ) }
 

package/BlogItem/Image.tsx

@@ -0,0 +1,23 @@
+import { ContainerImage, ImageLink } from './styles';
+
+interface Props {
+  type: 'preview' | 'view' | 'short'
+  internal: string
+  image_url: string
+}
+
+const Image = ({ type, internal, image_url }: Props): JSX.Element => {
+  if (type === 'preview' || type === 'short') {
+    return (
+      <ImageLink to={ `/blog/article/${ internal }` }>
+        <ContainerImage src={ image_url } />
+      </ImageLink>
+    );
+  }
+
+  return (
+    <ContainerImage src={ image_url } />
+  );
+};
+
+export default Image;

package/BlogItem/styles.ts

@@ -1,27 +1,45 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 
-export const Image = styled.img`
+export const ContainerImage = styled.img`
   display: block;
   width: 100%;
   margin-bottom: 15px;
   border-radius: ${ props => props.theme.borderRadius };
 `;
 
+export const ImageLink = styled(Link)`
+  display: block;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: .8;
+  }
+`;
+
 export const LinkTitle = styled(Link)`
   font-size: ${ props => props.theme.size.xl };
   font-weight: 700;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    opacity: .7;
+  }
 `;
 
-export const PostedBy = styled.div`
-  padding: 10px 0;
-  color: ${ props => props.theme.font.info };
-  font-size: ${ props => props.theme.size.xs };
+export const Details = styled.div`
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  margin: 10px 0;
 `;
 
-export const LinkCategory = styled(Link)`
-  color: ${ props => props.theme.font.info };
-  font-size: ${ props => props.theme.size.xs };
+export const DisplayDate = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: ${ props => props.theme.size.s };
 `;
 
 export const TextPreview = styled.div`
@@ -34,8 +52,22 @@ export const TextView = styled(TextPreview)`
   gap: 10px;
 `;
 
-export const LinkMore = styled(Link)`
-  display: inline;
-  font-size: ${ props => props.theme.size.s };
-  color: ${ props => props.theme.font.info };
+export const ButtonLink = styled(Link)<{ $marginTop?: number }>`
+  display: inline-block;
+  padding: 3px 10px;
+  ${ props => props.$marginTop && css<{ $marginTop?: number }>`
+    margin-top: ${ props => props.$marginTop }px;
+  ` }
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 15px ${ props => props.theme.primary.normal };
+  }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "main": "index.ts"
 }