/
consentView.tsx
60 lines (51 loc) · 1.99 KB
/
consentView.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React from 'react';
import styled from '@emotion/styled';
import tw from 'twin.macro';
import { escapeHTML } from '@chaskiq/components/src/utils/htmlSanitize';
export const Wrapper = styled.div`
top: 0px;
z-index: 999999;
position: fixed;
width: 100%;
height: 100vh;
background: white;
//font-size: .92em;
//line-height: 1.5em;
//color: #eee;
`;
export const Padder = tw.div`px-4 py-5 sm:p-6 overflow-auto h-full`;
export const Title = tw.div`text-lg leading-6 font-medium text-gray-900`;
export const TextContent = tw.div`space-y-4 mt-2 max-w-xl text-sm text-gray-800`;
export const ButtonWrapped = tw.div`my-3 text-sm flex justify-between items-center`;
export const Link = tw.a`font-medium text-gray-600 hover:text-gray-500`;
export const Button = tw.button`inline-flex items-center justify-center px-4
py-2 border border-transparent font-medium rounded-md text-green-700 bg-green-100
hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-green-500 sm:text-sm`;
export const ButtonCancel = tw.button`inline-flex items-center justify-center px-4
py-2 border border-transparent font-medium rounded-md text-gray-700 bg-gray-100
hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-gray-500 sm:text-sm`;
export default function GDPRView({ confirm, cancel, i18n, app }) {
return (
<Wrapper>
<Padder>
<Title>{i18n.t('messenger.gdpr_title')}</Title>
<TextContent
dangerouslySetInnerHTML={{
__html: i18n.t('messenger.gdpr', { name: escapeHTML(app.name) }),
}}
></TextContent>
<ButtonWrapped>
<Button onClick={confirm}>{i18n.t('messenger.gdpr_ok')}</Button>
<ButtonCancel onClick={cancel}>
{i18n.t('messenger.gdpr_nok')}
</ButtonCancel>
</ButtonWrapped>
{/* <Link href="#">
View our privacy police here <span aria-hidden="true">→</span>
</Link> */}
</Padder>
</Wrapper>
);
}