89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
|
/* eslint-disable import/namespace */
|
|
import 'expo-dev-client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
import {
|
|
Code,
|
|
Heading,
|
|
Image,
|
|
Label,
|
|
Paragraph,
|
|
Shape,
|
|
Sidebar,
|
|
} from '@status-im/components'
|
|
import { Stack, TamaguiProvider } from '@tamagui/core'
|
|
import { useFonts } from 'expo-font'
|
|
import { SafeAreaView, TouchableOpacity } from 'react-native'
|
|
|
|
import tamaguiConfig from './tamagui.config'
|
|
|
|
type ThemeVars = 'light' | 'dark'
|
|
|
|
export default function App() {
|
|
const [theme, setTheme] = useState<ThemeVars>('light')
|
|
const [loaded] = useFonts({
|
|
Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
|
|
InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
|
|
// Tamagui does this for you on web, but you need to do it manually on native. Only for the demo. We should seek a better solution.
|
|
UbuntuMono: require('./assets/fonts/UbuntuMono.ttf'),
|
|
})
|
|
|
|
if (!loaded) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
|
|
<SafeAreaView>
|
|
<Image
|
|
source={{
|
|
uri: 'https://images.unsplash.com/photo-1673537074513-e66435b69012?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
|
|
height: 200,
|
|
width: '100%',
|
|
}}
|
|
/>
|
|
<Sidebar
|
|
name="Rarible"
|
|
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
|
membersCount={123}
|
|
/>
|
|
<Stack
|
|
flexDirection="column"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
marginTop={20}
|
|
height="100%"
|
|
width="100%"
|
|
backgroundColor="$background"
|
|
>
|
|
<Heading weight="semibold" marginBottom={12}>
|
|
Communities
|
|
</Heading>
|
|
<Heading heading="h2" marginBottom={12}>
|
|
This is an Heading 2
|
|
</Heading>
|
|
<Paragraph weight="semibold" marginBottom={12} uppercase>
|
|
Paragraph uppercased and bolded
|
|
</Paragraph>
|
|
<Paragraph marginBottom={12} uppercase>
|
|
This is a paragraph
|
|
</Paragraph>
|
|
<Label marginBottom={12}>This is a label</Label>
|
|
<Code marginBottom={12}>This is a code line</Code>
|
|
<Paragraph fontWeight="400">0x213abc190 ... 121ah4a9e</Paragraph>
|
|
<Shape marginVertical={20} />
|
|
|
|
<Paragraph>Theme selected - {theme}</Paragraph>
|
|
<TouchableOpacity
|
|
onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
>
|
|
<Paragraph>Toogle theme</Paragraph>
|
|
</TouchableOpacity>
|
|
</Stack>
|
|
</SafeAreaView>
|
|
</TamaguiProvider>
|
|
)
|
|
}
|