fix reactions

This commit is contained in:
Pavel Prichodko 2023-01-23 15:42:47 +01:00
parent 07168dc47c
commit 447670bc92
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 19 additions and 10 deletions

View File

@ -90,7 +90,7 @@ const ButtonText = styled(Paragraph, {
type BaseProps = GetProps<typeof Base> type BaseProps = GetProps<typeof Base>
type Props = BaseProps & { type Props = BaseProps & {
children: string children?: string
icon?: React.ReactNode icon?: React.ReactNode
type?: BaseProps['type'] type?: BaseProps['type']
size?: BaseProps['size'] size?: BaseProps['size']

View File

@ -2,7 +2,7 @@ import { cloneElement } from 'react'
import { AddReactionIcon } from '@status-im/icons/20' import { AddReactionIcon } from '@status-im/icons/20'
import { import {
AngryIcon, // AngryIcon,
LaughIcon, LaughIcon,
LoveIcon, LoveIcon,
SadIcon, SadIcon,
@ -51,27 +51,35 @@ const ReactButton = styled(Stack, {
} as const, } as const,
}) })
interface Props { type ReactionButtonProps = {
icon: React.ReactElement icon: React.ReactElement
count: number count?: number
selected?: boolean selected?: boolean
} }
const ReactionButton = (props: Props) => { const ReactionButton = (props: ReactionButtonProps) => {
const { count, selected, icon } = props const { count, selected, icon } = props
return ( return (
<ReactButton selected={selected}> <ReactButton selected={selected}>
{cloneElement(icon, { color: '$neutral-100' })} {cloneElement(icon, { color: '$neutral-100' })}
<Paragraph weight="medium" variant="smaller" whiteSpace="nowrap"> {count && (
{count} <Paragraph weight="medium" variant="smaller" whiteSpace="nowrap">
</Paragraph> {count}
</Paragraph>
)}
</ReactButton> </ReactButton>
) )
} }
type Props = {
reactions?: any[]
}
export const Reactions = (props: Props) => { export const Reactions = (props: Props) => {
const {} = props const { reactions } = props
console.log(reactions)
return ( return (
<XStack space={8}> <XStack space={8}>
@ -80,7 +88,8 @@ export const Reactions = (props: Props) => {
<ReactionButton count={99} icon={<ThumbsDownIcon />} /> <ReactionButton count={99} icon={<ThumbsDownIcon />} />
<ReactionButton count={100} icon={<LaughIcon />} /> <ReactionButton count={100} icon={<LaughIcon />} />
<ReactionButton count={100} icon={<SadIcon />} /> <ReactionButton count={100} icon={<SadIcon />} />
<ReactionButton count={100} icon={<AngryIcon />} /> {/* FIX TAMAGUI BUG */}
{/* <ReactionButton count={100} icon={<AngryIcon />} /> */}
<ReactionButton icon={<AddReactionIcon />} /> <ReactionButton icon={<AddReactionIcon />} />
</XStack> </XStack>
) )