spbleadersofdigtal/frontend
1
0
Fork 0
mirror of https://github.com/spbleadersofdigtal/frontend.git synced 2024-11-21 18:06:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

Улучшил презентацию

Browse Source
This commit is contained in:
Pavel Torbeev 2023-08-27 06:54:33 +03:00
parent 7b04b42964
commit 59fae98030
19 changed files with 213 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/deck/getDeck.ts
View File

@ -20,6 +20,7 @@ export type GetDeckResponse = {
data: {
slug: string;
answer: any;
photos?: string[]
}[];
}[];
};

9
src/config.ts
View File

@ -1,3 +1,6 @@
export const API_URL = 'http://192.168.83.181:8000/api';
// export const API_URL = 'http://192.168.22.4:8000/api';
// export const API_URL = 'https://ed68-77-234-219-9.ngrok-free.app/api';
// export const BACKEND_URL = 'http://192.168.83.181:8000';
// export const BACKEND_URL = 'http://192.168.22.4:8000';
// export const BACKEND_URL = 'https://ed68-77-234-219-9.ngrok-free.app';
export const BACKEND_URL = 'http://192.168.83.181';
export const API_URL = BACKEND_URL + '/api';

4
src/pages/chat/ChatPage.tsx
View File

@ -29,8 +29,8 @@ export interface ChatPageProps {
const QUESTION_POLLING_MS = 1000;
const DEFAULT_DECK_ID = 80;
const DEFAULT_QUESTION_ID = 25;
const DEFAULT_DECK_ID = 0;
const DEFAULT_QUESTION_ID = 0;
export const ChatPage: ReactFCC<ChatPageProps> = (props) => {
const {className} = props;

1
src/pages/deck/DeckPage.tsx
View File

@ -14,6 +14,7 @@ import {generateGrowChart} from './document/media/generateGrowChart';
export const DeckPage: ReactFCC = () => {
const deckId = useUrlParam(DECK_PAGE_PARAM, {parser: parseInt});
// todo поставить таумаут искуственно
const { data } = useDeck({
deckId: deckId ?? 0,
config: {

21
src/pages/deck/document/Document.tsx
View File

@ -15,6 +15,7 @@ import {Slide10} from './slides/Slide10';
import {Slide11} from './slides/Slide11';
import {Slide12} from './slides/Slide12';
import {Slide13} from './slides/Slide13';
import {BACKEND_URL} from '../../../config';
Chart.defaults.font.size = 20;
@ -28,18 +29,32 @@ export interface MyDocumentProps {
Font.register({
family: "Roboto",
src: "https://cdnjs.cloudflare.com/ajax/libs/ink/3.1.10/fonts/Roboto/roboto-medium-webfont.ttf"
fonts: [
{ fontWeight: 'medium', src: "https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-medium-webfont.ttf" },
{ fontWeight: 'normal', src: "https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf" },
{ fontWeight: 'light', src: "https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-light-webfont.ttf" },
]
});
Font.register({
family: "Roboto Slab",
fonts: [
{ fontWeight: 'light', src: "https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto_slab/robotoslab-light-webfont.ttf" },
{ fontWeight: 'normal', src: "https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto_slab/robotoslab-regular-webfont.ttf" },
]
});
export const MyDocument: ReactFCC<MyDocumentProps> = (props) => {
const { data, marketChart, financialChart, growChart, onRender } = props;
const images = data.slides[12].data?.find((i) => i.slug === 'images')?.photos;
return (
<Document onRender={onRender}>
<Slide1 title={data.deck.name} description={data.deck.description} data={data.slides[0].data} />
<Slide2 data={data.slides[1].data} />
<Slide3 data={data.slides[2].data} />
<Slide4 data={data.slides[3].data} />
<Slide3 data={data.slides[2].data} image={images?.[0] ? BACKEND_URL + images[0] : undefined} />
<Slide4 data={data.slides[3].data} image={images?.[1] ? BACKEND_URL + images[1] : undefined} />
<Slide5 data={data.slides[4].data} marketChart={marketChart} />
<Slide6 data={data.slides[5].data} />
<Slide7 data={data.slides[6].data} />

26
src/pages/deck/document/shared.ts
View File

@ -1,2 +1,26 @@
export const bgColor = '#EFEEE7';
export const primaryColor = '#2B2C30';
export const primaryColor = '#2B2C30';
export const secondaryColor = '#5e6166';
export const pageFontStyles: any = {
fontFamily: 'Roboto Slab',
fontWeight: 'light',
fontSize: 22
}
export const titleStyles: any = {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase',
fontFamily: 'Roboto',
fontWeight: 'normal',
}
export const subtitleStyles: any = {
fontSize: 24,
width: '100%',
textTransform: 'uppercase',
fontFamily: 'Roboto Slab',
fontWeight: 'normal',
}

21
src/pages/deck/document/slides/Slide1.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, titleStyles} from '../shared';
import format from 'date-fns/format';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
@ -19,7 +19,7 @@ const styles = StyleSheet.create({
backgroundColor: bgColor,
color: primaryColor,
padding: '56px',
fontFamily: 'Roboto'
...pageFontStyles
},
mainBlock: {
flex: '1',
@ -29,8 +29,10 @@ const styles = StyleSheet.create({
alignItems: 'stretch'
},
title: {
...titleStyles,
fontSize: 96,
width: '100%',
fontFamily: 'Roboto Slab',
color: 'black'
},
divider: {
width: '100%',
@ -43,24 +45,23 @@ const styles = StyleSheet.create({
width: '100%',
fontSize: '20px',
},
secondaryBlock: {
//
},
info: {
display: 'flex',
flexDirection: 'column',
rowGap: 4
},
infoText: {
fontFamily: 'Helvetica',
fontFamily: 'Roboto',
fontWeight: 'normal',
fontSize: '14px',
}
});
export const Slide1: ReactFCC<Slide1Props> = (props) => {
const { title, description, data } = props;
const { description, data } = props;
const name = data.find((i) => i.slug === 'names')?.answer as string;
const your_role = data.find((i) => i.slug === 'your_role')?.answer as string;
return (
<Page size="A4" orientation={'landscape'} style={styles.page}>
@ -70,9 +71,9 @@ export const Slide1: ReactFCC<Slide1Props> = (props) => {
<Text style={styles.description}>{description}</Text>
</View>
<View style={styles.secondaryBlock}>
<View>
<View style={styles.info}>
<Text style={styles.infoText}>Henrietta Mitchell, Founder & CEO</Text>
<Text style={styles.infoText}>{your_role}</Text>
<Text style={styles.infoText}>{format(new Date(), 'dd MMM, yyyy')}</Text>
</View>
</View>

14
src/pages/deck/document/slides/Slide10.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
import {currencyFormatter, formatDate} from '../../../../utils/fomat';
@ -16,14 +16,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles,
},
divider: {
width: '100%',
@ -37,8 +34,7 @@ const styles = StyleSheet.create({
marginBottom: 24
},
subtitle: {
width: '100%',
fontSize: '24px',
...subtitleStyles
},
});
@ -56,7 +52,7 @@ export const Slide10: ReactFCC<Slide10Props> = (props) => {
<View style={styles.divider} />
<Text style={styles.subtitle}>Сколько инвестиций необходимо</Text>
<Text style={styles.text}>{currencyFormatter.format(how_much_investments)}</Text>
<Text style={styles.text}>{currencyFormatter.format(how_much_investments)}р.</Text>
<Text style={styles.subtitle}>Цели инвестиций</Text>
<Text style={styles.text}>{investments_sold}</Text>

12
src/pages/deck/document/slides/Slide11.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
@ -16,14 +16,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -37,8 +34,7 @@ const styles = StyleSheet.create({
marginBottom: 24
},
subtitle: {
width: '100%',
fontSize: '24px',
...subtitleStyles
},
image: {
maxWidth: '600px',

15
src/pages/deck/document/slides/Slide12.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
import {formatDate} from '../../../../utils/fomat';
@ -17,14 +17,15 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles,
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
textTransform: 'uppercase',
...titleStyles
},
divider: {
width: '100%',
@ -33,8 +34,8 @@ const styles = StyleSheet.create({
margin: '8px 0 16px'
},
subtitle: {
fontSize: '18px',
marginBottom: '4px',
...subtitleStyles,
marginBottom: '12px',
marginLeft: '-6px'
},
text: {
@ -70,7 +71,7 @@ export const Slide12: ReactFCC<Slide12Props> = (props) => {
return (
<Page size="A4" orientation={'landscape'} style={styles.page}>
<View>
<Text style={styles.title}>Роадмап</Text>
<Text style={styles.title}>План развития</Text>
<View style={styles.divider} />
<View style={styles.map}>

18
src/pages/deck/document/slides/Slide13.tsx
View File

@ -1,9 +1,8 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
import {formatDate} from '../../../../utils/fomat';
import {Fragment} from 'react';
export interface Slide13Props {
@ -17,14 +16,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -38,8 +34,7 @@ const styles = StyleSheet.create({
marginBottom: 24
},
subtitle: {
width: '100%',
fontSize: '24px',
...subtitleStyles,
marginBottom: 24
},
});
@ -55,10 +50,9 @@ export const Slide13: ReactFCC<Slide13Props> = (props) => {
<Text style={styles.title}>Контакты</Text>
<View style={styles.divider} />
{Object.entries(links).map(([name, link], index) => (
{links && Object.entries(links).map(([name, link], index) => (
<Fragment key={index}>
<Text style={styles.subtitle}>{`${name}: ${link}`}</Text>
{/*<Text style={styles.text}>{text as string}</Text>*/}
</Fragment>
))}
</View>

10
src/pages/deck/document/slides/Slide2.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
@ -15,14 +15,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -32,7 +29,6 @@ const styles = StyleSheet.create({
},
text: {
width: '100%',
fontSize: '20px',
},
});

43
src/pages/deck/document/slides/Slide3.tsx
View File

@ -1,13 +1,16 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, pageFontStyles, primaryColor, secondaryColor, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
export interface SlideProps {
data: ExtractArray<GetDeckResponse['slides']>['data'];
image?: string;
}
const percentOffset = 55;
const styles = StyleSheet.create({
page: {
display: 'flex',
@ -15,14 +18,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles,
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles,
},
divider: {
width: '100%',
@ -32,22 +32,37 @@ const styles = StyleSheet.create({
},
text: {
width: '100%',
fontSize: '20px',
},
imageContainer: {
position: 'absolute',
top: 48,
right: 20,
padding: '10px 20px',
border: `1px solid ${secondaryColor}`
},
image: {
width: 300,
height: 300,
objectFit: 'contain'
}
});
export const Slide3: ReactFCC<SlideProps> = (props) => {
const { data } = props;
const { data, image } = props;
const actuality = data.find((i) => i.slug === 'actuality')?.answer as string;
return (
<Page size="A4" orientation={'landscape'} style={styles.page}>
<View>
<Text style={styles.title}>Описание и ценностное предложение стартапа</Text>
<View style={styles.divider} />
<Text style={styles.text}>{actuality}</Text>
</View>
<Text style={{ ...styles.title, width: image ? `${percentOffset}%` : '100%' }}>Описание и ценность</Text>
<View style={{ ...styles.divider, width: image ? `${percentOffset}%` : '100%' }} />
<Text style={{ ...styles.text, width: image ? `${percentOffset}%` : '100%' }}>{actuality}</Text>
{image && (
<View style={styles.imageContainer}>
<Image src={image} style={styles.image} />
</View>
)}
</Page>
)
}

44
src/pages/deck/document/slides/Slide4.tsx
View File

@ -1,13 +1,16 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, pageFontStyles, primaryColor, secondaryColor, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
export interface SlideProps {
data: ExtractArray<GetDeckResponse['slides']>['data'];
image?: string;
}
const percentOffset = 70;
const styles = StyleSheet.create({
page: {
display: 'flex',
@ -15,14 +18,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -35,22 +35,38 @@ const styles = StyleSheet.create({
fontSize: '20px',
marginBottom: 24
},
imageContainer: {
position: 'absolute',
top: 48,
right: 20,
padding: '10px 20px',
border: `1px solid ${secondaryColor}`
},
image: {
width: 200,
height: 200,
objectFit: 'contain'
}
});
export const Slide4: ReactFCC<SlideProps> = (props) => {
const { data } = props;
const { data, image } = props;
const solve = data.find((i) => i.slug === 'solve')?.answer as string;
const works = data.find((i) => i.slug === 'works')?.answer as string;
return (
<Page size="A4" orientation={'landscape'} style={styles.page}>
<View>
<Text style={styles.title}>Решение</Text>
<View style={styles.divider} />
<Text style={styles.text}>{solve}</Text>
<Text style={styles.text}>{works}</Text>
</View>
<Text style={{ ...styles.title, width: image ? `${percentOffset}%` : '100%' }}>Решение</Text>
<View style={{ ...styles.divider, width: image ? `${percentOffset}%` : '100%' }} />
<Text style={{ ...styles.text, width: image ? `${percentOffset}%` : '100%' }}>{solve}</Text>
<Text style={{ ...styles.text, width: image ? `${percentOffset}%` : '100%' }}>{works}</Text>
{image && (
<View style={styles.imageContainer}>
<Image src={image} style={styles.image} />
</View>
)}
</Page>
)
}

9
src/pages/deck/document/slides/Slide5.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
@ -16,14 +16,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles,
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',

12
src/pages/deck/document/slides/Slide6.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
@ -15,14 +15,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles,
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -36,8 +33,7 @@ const styles = StyleSheet.create({
marginBottom: 24
},
subtitle: {
width: '100%',
fontSize: '24px',
...subtitleStyles
},
});

12
src/pages/deck/document/slides/Slide7.tsx
View File

@ -1,6 +1,6 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
@ -15,14 +15,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles,
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -36,8 +33,7 @@ const styles = StyleSheet.create({
marginBottom: 24
},
subtitle: {
width: '100%',
fontSize: '24px',
...subtitleStyles
},
});

18
src/pages/deck/document/slides/Slide8.tsx
View File

@ -1,8 +1,9 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, subtitleStyles, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
import {currencyFormatter} from '../../../../utils/fomat';
export interface Slide8Props {
data: ExtractArray<GetDeckResponse['slides']>['data'];
@ -16,14 +17,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -31,6 +29,9 @@ const styles = StyleSheet.create({
backgroundColor: primaryColor,
margin: '8px 0 16px'
},
subtitle: {
...subtitleStyles
},
text: {
width: '100%',
fontSize: '20px',
@ -55,6 +56,11 @@ export const Slide8: ReactFCC<Slide8Props> = (props) => {
<View>
<Text style={styles.title}>Финансы</Text>
<View style={styles.divider} />
<Text style={styles.subtitle}>Уже получено инвестиций</Text>
<Text style={styles.text}>{currencyFormatter.format(how_much_investments)}р.</Text>
<Text style={styles.subtitle}>Финансовые индикаторы</Text>
<Text style={styles.text}>{financial_indicators}</Text>
<Image style={styles.image} src={financialChart} />
</View>

53
src/pages/deck/document/slides/Slide9.tsx
View File

@ -1,8 +1,9 @@
import {ReactFCC} from '../../../../utils/ReactFCC';
import {Image, Page, StyleSheet, Text, View} from '@react-pdf/renderer';
import {bgColor, primaryColor} from '../shared';
import {bgColor, pageFontStyles, primaryColor, secondaryColor, titleStyles} from '../shared';
import {GetDeckResponse} from '../../../../api/deck/getDeck';
import {ExtractArray} from '../../../../utils/types';
import {BACKEND_URL} from '../../../../config';
export interface Slide9Props {
data: ExtractArray<GetDeckResponse['slides']>['data'];
@ -15,14 +16,11 @@ const styles = StyleSheet.create({
alignItems: 'stretch',
backgroundColor: bgColor,
color: primaryColor,
fontFamily: 'Roboto',
padding: '48px',
...pageFontStyles,
},
title: {
fontSize: 36,
width: '100%',
letterSpacing: 3,
textTransform: 'uppercase'
...titleStyles
},
divider: {
width: '100%',
@ -32,23 +30,54 @@ const styles = StyleSheet.create({
},
text: {
width: '100%',
fontSize: '20px',
marginBottom: 24
fontSize: '16px',
},
map: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 24,
marginTop: 16
},
item: {
display: 'flex',
flexDirection: 'column',
gap: 16,
},
image: {
width: 200,
height: 150,
objectFit: 'cover'
}
});
export const Slide9: ReactFCC<Slide9Props> = (props) => {
const { data } = props;
// const how_much_investments = data.find((i) => i.slug === 'how_much_investments')?.answer as any;
// const users_metrics = data.find((i) => i.slug === 'users_metrics')?.answer as any;
const your_role = data.find((i) => i.slug === 'your_role') as any;
const url = your_role?.photos?.[0];
const your_teammates = data.find((i) => i.slug === 'your_teammates') as any;
return (
<Page size="A4" orientation={'landscape'} style={styles.page}>
<View>
<Text style={styles.title}>Команда</Text>
{/*<View style={styles.divider} />*/}
{/*<Text style={styles.text}>{how_much_investments}</Text>*/}
<View style={styles.divider} />
<View style={styles.map}>
{your_teammates && your_teammates.answer?.map((i: any, index: number) => {
const url = your_teammates?.photos?.[index];
return (
<View style={styles.item} key={index}>
{url && (
<Image style={styles.image} src={BACKEND_URL + url} />
)}
<Text style={styles.text}>{i}</Text>
</View>
)
})}
</View>
</View>
</Page>
)