remove hard-coded emojis
This commit is contained in:
Pavel Prichodko
parent
e0ece0a193
commit
4e19d4650c
|
|
@ -1,4 +1,4 @@
|
|||
import { Basketball, Collaboration, Play, Unicorn } from '../emoji'
|
||||
import { CHANNEL_GROUPS } from '../sidebar/mock-data'
|
||||
import { Accordion } from './accordion'
|
||||
import { AccordionItem } from './accordionItem'
|
||||
|
||||
|
|
@ -27,47 +27,12 @@ export const Default: Story = {
|
|||
<>
|
||||
<AccordionItem
|
||||
key="welcome"
|
||||
icon={<Unicorn hasBackground />}
|
||||
title={'# welcome'}
|
||||
channelStatus="withMessages"
|
||||
numberOfMessages={1}
|
||||
isSelected
|
||||
onPress={() => {
|
||||
// do nothing
|
||||
}}
|
||||
/>
|
||||
<AccordionItem
|
||||
key="general"
|
||||
icon={<Basketball hasBackground />}
|
||||
title={'# general'}
|
||||
channelStatus="withMentions"
|
||||
numberOfMessages={2}
|
||||
onPress={() => {
|
||||
// do nothing
|
||||
}}
|
||||
mb={8}
|
||||
/>
|
||||
<AccordionItem
|
||||
key="lounge"
|
||||
icon={<Collaboration hasBackground />}
|
||||
title={'# lounge'}
|
||||
numberOfMessages={0}
|
||||
onPress={() => {
|
||||
// do nothing
|
||||
}}
|
||||
mb={8}
|
||||
/>
|
||||
<AccordionItem
|
||||
key="random"
|
||||
icon={<Play hasBackground />}
|
||||
title={'# random'}
|
||||
channelStatus="muted"
|
||||
numberOfMessages={0}
|
||||
onPress={() => {
|
||||
// do nothing
|
||||
}}
|
||||
mb={8}
|
||||
channel={CHANNEL_GROUPS[0].channels[0]}
|
||||
/>
|
||||
<AccordionItem key="general" channel={CHANNEL_GROUPS[0].channels[0]} />
|
||||
<AccordionItem key="lounge" channel={CHANNEL_GROUPS[0].channels[0]} />
|
||||
<AccordionItem key="random" channel={CHANNEL_GROUPS[0].channels[0]} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,18 +3,14 @@ import { Stack } from '@tamagui/core'
|
|||
|
||||
import { Label, Paragraph } from '../typography'
|
||||
|
||||
import type { GetProps } from '@tamagui/core'
|
||||
|
||||
type BaseProps = GetProps<typeof Stack>
|
||||
import type { Channel } from '../sidebar/mock-data'
|
||||
|
||||
type Props = {
|
||||
isSelected?: boolean
|
||||
onToggle?: () => void
|
||||
title: string
|
||||
channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions'
|
||||
icon?: React.ReactNode
|
||||
numberOfMessages?: number
|
||||
} & BaseProps
|
||||
onPress?: () => void
|
||||
channel: Channel
|
||||
mb?: number
|
||||
}
|
||||
|
||||
const textColor = {
|
||||
muted: '$neutral-40',
|
||||
|
|
@ -23,17 +19,12 @@ const textColor = {
|
|||
withMentions: '$neutral-100',
|
||||
}
|
||||
|
||||
const AccordionItem = ({
|
||||
icon,
|
||||
isSelected,
|
||||
title,
|
||||
channelStatus = 'normal',
|
||||
numberOfMessages,
|
||||
...rest
|
||||
}: Props) => {
|
||||
const AccordionItem = (props: Props) => {
|
||||
const { channel, isSelected, onPress, mb } = props
|
||||
const { emoji, title, channelStatus = 'normal', numberOfMessages } = channel
|
||||
|
||||
return (
|
||||
<Stack
|
||||
{...rest}
|
||||
accessibilityRole="button"
|
||||
animation={[
|
||||
'fast',
|
||||
|
|
@ -59,17 +50,30 @@ const AccordionItem = ({
|
|||
alignItems="center"
|
||||
flexDirection="row"
|
||||
cursor="pointer"
|
||||
onPress={onPress}
|
||||
mb={mb}
|
||||
>
|
||||
<Stack
|
||||
justifyContent="flex-start"
|
||||
alignItems="center"
|
||||
flexDirection="row"
|
||||
>
|
||||
{icon && <>{icon}</>}
|
||||
{emoji && (
|
||||
<Stack
|
||||
width={24}
|
||||
height={24}
|
||||
borderRadius={24 / 2}
|
||||
backgroundColor="$turquoise-50-opa-10"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{emoji}
|
||||
</Stack>
|
||||
)}
|
||||
<Paragraph
|
||||
color={textColor[channelStatus]}
|
||||
weight="medium"
|
||||
marginLeft={icon ? 8 : 0}
|
||||
marginLeft={emoji ? 8 : 0}
|
||||
>
|
||||
{title}
|
||||
</Paragraph>
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import type { SizeTokens, StyleObject } from '@tamagui/core'
|
||||
import type { SvgProps } from 'react-native-svg'
|
||||
|
||||
export type EmojiProps = SvgProps & {
|
||||
size?: number | SizeTokens
|
||||
style?: StyleObject
|
||||
sizeBackground?: number
|
||||
hasBackground?: boolean
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import { Defs, Image, Path, Pattern, Svg, Use } from 'react-native-svg'
|
||||
|
||||
import { themed } from '../themed'
|
||||
|
||||
import type { EmojiProps } from '../EmojiProps'
|
||||
|
||||
const Emoji = (props: EmojiProps) => {
|
||||
const { size = 16, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<Path fill="url(#basketball-a)" d="M1.333 1.333h13.333v13.333H1.333z" />
|
||||
|
||||
<Defs>
|
||||
<Pattern
|
||||
id="basketball-a"
|
||||
patternContentUnits="objectBoundingBox"
|
||||
width="1"
|
||||
height="1"
|
||||
>
|
||||
<Use xlinkHref="#basketball-b" transform="scale(.01389)" />
|
||||
</Pattern>
|
||||
<Image
|
||||
id="basketball-b"
|
||||
width="72"
|
||||
height="72"
|
||||
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAY1BMVEVHcEz0kAz0kAz0kAz0kAz0kAz0kAwjHyD0kAz0kAz0kAz0kAz0kAz0kAz0kAzKeRAjHyCMWBZKNBzniQ0jHyDagg9kQhqmZhQwJh9xSRnNexCzbRI9LR5+UBeZXxXAdBFXOxt8YctEAAAAFXRSTlMAIGCPv9///1Cf70CvgM+fn////4DoPY5GAAAB20lEQVR4AdzSh46yQBQFYGlnYMACSBGxvP9T/t6JhuDxv4wbkk32pAP5uG2jJAijOAHMI0ASR2Gw+UHSLIHkBbkkWfqdEkQWAEESG/nXlRcACJpS5H7VZIAOAZlHVVuLZQh2u1TODliGJDu1qNTCF4JNlbYABaL8t709voOw/+wcTPkdVJrDZ8eYqvaH6sqYT9LRGJIUSBzJkfbVtCwRRE7bvO0usEDXy6uTH3SSp30H2Pk9uTscnHT2gc7OGdxl8gGhk9djvQzVozzs6JykMZeLvC+XoVKeXSCZNZfN/tTXS1DdzyrPXk4OydRcp0P8Vf6ECkyRkqolqJKCMKV4Toi6b3SooUkGDoroo6sOXelnkYMsld3qUEvtW3FS3myvQz3fSOp2P8vNPDJo0CAPbphFLiABL6nToI7XiMTtjHdbalDJFyJ7CwHQKFsNog8koSyfp33XoDvPWg4gBkBXMmrQSJcGIHaz5rVpEC/NTRvrQFgPMivlL0O391x/eWvrHeS/VuygAAAABkFgEPv39GUCL8QcwE5EHa2bETZsbGrR+Mt3RB4ke9kMIhTWMNBS6OdhdHicA48BsDOFUFKjNEuJn1RRL8de111AcEnDRRaYfVyIAmkMxDqQDwumcHXpGt5TKwAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</Defs>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
Emoji.displayName = 'Basketball'
|
||||
|
||||
export const Basketball = memo<EmojiProps>(themed(Emoji))
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import { Path, Svg } from 'react-native-svg'
|
||||
|
||||
import { themed } from '../themed'
|
||||
|
||||
import type { EmojiProps } from '../EmojiProps'
|
||||
|
||||
const Emoji = (props: EmojiProps) => {
|
||||
const { size = 16, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<Path
|
||||
d="M7.145 13.135a1.054 1.054 0 0 0 1.493-.27.383.383 0 0 0-.091-.527l-.859-.925 1.96 1.402a.689.689 0 0 0 .52.118.688.688 0 0 0 .45-.293.72.72 0 0 0-.172-.991L8.777 10.08l2.495 1.785a.687.687 0 0 0 1.08-.429.724.724 0 0 0-.282-.737L9.858 8.768l2.722 1.947a.689.689 0 0 0 .774.018.703.703 0 0 0 .305-.447.726.726 0 0 0-.28-.736L1.716 4.059.107 6.677a.7.7 0 0 0 .129.897l3.614 3.164c.164.144.336.28.514.408l2.781 1.99Z"
|
||||
fill="#EF9645"
|
||||
/>
|
||||
<Path
|
||||
d="M13.353 9.066 8.107 5.2l-.027-.038.024-.037.025-.026.396.223c.445.294 1.46.728 2.23.728.528 0 .843-.201.938-.596a.68.68 0 0 0-.112-.497.652.652 0 0 0-.423-.272 3.111 3.111 0 0 1-1.3-.518L9.6 3.99c-.29-.2-.618-.425-.86-.572a1.85 1.85 0 0 0-1.004-.277c-.555 0-1.119.2-1.664.394l-.588.206c-.253.088-.52.131-.787.129-.716 0-1.418-.278-2.096-.546l-.068-.028a.632.632 0 0 0-.435-.01.647.647 0 0 0-.342.276l-1.61 2.62a.655.655 0 0 0 .12.834l3.613 3.165c.164.143.335.279.51.404l2.862 2.047a.919.919 0 0 0 .694.157.917.917 0 0 0 .6-.39.388.388 0 0 0-.091-.529l-.851-.608a.2.2 0 0 1-.082-.138.206.206 0 0 1 .044-.155.193.193 0 0 1 .263-.036l1.847 1.321a.639.639 0 0 0 .905-.163.676.676 0 0 0-.16-.925L8.692 9.93a.2.2 0 0 1-.082-.138.205.205 0 0 1 .044-.155.195.195 0 0 1 .263-.036l2.382 1.704a.644.644 0 0 0 .722.017.658.658 0 0 0 .285-.417.678.678 0 0 0-.262-.688l-2.26-1.615a.197.197 0 0 1-.082-.138.203.203 0 0 1 .045-.156.172.172 0 0 1 .235-.031l2.625 1.878a.645.645 0 0 0 .486.11.642.642 0 0 0 .42-.274.673.673 0 0 0-.16-.925Z"
|
||||
fill="#FFDC5D"
|
||||
/>
|
||||
<Path
|
||||
d="M7.195 11.996a.716.716 0 0 1-.18.323l-.466.472a.69.69 0 0 1-.668.188.693.693 0 0 1-.314-.182.715.715 0 0 1-.183-.689.715.715 0 0 1 .18-.32l.466-.473a.69.69 0 0 1 .667-.187.7.7 0 0 1 .425.329c.093.162.12.356.073.54ZM2.301 9.662l.698-.71a.714.714 0 0 0 .192-.631.719.719 0 0 0-.398-.521.68.68 0 0 0-.778.147l-.697.71a.714.714 0 0 0-.193.631.719.719 0 0 0 .4.521.68.68 0 0 0 .776-.147Zm2.415.025a.711.711 0 0 0 .221-.508.725.725 0 0 0-.204-.516.695.695 0 0 0-.505-.208.684.684 0 0 0-.496.227l-1.394 1.422a.711.711 0 0 0-.22.508.725.725 0 0 0 .203.516.695.695 0 0 0 .505.207.684.684 0 0 0 .497-.226l1.393-1.422Zm1.045 1.423a.716.716 0 0 0 .16-.75.71.71 0 0 0-.233-.32.687.687 0 0 0-.66-.1.69.69 0 0 0-.25.167l-.93.946a.716.716 0 0 0-.162.75.71.71 0 0 0 .234.32.683.683 0 0 0 .91-.067l.93-.946Zm7.684-1.963.291-.257-3.209-5.146-5.695.942a.69.69 0 0 0-.454.29.722.722 0 0 0-.12.534c.306 1.278 2.787.328 3.879-.285l5.308 3.922Z"
|
||||
fill="#EF9645"
|
||||
/>
|
||||
<Path
|
||||
d="M7.195 11.522a.716.716 0 0 1-.18.323l-.466.472a.69.69 0 0 1-.668.188.692.692 0 0 1-.314-.183.715.715 0 0 1-.183-.688.716.716 0 0 1 .18-.32l.466-.473a.69.69 0 0 1 .667-.188.7.7 0 0 1 .425.33c.093.162.12.356.073.539ZM2.301 9.188l.698-.71a.714.714 0 0 0 .192-.632.719.719 0 0 0-.398-.52.681.681 0 0 0-.778.147l-.697.71a.715.715 0 0 0-.193.631.719.719 0 0 0 .4.52.68.68 0 0 0 .776-.146Zm2.415.024a.711.711 0 0 0 .221-.508.725.725 0 0 0-.204-.515.695.695 0 0 0-.505-.208.684.684 0 0 0-.496.227L2.338 9.63a.711.711 0 0 0-.22.508.725.725 0 0 0 .203.515.695.695 0 0 0 .505.208.682.682 0 0 0 .497-.227l1.393-1.422Zm1.045 1.423a.716.716 0 0 0 .16-.75.71.71 0 0 0-.233-.32.688.688 0 0 0-.66-.099.69.69 0 0 0-.25.166l-.93.946a.716.716 0 0 0-.162.75.71.71 0 0 0 .234.321.683.683 0 0 0 .91-.067l.93-.947ZM15.767 7.1a.7.7 0 0 0 .125-.894l-.002-.002-1.609-3.093a.693.693 0 0 0-.366-.295.677.677 0 0 0-.467.01c-.924.366-1.937.786-2.92.444l-.51-.178c-.904-.32-1.887-.696-2.785-.14-.322.194-.807.538-1.119.75a3.15 3.15 0 0 1-1.282.51.688.688 0 0 0-.454.29.72.72 0 0 0-.12.534c.285 1.191 2.46.43 3.639-.175a.441.441 0 0 1 .465.038l5.377 3.992 2.028-1.791Z"
|
||||
fill="#FFCC4D"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
Emoji.displayName = 'Collaboration'
|
||||
|
||||
export const Collaboration = memo<EmojiProps>(themed(Emoji))
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import { Defs, Image, Path, Pattern, Svg, Use } from 'react-native-svg'
|
||||
|
||||
import { themed } from '../themed'
|
||||
|
||||
import type { EmojiProps } from '../EmojiProps'
|
||||
|
||||
const Emoji = (props: EmojiProps) => {
|
||||
const { size = 16, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<Path fill="url(#fire-a)" d="M1.333 1.333h13.333v13.333H1.333z" />
|
||||
<Defs>
|
||||
<Pattern
|
||||
id="fire-a"
|
||||
patternContentUnits="objectBoundingBox"
|
||||
width="1"
|
||||
height="1"
|
||||
>
|
||||
<Use xlinkHref="#fire-b" transform="scale(.01389)" />
|
||||
</Pattern>
|
||||
<Image
|
||||
id="fire-b"
|
||||
width="72"
|
||||
height="72"
|
||||
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAh1BMVEVHcEz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz0kAz/zE3/zE3/zE3/zE3/zE3/zE3/zE3/zE39wkL/zE3/zE3/zE3/zE30kAz/zE36ri33nxz+yEn+xUX5qij8vT32mxj9wUH3oyD1mBT6sjH1lBD7tjX8uTmQeifTAAAAHXRSTlMAMEBQv++PEM+A359gryBwzxDvv4CPUK9gIN9gMOUtXcUAAAKrSURBVHjarZfZkoIwEEWDLEkAcXfWDpu78//fN4OMqdAkJFCeJy3LI919OwJxJAtm5DUkENGXiGYAof8SUwwAERkPxV+K4I+AjvawoFdbAxtrYpAQBDiacB1c06SG+RiPBxpRAC2cuDMHgMQkgszZkz2a0W/bP4GzaAENuKsg8dwra0hJBx8kiXuIG2K8bJLQVaQbjwcKM3cRLo7KVlsTEGX9ti56Hnso/Vg3H5bSRsNDkFgCkIUJEklXwAATm0UBcPWNDaMn7UwimiyicUfkTxZxtIoxaLEnMkQ/YqstMHUIb6I/UcRw7Gegw7q1nkyxq2jR/b7X6UjiXBpeWj9SK4OQujcbzZz9h6i30jSEQRg+B2mnjtBzXZE5Pgd9mcbW1JbuMbDA8aw4/n3GOceao21oi2euLBdwqvLb4NDiZ9NgmFqIMscinDkX0VH8cToaSwtcRVA2pvJs2JCFDFYGFg7iQXtNOLteKEUULNxbUXlBlyQ9rqXlouWgFkcf18ABJohEAQoB5/MQpokOYEQfSJS/H/HkMrzFAW5uAR0qKaqHj14OHa7ijAIp+RneYh9UzkLkaPqSExjwSS9IlxI19SgUwMB/QBnu7E1p/Ela0Aeo1+iELkRDjj2aJBXK6+iZc+NeFYoHieqD5i6XqRfUUNa3pu93gcjV4Rb9/4JUM6GqFH2uarrumlvNUB49w1Sdc1Nza8JlZRZqNRRF/z+FxnI9nUy10rGYEoVUzsxGlefXSj0NUs0zVCVGUelulbKm32IkTaczgvCniXzSI5oiioiG+XjR3PCoP1ZkenSny3GeJSUGVm9jPG8rYmbn7tmRQfZrN816Tyx8bFw8mw9i5/3Tpvl8J06stuvBqraUOPO1NM78i4zje7fUWHbfZAKr/XazlI7Ndj8UnF+YwEpCshNBaAAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</Defs>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
Emoji.displayName = 'Fire'
|
||||
|
||||
export const Fire = memo<EmojiProps>(themed(Emoji))
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import {
|
||||
ClipPath,
|
||||
Defs,
|
||||
G,
|
||||
Image,
|
||||
Path,
|
||||
Pattern,
|
||||
Svg,
|
||||
Use,
|
||||
} from 'react-native-svg'
|
||||
|
||||
import { themed } from '../themed'
|
||||
|
||||
import type { EmojiProps } from '../EmojiProps'
|
||||
|
||||
const Emoji = (props: EmojiProps) => {
|
||||
const { size = 16, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<G clipPath="url(#peach-a)">
|
||||
<Path fill="url(#peach-b)" d="M.667.667h14.667v14.667H.667z" />
|
||||
</G>
|
||||
<Defs>
|
||||
<ClipPath id="peach-a">
|
||||
<Path fill="#fff" d="M0 0h16v16H0z" />
|
||||
</ClipPath>
|
||||
<Pattern
|
||||
id="peach-b"
|
||||
patternContentUnits="objectBoundingBox"
|
||||
width="1"
|
||||
height="1"
|
||||
>
|
||||
<Use xlinkHref="#peach-c" transform="scale(.01389)" />
|
||||
</Pattern>
|
||||
<Image
|
||||
id="peach-c"
|
||||
width="72"
|
||||
height="72"
|
||||
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAwFBMVEVHcExlnER3slV3slV3slV3slVvqU53slV3slV3slV3slVnnkV3slVup0xckTtckTtckTtckTtckTtckTt3slVckTtyrFBwkEGPjkqyjVXYimDpjmf/iGyZjk2Ar1aujVT/iGz/iGz/iGyhpVyOq1nvXFndLkTsVVb/iGz/iGz/iGz3i2vCm2KipVzqTVL/iGzRl2TyZl3/iGz/iGzfNEf7e2biO0r/iGz9gmr/iGz/iGz3cmLmRU7/iGz/iGz/iGyyzkZtAAAAQHRSTlMAQIC/n2YwUK//3xDvIIi//8+vY8/t////+///////QJ8wEM//////71Bg/////4D//3DP////3/8gj///r0C/62GdZgAAAmhJREFUeAGc0FWChTAMBdDg1Ghwt/0vcnyeNEXPd/QC4bjeDz8I4b4oZi+4K+CWgDODdOFJJRq/pFke7l/DmUXx3yQyfCpzARuUx+zk76SwxDdlDlaBZGxvkirRpBUQImY7pALQSJUOGELOdnngoJXxXiTZgSBDK/0eDzvEkaJ5++xQVTdt23VdPwxD33XtWCNiIsCgjkZN/WDq2hkoOorOoZb1s9uysLIbiKHo9BEteD6bmaH/rmItw9P3KJy9BdwzAssPq7QeVlmo2t1Cz549h+PxBEznCxD5FIT7z54ooJXjSkyABHiYNPpQVkgPHEXTPfIw/KxXDT+HOR2Z07bJO9Mr38LodrVEKWueOByZjAC5eUNBIm/fVFYE8F49CW0Ts6kmQGPNE/ZM27Q1mw5XR5eQC1XJxbVonbon0ZmcOIg70JsHLuTIQ3Go32drmHtyZBC75CsqY0buEgEm9njkTCZuJdeWkzul1O5ZbJG836W0SgsxinYPQpPOpKAU5lasItIwSk3Sini7R1mkXAAssqRh+AMi80VF51XU/ArRwp+IXoRvZK8X4cuW/4qF7OBh038iherUMicsylXHnxlxlrCvSUTxRzqgRKKsrcUXsnsS3eumX4kRqVMNrRR+/cy9/tLipNVpWnSAO/REotjrSiyMKZwrq1F+eMUjByoQbXuQs91iZCWEY8XkQP4vrHEyAdGAPTrTgWcPPMCkYgIeRcdBnwFeQ67k5iq2JyfOs9lidnnUYo0D+Zk2SIwbNrn6qsIz7vgFCZwTo8Pr4bOmzqgBrmI2P0jn378W2fjm55jzZFk2NN8BIrOmWnrNWn4AAAAASUVORK5CYII="
|
||||
/>
|
||||
</Defs>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
Emoji.displayName = 'Peach'
|
||||
|
||||
export const Peach = memo<EmojiProps>(themed(Emoji))
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import { Path, Svg } from 'react-native-svg'
|
||||
|
||||
import { themed } from '../themed'
|
||||
|
||||
import type { EmojiProps } from '../EmojiProps'
|
||||
|
||||
const Emoji = (props: EmojiProps) => {
|
||||
const { size = 16, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<Path
|
||||
d="M1.667 4.91v.061c0-.019.004-.037.006-.056l-.006-.005Zm5.88 4.99a.875.875 0 0 1-.186-.11L1.922 5.468a.637.637 0 0 1-.255-.497v5.484c0 .915.494 1.113.494 1.113l5.236 4.077c.093.072.17.116.239.143a.487.487 0 0 1-.089-.271V9.9Zm-3.968.163c-.45 0-.92-.451-1.05-1.008-.13-.557.13-1.008.58-1.008.45 0 .92.451 1.049 1.008.13.557-.13 1.008-.58 1.008Zm2.525 3.36c-.45 0-.92-.451-1.049-1.008-.13-.557.13-1.008.58-1.008.45 0 .92.451 1.049 1.008.13.557-.13 1.009-.58 1.009Z"
|
||||
fill="#A0041E"
|
||||
/>
|
||||
<Path
|
||||
d="M14.078 5.43 8.602 9.79a.852.852 0 0 1-.15.095v5.632a.492.492 0 0 1-.09.275.945.945 0 0 0 .248-.147l5.242-4.077s.481-.198.481-1.113V4.934c0 .18-.085.36-.255.496Zm-3.374 7.497c-.11.51-.506.922-.886.922-.379 0-.598-.413-.488-.922.11-.51.506-.922.885-.922.38 0 .598.412.49.922Zm1.6-2.362c-.114.525-.532.95-.932.95s-.63-.425-.515-.95c.116-.525.534-.95.933-.95.4 0 .63.425.515.95Zm1.386-2.287c-.113.5-.526.903-.92.903-.395 0-.622-.404-.508-.903.113-.5.525-.904.92-.904s.622.405.508.904Zm.64-3.366c.001.007.003.014.003.022V4.91l-.002.002Z"
|
||||
fill="#DD2E44"
|
||||
/>
|
||||
<Path
|
||||
d="M14.078 4.437 8.583.205c-.34-.273-.9-.273-1.24 0l-5.42 4.27a.644.644 0 0 0-.25.44c-.002.02-.006.037-.006.056 0 .18.085.36.255.497l5.44 4.322c.056.045.119.08.185.11v5.617a.49.49 0 0 0 .088.27c.082.126.211.213.365.213.152 0 .28-.085.362-.208a.49.49 0 0 0 .09-.275V9.885a.852.852 0 0 0 .15-.095l5.476-4.36a.637.637 0 0 0 .255-.496l-.002-.022a.638.638 0 0 0-.253-.475Zm-5.852-.572c.728 0 1.32.467 1.32 1.045 0 .577-.592 1.045-1.32 1.045-.729 0-1.32-.468-1.32-1.045 0-.578.591-1.045 1.32-1.045Z"
|
||||
fill="#EA596E"
|
||||
/>
|
||||
<Path
|
||||
d="M8.226 5.955c.728 0 1.319-.468 1.319-1.045s-.59-1.045-1.32-1.045c-.728 0-1.318.468-1.318 1.045s.59 1.045 1.319 1.045ZM13.181 7.374c-.394 0-.806.405-.92.904-.114.5.114.904.508.904.395 0 .807-.405.92-.904.115-.499-.113-.904-.508-.904Zm-1.391 2.24c-.4 0-.818.426-.933.951-.115.525.116.95.515.95.4 0 .818-.425.933-.95.115-.525-.116-.95-.515-.95Zm-1.576 2.39c-.38 0-.776.414-.885.923-.11.51.11.922.489.922.38 0 .776-.412.885-.922.11-.51-.11-.922-.489-.922Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
<Path
|
||||
d="M3.109 8.047c-.45 0-.71.451-.58 1.008.13.557.6 1.008 1.05 1.008.45 0 .709-.451.579-1.008-.13-.557-.6-1.008-1.05-1.008Zm2.525 3.36c-.45 0-.709.451-.58 1.008.13.557.6 1.008 1.05 1.008.45 0 .71-.451.58-1.008-.13-.557-.6-1.008-1.05-1.008Z"
|
||||
fill="#E1E8ED"
|
||||
/>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
Emoji.displayName = 'Play'
|
||||
|
||||
export const Play = memo<EmojiProps>(themed(Emoji))
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { memo } from 'react'
|
||||
|
||||
import {
|
||||
ClipPath,
|
||||
Defs,
|
||||
G,
|
||||
Image,
|
||||
Path,
|
||||
Pattern,
|
||||
Svg,
|
||||
Use,
|
||||
} from 'react-native-svg'
|
||||
|
||||
import { themed } from '../themed'
|
||||
|
||||
import type { EmojiProps } from '../EmojiProps'
|
||||
|
||||
const Emoji = (props: EmojiProps) => {
|
||||
const { size = 16, ...otherProps } = props
|
||||
|
||||
return (
|
||||
<Svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
fill="none"
|
||||
{...otherProps}
|
||||
>
|
||||
<G clipPath="url(#unicorn-a)">
|
||||
<Path fill="url(#unicorn-b)" d="M.667.667h14.667v14.667H.667z" />
|
||||
</G>
|
||||
<Defs>
|
||||
<ClipPath id="unicorn-a">
|
||||
<Path fill="#fff" d="M0 0h16v16H0z" />
|
||||
</ClipPath>
|
||||
<Pattern
|
||||
id="unicorn-b"
|
||||
patternContentUnits="objectBoundingBox"
|
||||
width="1"
|
||||
height="1"
|
||||
>
|
||||
<Use xlinkHref="#unicorn-c" transform="scale(.01389)" />
|
||||
</Pattern>
|
||||
<Image
|
||||
id="unicorn-c"
|
||||
width="72"
|
||||
height="72"
|
||||
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAwFBMVEVHcEx6QYTBzdXBzdXBzdVgN5pgN5rBzdW2n6fENRJgN5rBzdVgN5rBzdXBzdVgN5rBzdXufA7seA5gN5rBzdXBzdXBzdXBzdXufA7MQhHaWhDteQ5gN5rWUxDHOhF1V6fufA7XVhDNgFzBzdW8xs9gN5rufA6prMSyvMbncRCImKORgrhTYmyCbK9pRaDIPBOfmMF2iJYqMDSaqLFga3N0VqbboGV6g4nbYBTlhi6ESHc8Q0ewXkvMuaPHsKSuipHrwtT2AAAAI3RSTlMAIO8wfdN9QBD+W983v1zvn2bpqq+PIM+WpzDDj0DP36/Pz9/s0Q4AAAK6SURBVHhe7ZbXUuMwFIblFsuOU0ghlLCweyTXkkpnd9//rVbGFMtYsgwZrvYbbpjJfHP+o19K0MnVEToIR74/OYzqxD+U6spn/Lz4ugif+37kOKfaIdKtnJU/OcFfNp06zl2xqmo+Qzd4geb2SlxNYmIexqqSz4b+q8nrWdZS8+gb7D9xCxh3jlNUwThGDAMAxjZC7pQyRnTkjmiFqSYyTfyo2JR/fjaAebEtgBBgcEnf4ER05AlMZxPmiXzGLwL63EAzstkRgISKcEWmH6XHX63+AMBiAMEmZqa12CQpVLmp6IbAOicQM5NkJpbOW2LRdYlWRRXu/1KasJE2MQAEzyRZXjdZGFmW1nx40eumnmgespE2AbwTJDXXEk0FW79wWDC/jPiQQViMxLHmVVqPJcTNK2eekigECOMd1OCmmnpFQvHKS26gkeC6YvLKhDU09teznlpEQLJKBUod4umVwR9e0v0GEcl7NkqbwlkvpntJMkalpVZzN3FpyggzsVIK4VvauG93ao0uCbST8SbURB9UuG4VDUEJkreJBqDGukWEgUNxTdJkZL/dE2k4qWgMr9xut9tbxXDSM+NF8pOTrih83D6GICOQiGyosGstk1hkQhcCZZHqSII6qrMWihbQCZKLRNCRTCA6ho4EApENXcmbRSZ0JWkWzaArYbNIBw7lKnV4HfvSKnVIZkurpH74fXFVs4+iMQgZI1NWJfU22siQVUm5RHPZ911SE2FdEowxk1RJ7ez1YcvAGVV5imbD1nu45kUAQUzqNRwqPTE5f/HDNN3zpgVW+3WR8KI4TdMdNw9WfIbJR1FcXbKhXA++juE+TcOKyFS/0vzktZ/VOlZ/PqWfM5G6SHZndfxpEV4INt1VhPBc5lEXMexZqRlj1F3Eg20GL1AXyTm8yPw+0X/R+FCiwTdE+weFN6s3Jd7QlgAAAABJRU5ErkJggg=="
|
||||
/>
|
||||
</Defs>
|
||||
</Svg>
|
||||
)
|
||||
}
|
||||
|
||||
Emoji.displayName = 'Unicorn'
|
||||
|
||||
export const Unicorn = memo<EmojiProps>(themed(Emoji))
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export { Basketball } from './emojis/basketball'
|
||||
export { Collaboration } from './emojis/collaboration'
|
||||
export { Fire } from './emojis/fire'
|
||||
export { Peach } from './emojis/peach'
|
||||
export { Play } from './emojis/play'
|
||||
export { Unicorn } from './emojis/unicorn'
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import { Stack } from '@tamagui/core'
|
||||
|
||||
import type { EmojiProps } from './EmojiProps'
|
||||
import type React from 'react'
|
||||
|
||||
export function themed(Component: React.ElementType) {
|
||||
const useWrapped = (props: EmojiProps) => {
|
||||
const { size, hasBackground, sizeBackground = 24, ...rest } = props
|
||||
|
||||
if (hasBackground) {
|
||||
return (
|
||||
<Stack
|
||||
width={sizeBackground}
|
||||
height={sizeBackground}
|
||||
borderRadius={sizeBackground / 2}
|
||||
backgroundColor="$turquoise-50-opa-10"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Component {...rest} size={size} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
return <Component {...rest} size={size} />
|
||||
}
|
||||
return useWrapped
|
||||
}
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
import { Basketball, Collaboration, Fire, Peach, Play, Unicorn } from '../emoji'
|
||||
|
||||
export interface Channel {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
icon?: React.ReactNode
|
||||
emoji: string
|
||||
channelStatus?: 'muted' | 'normal' | 'withMessages' | 'withMentions'
|
||||
numberOfMessages?: number
|
||||
}
|
||||
|
|
@ -16,6 +14,10 @@ export interface ChannelGroup {
|
|||
channels: Channel[]
|
||||
}
|
||||
|
||||
const emojis = ['👋', '🔥', '🦄', '🍑', '🤫', '🫣', '🏀', '🤝']
|
||||
|
||||
const randomEmoji = () => emojis[Math.floor(Math.random() * emojis.length)]
|
||||
|
||||
// MOCK DATA
|
||||
export const CHANNEL_GROUPS: ChannelGroup[] = [
|
||||
{
|
||||
|
|
@ -26,25 +28,25 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
{
|
||||
id: 'welcome',
|
||||
title: '# welcome',
|
||||
icon: <Collaboration hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'general-welcome',
|
||||
title: '# general',
|
||||
icon: <Play hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'random',
|
||||
title: '# random',
|
||||
icon: <Fire hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'onboarding',
|
||||
title: '# onboarding',
|
||||
icon: <Unicorn hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
channelStatus: 'withMentions',
|
||||
numberOfMessages: 3,
|
||||
|
|
@ -59,7 +61,7 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
{
|
||||
id: 'announcements',
|
||||
title: '# announcements',
|
||||
icon: <Peach hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
|
|
@ -67,7 +69,7 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
title: '# jobs',
|
||||
channelStatus: 'withMentions',
|
||||
numberOfMessages: 3,
|
||||
icon: <Play hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
|
|
@ -75,13 +77,13 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
title: '# events',
|
||||
channelStatus: 'withMentions',
|
||||
numberOfMessages: 2,
|
||||
icon: <Fire hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'meetups',
|
||||
title: '# meetups',
|
||||
icon: <Unicorn hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
],
|
||||
|
|
@ -93,25 +95,25 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
{
|
||||
id: 'design',
|
||||
title: '# design',
|
||||
icon: <Collaboration hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'ux',
|
||||
title: '# ux',
|
||||
icon: <Play hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'ui',
|
||||
title: '# ui',
|
||||
icon: <Fire hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'figma',
|
||||
title: '# figma',
|
||||
icon: <Unicorn hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
],
|
||||
|
|
@ -123,13 +125,13 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
{
|
||||
id: 'general',
|
||||
title: '# general',
|
||||
icon: <Collaboration hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'people-ops',
|
||||
title: '# people-ops',
|
||||
icon: <Basketball hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
],
|
||||
|
|
@ -141,27 +143,27 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
{
|
||||
id: 'react',
|
||||
title: '# react',
|
||||
icon: <Collaboration hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
channelStatus: 'withMessages',
|
||||
},
|
||||
{
|
||||
id: 'vue',
|
||||
title: '# vue',
|
||||
icon: <Play hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'angular',
|
||||
title: '# angular',
|
||||
channelStatus: 'muted',
|
||||
icon: <Fire hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'svelte',
|
||||
title: '# svelte',
|
||||
icon: <Unicorn hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
],
|
||||
|
|
@ -173,26 +175,26 @@ export const CHANNEL_GROUPS: ChannelGroup[] = [
|
|||
{
|
||||
id: 'node',
|
||||
title: '# node',
|
||||
icon: <Collaboration hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'python',
|
||||
title: '# python',
|
||||
icon: <Play hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'ruby',
|
||||
title: '# ruby',
|
||||
icon: <Fire hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
{
|
||||
id: 'php',
|
||||
title: '# php',
|
||||
channelStatus: 'muted',
|
||||
icon: <Unicorn hasBackground />,
|
||||
emoji: randomEmoji(),
|
||||
description: 'Share random funny stuff with the community. Play nice.',
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { CHANNEL_GROUPS } from './mock-data'
|
||||
import { Sidebar } from './sidebar'
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
|
@ -6,6 +7,9 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||
const meta: Meta<typeof Sidebar> = {
|
||||
title: 'Sidebar/Community',
|
||||
component: Sidebar,
|
||||
args: {
|
||||
channels: CHANNEL_GROUPS,
|
||||
},
|
||||
argTypes: {},
|
||||
parameters: {
|
||||
design: {
|
||||
|
|
@ -19,12 +23,7 @@ type Story = StoryObj<typeof Sidebar>
|
|||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
name: 'Rarible',
|
||||
description:
|
||||
'Multichain community-centric NFT marketplace. Create, buy and sell your NFTs.',
|
||||
membersCount: 476,
|
||||
},
|
||||
args: {},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
|
|
|||
|
|
@ -80,10 +80,7 @@ const Sidebar = (props: Props) => {
|
|||
return (
|
||||
<AccordionItem
|
||||
key={channel.id}
|
||||
icon={channel.icon}
|
||||
title={channel.title}
|
||||
channelStatus={channel.channelStatus}
|
||||
numberOfMessages={channel.numberOfMessages}
|
||||
channel={channel}
|
||||
isSelected={selectedChannelId === channel.id}
|
||||
onPress={() => onChannelPress(channel.id)}
|
||||
mb={isLastChannelOfTheList ? 8 : 0}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||
const meta: Meta<typeof Topbar> = {
|
||||
title: 'Navigation/Topbar',
|
||||
component: Topbar,
|
||||
args: {
|
||||
channel: {
|
||||
id: '1',
|
||||
emoji: '👋',
|
||||
title: '# channel',
|
||||
description: 'This is a channel description',
|
||||
},
|
||||
},
|
||||
argTypes: {},
|
||||
parameters: {
|
||||
viewport: {
|
||||
|
|
@ -24,10 +32,7 @@ type Story = StoryObj<typeof Topbar>
|
|||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: '# channel',
|
||||
description: 'This is a channel description',
|
||||
},
|
||||
args: {},
|
||||
}
|
||||
|
||||
export const WithMembersSelected: Story = {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
ShareIcon,
|
||||
UpToDateIcon,
|
||||
} from '@status-im/icons/20'
|
||||
import { Stack } from '@tamagui/core'
|
||||
import { Stack, Text } from '@tamagui/core'
|
||||
import { BlurView } from 'expo-blur'
|
||||
|
||||
import { DropdownMenu } from '../dropdown-menu'
|
||||
|
|
@ -29,7 +29,7 @@ type Props = {
|
|||
const Topbar = (props: Props) => {
|
||||
const { membersVisisble, onMembersPress, goBack, blur, channel } = props
|
||||
|
||||
const { title, description, icon } = channel
|
||||
const { title, description, emoji } = channel
|
||||
|
||||
return (
|
||||
<BlurView intensity={40} style={{ zIndex: 100 }}>
|
||||
|
|
@ -53,7 +53,11 @@ const Topbar = (props: Props) => {
|
|||
/>
|
||||
</Stack>
|
||||
|
||||
{icon && <Stack marginRight={12}>{icon}</Stack>}
|
||||
{emoji && (
|
||||
<Stack marginRight={12}>
|
||||
<Text>{emoji}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{title && (
|
||||
<Paragraph weight="semibold" marginRight={4}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue