@autobusal/common 1.2.1 → 1.3.1

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/ChangeLanguage/ChangeLanguage.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { TFunction, i18n } from 'i18next';
-import { IoGlobeOutline } from 'react-icons/io5';
 import { useOutside } from '@autobusal/hooks';
+import Flag from './Flag';
 import { Container, Title, ContainerButtons, ButtonChange } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
@@ -28,7 +28,7 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
 
   const items = available.map((item, index) => (
     <ButtonChange key={ index } onClick={ () => onChange(item) }>
-      <IoGlobeOutline />
+      <Flag language={ item } size={ 22 } />
       { `${ t('languages.change', { ns: 'common' }) } ${ t(`languages.${ item }`, { ns: 'common' }) }` }
     </ButtonChange>
   ));

package/ChangeLanguage/Flag.tsx

@@ -0,0 +1,12 @@
+import { ContainerFlag } from './styles';
+
+interface Props {
+  language: string
+  size: number
+}
+
+const Flag = ({ language, size }: Props): JSX.Element => (
+  <ContainerFlag $size={ size } src={ `${ import.meta.env.VITE_API_OBT }/languages/${ language }.svg` } />
+);
+
+export default Flag;

package/ChangeLanguage/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div<{
   $type: 'top' | 'bottom'
@@ -12,6 +12,11 @@ export const Container = styled.div<{
   background-color: ${ props => props.theme.background.normal };
   box-shadow: ${ props => props.theme.boxShadow };
   border-radius: ${ props => props.theme.borderRadius };
+
+  ${ props => props.$type === 'bottom' && css`
+    right: 10px;
+    bottom: 50px; 
+  ` }
 `;
 
 export const Title = styled.h5`
@@ -23,7 +28,13 @@ export const Title = styled.h5`
 export const ContainerButtons = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 6px;
+`;
+
+export const ContainerFlag = styled.img<{ $size: number }>`
+  display: block;
+  width: ${ props => props.$size }px;
+  border-radius: 4px;
 `;
 
 export const ButtonChange = styled.button`
@@ -33,13 +44,10 @@ export const ButtonChange = styled.button`
   justify-content: center;
   gap: 8px;
   font-size: ${ props => props.theme.size.xs };
+  background: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
   transition: all 0.3s ease;
 
-  > svg {
-    color: ${ props => props.theme.primary.normal };
-  }
-
   &:hover {
     background-color: ${ props => props.theme.primary.neutral };
   }

package/package.json

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