@autobusal/common 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Button/styles.ts +3 -3
- package/ChangeLanguage/ChangeLanguage.tsx +51 -0
- package/ChangeLanguage/styles.ts +53 -0
- package/index.ts +2 -0
- package/package.json +2 -1
package/Button/styles.ts
CHANGED
|
@@ -43,11 +43,11 @@ export const ButtonStyled = styled.button<ButtonType>`
|
|
|
43
43
|
` }
|
|
44
44
|
|
|
45
45
|
${ props => props.$subtype === 'secondary' && css`
|
|
46
|
-
background: ${ props => props.theme.
|
|
47
|
-
border: 1px solid ${ props => props.theme.
|
|
46
|
+
background: ${ props => props.theme.primary.neutral };
|
|
47
|
+
border: 1px solid ${ props => props.theme.primary.neutral };
|
|
48
48
|
|
|
49
49
|
&:hover {
|
|
50
|
-
box-shadow: 0 4px 15px ${ props => props.theme.
|
|
50
|
+
box-shadow: 0 4px 15px ${ props => props.theme.primary.neutral } !important;
|
|
51
51
|
}
|
|
52
52
|
` }
|
|
53
53
|
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
import { TFunction, i18n } from 'i18next';
|
|
3
|
+
import { IoGlobeOutline } from 'react-icons/io5';
|
|
4
|
+
import { useOutside } from '@autobusal/hooks';
|
|
5
|
+
import { Container, Title, ContainerButtons, ButtonChange } from './styles';
|
|
6
|
+
import { GetSettings } from '@autobusal/providers/services';
|
|
7
|
+
|
|
8
|
+
interface Props {
|
|
9
|
+
type: 'top' | 'bottom'
|
|
10
|
+
t: TFunction<'public'>
|
|
11
|
+
i18n: i18n
|
|
12
|
+
onClose: () => void
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
|
|
16
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
17
|
+
|
|
18
|
+
const { data } = GetSettings();
|
|
19
|
+
|
|
20
|
+
useOutside(ref, onClose);
|
|
21
|
+
|
|
22
|
+
const onChange = (language: string): void => {
|
|
23
|
+
// @todo: sa o fac cand fac in private
|
|
24
|
+
i18n.changeLanguage(language);
|
|
25
|
+
|
|
26
|
+
// @todo: sa fac refresh pt limba noua?
|
|
27
|
+
|
|
28
|
+
onClose();
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const available = data.preferences.languages.available;
|
|
32
|
+
|
|
33
|
+
const items = available.map(item => (
|
|
34
|
+
<ButtonChange onClick={ () => onChange(item) }>
|
|
35
|
+
<IoGlobeOutline />
|
|
36
|
+
{ `${ t('languages.change', { ns: 'common' }) } ${ t(`languages.${ item }`, { ns: 'common' }) }` }
|
|
37
|
+
</ButtonChange>
|
|
38
|
+
));
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Container ref={ ref } $type={ type } $languages={ available.length }>
|
|
42
|
+
<Title>{ t('languages.title', { ns: 'common' }) }</Title>
|
|
43
|
+
|
|
44
|
+
<ContainerButtons>
|
|
45
|
+
{ items }
|
|
46
|
+
</ContainerButtons>
|
|
47
|
+
</Container>
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export default ChangeLanguage;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const Container = styled.div<{
|
|
4
|
+
$type: 'top' | 'bottom'
|
|
5
|
+
$languages: number
|
|
6
|
+
}>`
|
|
7
|
+
position: absolute;
|
|
8
|
+
bottom: calc((-1 * ${ props => props.$languages } * 27px) - 50px - 8px);
|
|
9
|
+
left: 0;
|
|
10
|
+
z-index: 101;
|
|
11
|
+
width: 200px;
|
|
12
|
+
padding: 10px;
|
|
13
|
+
background-color: ${ props => props.theme.background.normal };
|
|
14
|
+
box-shadow: ${ props => props.theme.boxShadow };
|
|
15
|
+
border-radius: ${ props => props.theme.borderRadius };
|
|
16
|
+
|
|
17
|
+
// // // @todo: de verificat in private
|
|
18
|
+
// // ${ props => props.$type === 'bottom' && css`
|
|
19
|
+
// // // top: auto;
|
|
20
|
+
// // // bottom: 30px;
|
|
21
|
+
// // ` }
|
|
22
|
+
`;
|
|
23
|
+
|
|
24
|
+
export const Title = styled.h5`
|
|
25
|
+
text-align: center;
|
|
26
|
+
font-size: ${ props => props.theme.size.s };
|
|
27
|
+
margin-bottom: 10px;
|
|
28
|
+
`;
|
|
29
|
+
|
|
30
|
+
export const ContainerButtons = styled.div`
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: 5px;
|
|
34
|
+
`;
|
|
35
|
+
|
|
36
|
+
export const ButtonChange = styled.button`
|
|
37
|
+
display: flex;
|
|
38
|
+
padding: 5px 10px;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
gap: 8px;
|
|
42
|
+
font-size: ${ props => props.theme.size.xs };
|
|
43
|
+
border-radius: ${ props => props.theme.borderRadius };
|
|
44
|
+
transition: all 0.3s ease;
|
|
45
|
+
|
|
46
|
+
> svg {
|
|
47
|
+
color: ${ props => props.theme.primary.normal };
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:hover {
|
|
51
|
+
background-color: ${ props => props.theme.primary.neutral };
|
|
52
|
+
}
|
|
53
|
+
}`;
|
package/index.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import CookieNotification from './CookieNotification/CookieNotification';
|
|
2
|
+
import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
|
|
2
3
|
import { Button } from './Button/Button';
|
|
3
4
|
import Meta from './Meta';
|
|
4
5
|
|
|
5
6
|
export {
|
|
6
7
|
Button,
|
|
7
8
|
CookieNotification,
|
|
9
|
+
ChangeLanguage,
|
|
8
10
|
Meta
|
|
9
11
|
};
|
package/package.json
CHANGED