1import { Row, useExpoTheme, View, Text, Spacer } from 'expo-dev-client-components';
2import * as React from 'react';
3import { Image } from 'react-native';
4import FadeIn from 'react-native-fade-in-image';
5
6import { WebContainerProjectPage_Query } from '../../graphql/types';
7
8type ProjectPageApp = WebContainerProjectPage_Query['app']['byId'];
9
10export function ProjectHeader(props: { app: ProjectPageApp }) {
11  const source = props.app.icon ? props.app.icon.url : props.app.iconUrl;
12
13  const theme = useExpoTheme();
14  return (
15    <View
16      bg="default"
17      padding="medium"
18      style={{
19        borderColor: theme.border.default,
20        borderBottomWidth: 1,
21      }}>
22      <Row align="center">
23        <View overflow="hidden" rounded="medium">
24          <FadeIn>
25            <Image
26              source={source ? { uri: source } : require('../../assets/placeholder-app-icon.png')}
27              style={{
28                width: 48,
29                height: 48,
30              }}
31            />
32          </FadeIn>
33        </View>
34        <Spacer.Horizontal size="small" />
35        <View>
36          <Text size="large" type="InterSemiBold">
37            {props.app.name}
38          </Text>
39          <Text color="secondary" size="small" type="InterRegular">
40            {props.app.slug}
41          </Text>
42        </View>
43      </Row>
44    </View>
45  );
46}
47