@autobusal/common 0.0.33 → 0.0.35

package/BackTo.tsx

@@ -28,7 +28,7 @@ const LinkStyled = styled(Link)`
 const BackTo = ({ to, t }: Props): JSX.Element => (
   <LinkStyled to={ to }>
     <BiChevronLeftCircle />
-    { t('back') }
+    { t('back', { ns: 'common' }) }
   </LinkStyled>
 );
 

package/BlogItem/BlogItem.tsx

@@ -0,0 +1,43 @@
+import { TFunction } from 'i18next';
+import { Trans } from 'react-i18next';
+import { Image, LinkTitle, PostedBy, LinkCategory, TextPreview, LinkMore, TextView } from './styles';
+import { ArticleData } from '@autobusal/providers/types/articles';
+
+interface Props {
+  article: ArticleData
+  type: 'preview' | 'view'
+  t: TFunction<'common'>
+}
+
+const BlogItem = ({ article, type, t }: Props): JSX.Element => (
+  <div className="box">
+    { article.image_url !== null && <Image src={ 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>
+
+    { type === 'preview' && (
+      <TextPreview>
+        { article.stripped } &nbsp;
+        <LinkMore to={ `/blog/article/${ article.internal }` }>{ t('blog_item.read_more', { ns: 'common' }) }</LinkMore>
+      </TextPreview>
+    ) }
+
+    { type === 'view' && <TextView dangerouslySetInnerHTML={{ __html: article.content }} /> }
+  </div>
+);
+
+export default BlogItem;

package/BlogItem/styles.ts

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Image = styled.img`
+  display: block;
+  width: 100%;
+  margin-bottom: 15px;
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const LinkTitle = styled(Link)`
+  font-size: ${ props => props.theme.size.xl };
+  font-weight: 700;
+`;
+
+export const PostedBy = styled.div`
+  padding: 10px 0;
+  color: ${ props => props.theme.font.info };
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const LinkCategory = styled(Link)`
+  color: ${ props => props.theme.font.info };
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const TextPreview = styled.div`
+  font-size: calc(${ props => props.theme.size.s } + 1px);
+`;
+
+export const TextView = styled(TextPreview)`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const LinkMore = styled(Link)`
+  display: inline;
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.info };
+`;

package/ChangeLanguage/ChangeLanguage.tsx

@@ -20,11 +20,7 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
   useOutside(ref, onClose);
 
   const onChange = (language: string): void => {
-    // @todo: sa o fac cand fac in private
     i18n.changeLanguage(language);
-
-    // @todo: sa fac refresh pt limba noua?
-
     onClose();
   };
 

package/index.ts

@@ -1,5 +1,6 @@
 import Autocomplete from './Autocomplete/Autocomplete';
 import BackTo from './BackTo';
+import BlogItem from './BlogItem/BlogItem';
 import Calendar from './Calendar/Calendar';
 import CookieNotification from './CookieNotification/CookieNotification';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
@@ -18,6 +19,7 @@ import RouteItem from './RouteItem/RouteItem';
 export {
   Autocomplete,
   BackTo,
+  BlogItem,
   Button,
   Calendar,
   CookieNotification,

package/package.json

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