fix: some details in sidebar and button components
This commit is contained in:
marcelines
parent
0da0a8d368
commit
cdeeafafae
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue