add topbar, messages and members to web

This commit is contained in:
Pavel Prichodko 2023-01-18 16:43:23 +01:00
parent ac408f8fbc
commit 39b3d1ca11
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
5 changed files with 69 additions and 51 deletions

View File

@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"@status-im/components": "*", "@status-im/components": "*",
"@status-im/icons": "*",
"@tamagui/core": "1.0.15", "@tamagui/core": "1.0.15",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

View File

@ -5,6 +5,7 @@ import {
Code, Code,
Heading, Heading,
Label, Label,
Messages,
Paragraph, Paragraph,
Shape, Shape,
Sidebar, Sidebar,
@ -12,11 +13,13 @@ import {
import { Stack, TamaguiProvider } from '@tamagui/core' import { Stack, TamaguiProvider } from '@tamagui/core'
import tamaguiConfig from '../tamagui.config' import tamaguiConfig from '../tamagui.config'
import { Topbar } from './components/topbar'
type ThemeVars = 'light' | 'dark' type ThemeVars = 'light' | 'dark'
function App() { function App() {
const [theme, setTheme] = useState<ThemeVars>('light') const [theme, setTheme] = useState<ThemeVars>('light')
const [showMembers, setShowMembers] = useState(false)
return ( return (
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}> <TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
@ -30,14 +33,13 @@ function App() {
</div> </div>
<main id="main"> <main id="main">
<Stack <Topbar
backgroundColor="$background" membersVisisble={showMembers}
justifyContent="center" onMembersPress={() => setShowMembers(show => !show)}
alignItems="center" />
> <div id="content">
<Paragraph weight="semibold">Topbar</Paragraph> <Messages />
</Stack>
<div>
<Stack width="100%" height="100%" backgroundColor="$background"> <Stack width="100%" height="100%" backgroundColor="$background">
<Stack <Stack
flexDirection="column" flexDirection="column"
@ -77,6 +79,8 @@ function App() {
<Paragraph weight="semibold">Composer</Paragraph> <Paragraph weight="semibold">Composer</Paragraph>
</Stack> </Stack>
</main> </main>
{showMembers && <div id="members">members</div>}
</div> </div>
</TamaguiProvider> </TamaguiProvider>
) )

View File

@ -1,42 +0,0 @@
import { Stack, styled } from '@tamagui/core'
export const Circle = styled(Stack, {
// access your tokens and theme values easily with $ props
backgroundColor: 'red',
borderRadius: '100%',
width: 100,
height: 100
// borderRadius: '$4',
// // media and pseudo styles - this would take 15+ lines of brittle JS in RN
// $gtSm: {
// pressStyle: {
// borderRadius: '$6'
// }
// },
// variants: {
// // define variants <Circle pin="top" />
// // these will flatten, even when nesting multiple styled() calls
// pin: {
// top: {
// position: 'absolute',
// top: 0
// }
// },
// size: {
// // functional variants give incredible power and save bundle size
// '...size': (size, { tokens }) => {
// return {
// width: tokens.size[size] ?? size,
// height: tokens.size[size] ?? size
// }
// }
// }
// } as const
})

View File

@ -0,0 +1,42 @@
import { Divider, IconButton, Paragraph } from '@status-im/components'
import { LockedIcon, MembersIcon, OptionsIcon } from '@status-im/icons'
import { Stack } from '@tamagui/core'
type Props = {
membersVisisble: boolean
onMembersPress: () => void
}
export const Topbar = (props: Props) => {
const { membersVisisble, onMembersPress } = props
return (
<Stack
flexDirection="row"
height={56}
alignItems="center"
justifyContent="space-between"
padding={16}
>
<Stack flexDirection="row" alignItems="center">
<Paragraph weight="semibold" marginRight={4}>
# random
</Paragraph>
<LockedIcon color="rgba(27, 39, 61, 0.4)" size={16} />
<Divider height={16} />
<Paragraph weight="medium" color="$neutral-80-opa-50" variant="smaller">
Share random funny stuff with the community. Play nice.
</Paragraph>
</Stack>
<Stack space={12} flexDirection="row">
<IconButton
icon={<MembersIcon />}
selected={membersVisisble}
onPress={onMembersPress}
/>
<IconButton icon={<OptionsIcon />} />
</Stack>
</Stack>
)
}

View File

@ -8,15 +8,18 @@ body,
#app { #app {
height: 100%; height: 100%;
display: grid; display: grid;
grid-template-columns: 352px 1fr; grid-template-columns: 352px 1fr auto;
} }
#main { #main {
display: grid; display: grid;
grid-template-rows: 56px 1fr 100px; grid-template-rows: 56px 1fr 100px;
height: 100vh;
} }
#main, #main,
#sidebar,
#members,
#main > div { #main > div {
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
} }
@ -25,3 +28,13 @@ body,
overflow: auto; overflow: auto;
height: 100vh; height: 100vh;
} }
#content {
overflow: auto;
padding: 8px;
}
#members {
width: 352px;
color: #000;
}