diff --git a/apps/vite/package.json b/apps/vite/package.json index 7574872f..ce5345f2 100644 --- a/apps/vite/package.json +++ b/apps/vite/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@status-im/components": "*", + "@status-im/icons": "*", "@tamagui/core": "1.0.15", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/apps/vite/src/app.tsx b/apps/vite/src/app.tsx index 7beb72e9..7257d424 100644 --- a/apps/vite/src/app.tsx +++ b/apps/vite/src/app.tsx @@ -5,6 +5,7 @@ import { Code, Heading, Label, + Messages, Paragraph, Shape, Sidebar, @@ -12,11 +13,13 @@ import { import { Stack, TamaguiProvider } from '@tamagui/core' import tamaguiConfig from '../tamagui.config' +import { Topbar } from './components/topbar' type ThemeVars = 'light' | 'dark' function App() { const [theme, setTheme] = useState('light') + const [showMembers, setShowMembers] = useState(false) return ( @@ -30,14 +33,13 @@ function App() {
- - Topbar - -
+ setShowMembers(show => !show)} + /> +
+ + Composer
+ + {showMembers &&
members
}
) diff --git a/apps/vite/src/components/circle.tsx b/apps/vite/src/components/circle.tsx deleted file mode 100644 index 73779503..00000000 --- a/apps/vite/src/components/circle.tsx +++ /dev/null @@ -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 - - // // 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 -}) diff --git a/apps/vite/src/components/topbar.tsx b/apps/vite/src/components/topbar.tsx new file mode 100644 index 00000000..c3bf872b --- /dev/null +++ b/apps/vite/src/components/topbar.tsx @@ -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 ( + + + + # random + + + + + Share random funny stuff with the community. Play nice. + + + + + } + selected={membersVisisble} + onPress={onMembersPress} + /> + } /> + + + ) +} diff --git a/apps/vite/styles/app.css b/apps/vite/styles/app.css index 50e912be..afc3facd 100644 --- a/apps/vite/styles/app.css +++ b/apps/vite/styles/app.css @@ -8,15 +8,18 @@ body, #app { height: 100%; display: grid; - grid-template-columns: 352px 1fr; + grid-template-columns: 352px 1fr auto; } #main { display: grid; grid-template-rows: 56px 1fr 100px; + height: 100vh; } #main, +#sidebar, +#members, #main > div { border: 1px solid rgba(0, 0, 0, 0.1); } @@ -25,3 +28,13 @@ body, overflow: auto; height: 100vh; } + +#content { + overflow: auto; + padding: 8px; +} + +#members { + width: 352px; + color: #000; +}