fix: some details in sidebar and button components

This commit is contained in:
marcelines 2023-01-16 17:21:57 +00:00
parent 0da0a8d368
commit cdeeafafae
No known key found for this signature in database
GPG Key ID: 6A985998CF2BBF07
3 changed files with 36 additions and 30 deletions

View File

@ -30,7 +30,13 @@ function App() {
</div>
<main id="main">
<div>topbar</div>
<Stack
backgroundColor="$background"
justifyContent="center"
alignItems="center"
>
<Paragraph weight="semibold">Topbar</Paragraph>
</Stack>
<div>
<Stack width="100%" height="100%" backgroundColor="$background">
<Stack
@ -54,6 +60,7 @@ function App() {
Theme selected - {theme}{' '}
</Paragraph>
<Button
type="positive"
onPress={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
Toogle theme
@ -62,7 +69,13 @@ function App() {
</Stack>
</Stack>
</div>
<div>composer</div>
<Stack
backgroundColor="$background"
justifyContent="center"
alignItems="center"
>
<Paragraph weight="semibold">Composer</Paragraph>
</Stack>
</main>
</div>
</TamaguiProvider>

View File

@ -1,15 +1,9 @@
import { Stack, styled, Text } from '@tamagui/core'
import { styled, Text } from '@tamagui/core'
import { ButtonFrame } from 'tamagui'
import type { GetProps } from '@tamagui/core'
// import { Button} from 'react-native'
// import { Button as RNButton } from 'react-native'
// setupReactNative({ Button: RNButton })
// import type { GetProps} from '@tamagui/core';
const Base = styled(Stack, {
const Base = styled(ButtonFrame, {
// tag: 'button',
cursor: 'pointer',
@ -17,26 +11,27 @@ const Base = styled(Stack, {
display: 'inline-flex',
paddingHorizontal: 16,
paddingVertical: 10,
animation: 'fast',
variants: {
type: {
primary: {
backgroundColor: 'hsla(229, 71%, 57%, 1)',
hoverStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' },
pressStyle: { backgroundColor: 'hsla(229, 54%, 45%, 1)' },
backgroundColor: '$primary',
hoverStyle: { backgroundColor: '$primaryHover' },
pressStyle: { backgroundColor: '$primaryHover' },
},
positive: {
backgroundColor: 'hsla(174, 63%, 40%, 1)',
hoverStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' },
pressStyle: { backgroundColor: 'hsla(174, 63%, 34%, 1)' },
backgroundColor: '$success',
hoverStyle: { backgroundColor: '$successHover' },
pressStyle: { backgroundColor: '$successHover' },
},
},
} as const,
})
const ButtonText = styled(Text, {
color: 'rgb(255, 255, 255)',
fontFamily: '$inter',
textAlign: 'center',
color: '$white',
})
type BaseProps = GetProps<typeof Base>
@ -49,7 +44,9 @@ interface Props {
const Button = (props: Props) => {
const { type = 'primary', children, onPress } = props
console.log(onPress)
console.log('Button', type)
return (
<Base type={type} onPress={onPress}>
<ButtonText>{children}</ButtonText>
@ -58,4 +55,3 @@ const Button = (props: Props) => {
}
export { Button }
// const Button =

View File

@ -1,12 +1,9 @@
import { Stack, styled, Text } from '@tamagui/core'
import { Stack } from '@tamagui/core'
import { Avatar } from '../avatar'
import { Button } from '../button'
import { Image } from '../image'
const Name = styled(Text, {})
const Desc = styled(Text, {})
import { Heading, Paragraph } from '../typography'
interface Props {
name: string
@ -18,7 +15,7 @@ const _Sidebar = (props: Props) => {
const { name, description, membersCount } = props
return (
<Stack backgroundColor="rgb(255,255,255)">
<Stack backgroundColor="$background" minHeight={'calc(100vh - 2px)'}>
<Image
src="https://images.unsplash.com/photo-1584475784921-d9dbfd9d17ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
width={350}
@ -28,7 +25,7 @@ const _Sidebar = (props: Props) => {
paddingHorizontal={16}
paddingBottom={16}
marginTop={-16}
backgroundColor="rgb(255,255,255)"
backgroundColor="$background"
borderTopLeftRadius={16}
borderTopRightRadius={16}
zIndex={10}
@ -39,9 +36,9 @@ const _Sidebar = (props: Props) => {
size={56}
/>
</Stack>
<Name marginBottom={16}>{name}</Name>
<Desc marginBottom={12}>{description}</Desc>
<Desc marginBottom={12}>{membersCount}</Desc>
<Heading marginBottom={16}>{name}</Heading>
<Paragraph marginBottom={12}>{description}</Paragraph>
<Paragraph marginBottom={12}>{membersCount}</Paragraph>
<Button>Request to join community</Button>
</Stack>
</Stack>