@autobusal/common 0.0.41 → 1.0.0

package/ApiDetails/ApiDetails.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { IoKeySharp } from 'react-icons/io5';
-import { Button, Modal } from '@autobusal/common';
+import { Button, Modal } from '../index';
 import Content from './Content';
 
 interface Props {

package/ApiDetails/Content.tsx

@@ -1,6 +1,8 @@
 import { TFunction } from 'i18next';
-import { Paragraph } from '@autobusal/common';
+import { Paragraph } from '../index';
+import { success } from '@autobusal/utilities';
 import DevPos from './Devpos';
+import { DevPosForm } from './types';
 import { GetSettings, PostSettings } from './services';
 
 interface Props {
@@ -10,11 +12,11 @@ interface Props {
 }
 
 const Content = ({ id, type, t }: Props): JSX.Element => {
-  const { data, isFetching } = GetSettings(id, type);
+  const { data, isLoading } = GetSettings(id, type);
 
   const { mutate: SaveSettings, isPending } = PostSettings(id, type);
 
-  if (isFetching) {
+  if (isLoading) {
     return <Paragraph count={ 3 } />;
   }
 
@@ -24,8 +26,10 @@ const Content = ({ id, type, t }: Props): JSX.Element => {
     );
   }
 
-  const onSave = (data: any) => {
-    SaveSettings(data);
+  const onSave = (data: DevPosForm) => {
+    SaveSettings(data, {
+      onSuccess: () => success(t('api_details.messages.saved'))
+    });
   };
 
   switch (type) {

package/ApiDetails/Devpos.tsx

@@ -1,15 +1,15 @@
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
-import { Button } from '@autobusal/common';
-import { display, validate } from '@autobusal/utilities/form';
-import { ApiDetailsData } from '@modules/Providers/types/users';
+import { Button } from '../index';
+import { Validate, Display } from '@autobusal/utilities';
+import { ApiDetailsData } from '@autobusal/providers/types/users';
 import { DevPosForm } from './types';
 
 interface Props {
   data?: ApiDetailsData
   loading: boolean
   t: TFunction<'common'>
-  onSave: (data: any) => void
+  onSave: (data: DevPosForm) => void
 }
 
 const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
@@ -32,17 +32,17 @@ const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
         <div className="row">
           { t('api_details.devpos.business_code', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.business_code } { ...register('business_code', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.business_code } { ...register('business_code', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.business_code) }
+          { Display(errors.business_code) }
         </div>
 
         <div className="row">
           { t('api_details.devpos.operator_code', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.operator_code } { ...register('operator_code', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.operator_code } { ...register('operator_code', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.operator_code) }
+          { Display(errors.operator_code) }
         </div>
       </div>
 
@@ -50,17 +50,17 @@ const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
         <div className="row">
           { t('api_details.devpos.nuis', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.nuis } { ...register('nuis', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.nuis } { ...register('nuis', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.nuis) }
+          { Display(errors.nuis) }
         </div>
 
         <div className="row">
           { t('api_details.devpos.fiscalization_number', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.fiscalization_number } { ...register('fiscalization_number', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.fiscalization_number } { ...register('fiscalization_number', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.fiscalization_number) }
+          { Display(errors.fiscalization_number) }
         </div>
       </div>
 
@@ -68,43 +68,43 @@ const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
         <div className="row">
           { t('api_details.devpos.username', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.username } { ...register('username', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.username } { ...register('username', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.username) }
+          { Display(errors.username) }
         </div>
 
         <div className="row">
           { t('api_details.devpos.password', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.password } { ...register('password', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.password } { ...register('password', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.password) }
+          { Display(errors.password) }
         </div>
       </div>
 
       <div className="row">
         { t('api_details.devpos.bank_name', { ns: 'common' }) }
 
-        <input type="text" defaultValue={ data?.bank_name } { ...register('bank_name', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+        <input type="text" defaultValue={ data?.bank_name } { ...register('bank_name', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-        { display(errors.bank_name) }
+        { Display(errors.bank_name) }
       </div>
 
       <div className="column">
         <div className="row">
           { t('api_details.devpos.bank_swift', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.bank_swift } { ...register('bank_swift', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.bank_swift } { ...register('bank_swift', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.bank_swift) }
+          { Display(errors.bank_swift) }
         </div>
 
         <div className="row">
           { t('api_details.devpos.bank_account', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.bank_account } { ...register('bank_account', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.bank_account } { ...register('bank_account', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.bank_account) }
+          { Display(errors.bank_account) }
         </div>
       </div>
 
@@ -112,17 +112,17 @@ const DevPos = ({ data, loading, t, onSave }: Props): JSX.Element => {
         <div className="row">
           { t('api_details.devpos.bank_address', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.bank_address } { ...register('bank_address', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.bank_address } { ...register('bank_address', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.bank_address) }
+          { Display(errors.bank_address) }
         </div>
         
         <div className="row">
           { t('api_details.devpos.bank_city', { ns: 'common' }) }
 
-          <input type="text" defaultValue={ data?.bank_city } { ...register('bank_city', validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
+          <input type="text" defaultValue={ data?.bank_city } { ...register('bank_city', Validate('required|min_length:2', t)) } onKeyDown={ onKeyDown } />
 
-          { display(errors.bank_city) }
+          { Display(errors.bank_city) }
         </div>
       </div>
 

package/ApiDetails/services.ts

@@ -1,6 +1,7 @@
 import { useQuery, UseQueryResult, useMutation, UseMutationResult } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
-import { ApiDetailsData } from '@modules/Providers/types/users';
+import { ApiDetailsData } from '@autobusal/providers/types/users';
+import { DevPosForm } from './types';
 
 export const GetSettings = (id: number, type: string): UseQueryResult<ApiDetailsData | string> => (
   useQuery({
@@ -20,10 +21,10 @@ export const GetSettings = (id: number, type: string): UseQueryResult<ApiDetails
   })
 );
 
-export const PostSettings = (id: number, type: string): UseMutationResult<void> => (
+export const PostSettings = (id: number, type: string): UseMutationResult<void, Error, DevPosForm, unknown> => (
   useMutation({
     mutationKey: ['apidetails-update-settings'],
-    mutationFn: async (data: any) => (
+    mutationFn: async (data: DevPosForm) => (
       await apiClient
         .post('/api/api_details/admin/update', {
           ...data,

package/Autocomplete/Autocomplete.tsx

@@ -1,8 +1,8 @@
 import { useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
-import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { useOutside } from '@autobusal/hooks';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 import Suggestions from './Suggestions';
 import { Container } from './styles';
 import { AutocompleteData } from './types';
@@ -97,7 +97,7 @@ const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate
 
       { (show && q.length > 1 && options.length > 0) && <Suggestions options={ options } selected={ selected } onClick={ onSelected } /> }
 
-      <input type="hidden" defaultValue={ value } { ...refs(name, validate(validation, t)) } />
+      <input type="hidden" defaultValue={ value } { ...refs(name, Validate(validation, t)) } />
     </Container>
   );
 }

package/Avatar.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { OperatorData } from '@modules/Providers/types/operators';
-import { AgentData } from '@modules/Providers/types/agents';
+import { OperatorData } from '@autobusal/providers/types/operators';
+import { AgentData } from '@autobusal/providers/types/agents';
 
 interface Props {
   display?: OperatorData | AgentData

package/{BackTo.tsx → Back/BackTo.tsx}

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 import { BiChevronLeftCircle } from 'react-icons/bi';
 
 interface Props {
@@ -26,34 +26,11 @@ const LinkStyled = styled(Link)`
   }
 `;
 
-export const BackTo = ({ to, t }: Props): JSX.Element => (
+const BackTo = ({ to, t }: Props): JSX.Element => (
   <LinkStyled to={ to }>
     <BiChevronLeftCircle />
     { t('back', { ns: 'common' }) }
   </LinkStyled>
 );
 
-interface TitleProps {
-  title: string
-  to: string
-  t: TFunction<'common'>
-}
-
-const ContainerTitle = styled.div`
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  margin-bottom: 20px;
-
-  & > h1 {
-    margin-bottom: 0;
-  }
-`;
-
-export const BackWithTitle = ({ title, to, t }: TitleProps): JSX.Element => (
-  <ContainerTitle>
-    <BackTo to={ to } t={ t } />
-
-    <h1>{ title }</h1>
-  </ContainerTitle>
-);
+export default BackTo;

package/Back/BackWithTitle.tsx

@@ -0,0 +1,30 @@
+import { TFunction } from 'i18next';
+import styled from 'styled-components';
+import BackTo from './BackTo';
+
+interface Props {
+  title: string
+  to: string
+  t: TFunction<'common'>
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  margin-bottom: 20px;
+
+  & > h1 {
+    margin-bottom: 0;
+  }
+`;
+
+const BackWithTitle = ({ title, to, t }: Props): JSX.Element => (
+  <Container>
+    <BackTo to={ to } t={ t } />
+
+    <h1>{ title }</h1>
+  </Container>
+);
+
+export default BackWithTitle;

package/Button/Button.tsx

@@ -13,7 +13,7 @@ interface Props {
   onClick?: any
 }
 
-export const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick }: Props) => (
+const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick }: Props) => (
   <ButtonStyled
     $size={ size }
     type={ loading ? 'button' : type }
@@ -25,4 +25,6 @@ export const Button = ({ type, size, loading, active, subtype, text, noMargin, m
   >
     { loading ? <RiLoader2Fill /> : text }
   </ButtonStyled>
-);
+);
+
+export default Button;

package/Calendar/Calendar.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { TFunction } from 'i18next';
 import { useOutside } from '@autobusal/hooks';
-import { validate, prepareDate } from '@autobusal/utilities';
+import { Validate, prepareDate } from '@autobusal/utilities';
 import Picker from './Picker';
 import { Container } from './styles';
 
@@ -48,7 +48,7 @@ const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: P
         />
       ) }
 
-      <input type="hidden" defaultValue={ prepared } { ...refs(name, validate(validation ?? '', t)) } />
+      <input type="hidden" defaultValue={ prepared } { ...refs(name, Validate(validation ?? '', t)) } />
     </Container>
   );
 }

package/{BrowseCompanyItem/BrowseCompanyItem.tsx → CompanyItem/CompanyItem.tsx}

@@ -7,7 +7,7 @@ interface Props {
   type: 'agent' | 'operator'
 }
 
-const BrowseCompanyItem = ({ item, type }: Props): JSX.Element => {
+const CompanyItem = ({ item, type }: Props): JSX.Element => {
   const isColumn = item.column === 1;
   const isBanner = item.banner === 1;
 
@@ -36,4 +36,4 @@ const BrowseCompanyItem = ({ item, type }: Props): JSX.Element => {
   );
 };
 
-export default BrowseCompanyItem;
+export default CompanyItem;

package/CookieNotification/CookieNotification.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { Button } from '../Button/Button';
+import Button from '../Button/Button';
 import { Container, Info } from './styles';
 
 interface Props {
@@ -18,7 +18,7 @@ const CookieNotification = ({ t }: Props): (JSX.Element | null) => {
     const CookieDate = new Date();
     CookieDate.setFullYear(CookieDate.getFullYear() + 1);
 
-    document.cookie = 'AutobusCookieNotification=viewed; expires=' + CookieDate.toUTCString() + "; path=/; SameSite=None; Secure";
+    document.cookie = 'OBTCookieNotification=viewed; expires=' + CookieDate.toUTCString() + '; path=/; SameSite=None; Secure';
   };
 
   if (! show) {

package/File/File.tsx

@@ -2,9 +2,9 @@ import { TFunction } from 'i18next';
 import { useState, useRef } from 'react';
 import { UseFormRegister } from 'react-hook-form';
 import { HiOutlineCloudUpload, HiCheck } from 'react-icons/hi';
-import { Modal } from '@autobusal/common';
-import { validate } from '@autobusal/utilities';
-import { Button } from '../Button/Button';
+import Modal from '../Modal/Modal';
+import { Validate } from '@autobusal/utilities';
+import Button from '../Button/Button';
 import { Container, ImgView, ImgPreview } from './styles';
 
 interface Props {
@@ -22,7 +22,7 @@ const File = ({ name, value, validation, multiple, t, refs }: Props): JSX.Elemen
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const rules = validate(String(validation), t);
+  const rules = Validate(String(validation), t);
 
   const onChange = (): void => {
     setUploaded(true);

package/IpLogs/IpLogs.tsx

@@ -1,21 +1,21 @@
 import { TFunction } from 'i18next';
 import { useState } from 'react';
 import { AiOutlineLogin } from 'react-icons/ai';
-import { Button } from '@autobusal/common';
+import { Button } from '../index';
 import View from './View';
 import { NotAvailable } from './styles';
 
 interface Props {
   id: number
   page: number
-  type: 'admins' | 'financers' | 'operators' | 'visitors'
+  type: 'admins' | 'agents' | 'financers' | 'operators' | 'visitors'
   t: TFunction<'common'>
 }
 
 const IpLogs = ({ id, page, type, t }: Props): (JSX.Element | string) => {
   const [ show, setShow ] = useState<boolean>(false);
 
-  if (id == 0) {
+  if (id === 0) {
     return (
       <NotAvailable>
         { t('ip_logs.not_available', { ns: 'common' }) }

package/IpLogs/View.tsx

@@ -1,18 +1,17 @@
 import { TFunction } from 'i18next';
-import Table from '@modules/Common/Table/Table';
-import Row from '@modules/Common/Table/Row';
+import { Table, Row } from '../index';
 import { Container } from './styles';
 import { GetLogs } from './services';
 
 interface Props {
   id: number
   page: number
-  type: 'admins' | 'financers'
+  type: 'admins' | 'agents' | 'financers' | 'operators' | 'visitors'
   t: TFunction<'common'>
 }
 
 const View = ({ id, page, type, t }: Props): JSX.Element => {
-  const { data, isFetching } = GetLogs(id, type, page);
+  const { data, isLoading, isFetching } = GetLogs(id, type, page);
 
   const rows = data?.data.map(item => (
     <Row
@@ -38,7 +37,8 @@ const View = ({ id, page, type, t }: Props): JSX.Element => {
         }] }
         rows={ rows }
         pages={ data }
-        loading={ isFetching }
+        loading={ isLoading }
+        fetching={ isFetching }
         t={ t }
       />
     </Container>

package/IpLogs/services.ts

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
-import { LogData } from '@modules/Providers/types/users';
-import { PaginationData } from '@autobusal/common/Pagination/types';
+import { LogData } from '@autobusal/providers/types/users';
+import { PaginationData } from '@autobusal/providers/types/pagination';
 
 export const GetLogs = (id: number, type: string, page: number): UseQueryResult<PaginationData<LogData>> => (
   useQuery({

package/Loading/Loading.tsx

@@ -1,7 +1,7 @@
 import { SpinnerRoundFilled, SpinnerCircularFixed } from 'spinners-react';
-import { useSystemTheme } from '@autobusal/providers';
-import { getRandomNumber } from '@modules/Utilities';
-import { ContainerGeneral, ContainerInline, ContainerParagraph, ItemParagraph } from './styles';
+import { useSystemTheme } from '@autobusal/hooks';
+import Paragraph from './Paragraph';
+import { ContainerGeneral, ContainerInline, ContainerBoxMiddle, ContainerFull } from './styles';
 
 export const General = (): JSX.Element => {
   const theme = useSystemTheme();
@@ -46,39 +46,29 @@ export const Inline = ({ text }: InlineProps): JSX.Element => {
   );
 };
 
-interface ParagraphProps {
-  count?: number
-}
-
-export const Paragraph = ({ count = 3 }: ParagraphProps): JSX.Element => {
-  const items: JSX.Element[] = [];
-
-  const theme = useSystemTheme();
-
-  for (let i = 1; i <= count; i++) {
-    items.push(
-      <ItemParagraph $color={ theme === 'light' ? '#EBEBEB' : '#202020' } $width={ getRandomNumber(60, 100) } />
-    );
-  }
-
-  return (
-    <ContainerParagraph>
-      { items }
-    </ContainerParagraph>
-  );
-};
-
 interface BoxProps {
-  title?: string
   count?: number
 }
 
-export const Box = ({ title, count = 3 }: BoxProps): JSX.Element => (
+export const Box = ({ count = 3 }: BoxProps): JSX.Element => (
   <>
-    <h1>{ title }</h1>
+    <Paragraph isTitle />
 
     <div className="box">
-      {/* <Paragraph count={ count } /> */}
+      <Paragraph count={ count } />
     </div>
   </>
+);
+
+export const BoxMiddle = ({ count = 3 }: BoxProps): JSX.Element => (
+  <ContainerBoxMiddle className="box">
+    <Paragraph isTitle />
+    <Paragraph count={ count } />
+  </ContainerBoxMiddle>
+);
+
+export const GeneralFull = (): JSX.Element => (
+  <ContainerFull>
+    <General />
+  </ContainerFull>
 );

package/Loading/Paragraph.tsx

@@ -0,0 +1,62 @@
+import { useSystemTheme } from '@autobusal/hooks';
+import { getRandomNumber } from '@autobusal/utilities';
+import { ContainerParagraphs, ContainerParagraph, ItemParagraph } from './styles';
+
+interface Props {
+  count?: number
+  isTitle?: boolean
+}
+
+const Paragraph = ({ count = 3, isTitle }: Props): JSX.Element => {
+  const theme = useSystemTheme();
+
+  const color = theme === 'light' ? '#EBEBEB' : '#202020';
+
+  if (isTitle) {
+    return (
+      <h1>
+        <ItemParagraph
+          $color={ color }
+          $width={ 50 }
+          $height={ 27 }
+        />
+      </h1>
+    );
+  }
+
+  const paragraphs = getParagraphs(count, color);
+
+  return (
+    <ContainerParagraphs>
+      { paragraphs }
+    </ContainerParagraphs>
+  );
+};
+
+const getParagraphs = (count: number, color: string): JSX.Element[] => {
+  const paragraphs: JSX.Element[] = [];
+
+  for (let i = 1; i <= count; i++) {
+    const items: JSX.Element[] = [];
+
+    for (let j = 1; j <= 3; j++) {
+      items.push(
+        <ItemParagraph
+          key={ 100 * i + j }
+          $color={ color }
+          $width={ getRandomNumber(60, 100) }
+        />
+      );
+    }
+
+    paragraphs.push(
+      <ContainerParagraph key={ i }>
+        { items }
+      </ContainerParagraph>
+    );
+  }
+
+  return paragraphs;
+};
+
+export default Paragraph;

package/Loading/styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Middle } from '@layouts/Full/styles';
 
 export const ContainerGeneral = styled.div`
   width: 100%;
@@ -17,15 +18,38 @@ export const ContainerInline = styled.div`
   color: ${ props => props.theme.font.faded };
 `;
 
-export const ContainerParagraph = styled.div`
+export const ContainerParagraphs = styled.div`
   display: flex;
-  gap: 5px;
+  gap: 20px;
+  flex-direction: column;
   padding: 15px 0;
 `;
 
-export const ItemParagraph = styled.div<{ $color: string, $width: number }>`
-  flex-basis: ${ props => props.$width };
-  height: 5px;
+export const ContainerParagraph = styled.div`
+  display: flex;
+  gap: 9px;
+  flex-direction: column;
+`;
+
+export const ItemParagraph = styled.div<{
+  $color: string
+  $width: number
+  $height?: number
+}>`
+  width: ${ props => props.$width }%;
+  height: ${ props => props.$height ? props.$height : 11 }px;
   background: ${ props => props.$color };
   border-radius: 5px;
+`;
+
+export const ContainerBoxMiddle = styled(Middle)`
+  & > h1 {
+    margin-bottom: 15px;
+  }
+`;
+
+export const ContainerFull = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
 `;

package/Meta.tsx

@@ -4,7 +4,7 @@ interface Props {
   title: string
   keywords?: string
   description?: string
-  children: JSX.Element | JSX.Element[] | string | null | false | boolean
+  children: any
 }
 
 const Meta = ({ title, keywords, description, children }: Props): JSX.Element => (