add author component

This commit is contained in:
Pavel Prichodko 2023-01-19 23:55:39 +01:00
parent 52f19899a6
commit 01a70d2ec1
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
3 changed files with 132 additions and 0 deletions

View File

@ -0,0 +1,43 @@
import { Author } from './author'
import type { Meta, StoryObj } from '@storybook/react'
const meta: Meta<typeof Author> = {
component: Author,
argTypes: {},
args: {
name: 'Alisher Yakupov',
},
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Web?node-id=3155%3A49848&t=87Ziud3PyYYSvsRg-4',
},
},
}
type Story = StoryObj<typeof Author>
export const Default: Story = {
args: {},
}
export const Contact: Story = {
args: {
status: 'contact',
},
}
export const Verified: Story = {
args: {
status: 'verified',
},
}
export const Untrustworthy: Story = {
args: {
status: 'untrustworthy',
},
}
export default meta

View File

@ -0,0 +1,89 @@
import { XStack } from 'tamagui'
import { Paragraph } from '../typography'
interface Props {
name: string
nickname?: string
address?: string
status?: 'verified' | 'untrustworthy' | 'contact'
time?: string
orientation?: 'horizontal' | 'vertical'
}
const Author = (props: Props) => {
const { name, status, nickname, address, time } = props
return (
<XStack space={8} alignItems="center">
<XStack space={4} alignItems="center">
<Paragraph weight="semibold" variant="smaller" color="$neutral-100">
{name}
</Paragraph>
{status === 'contact' && (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="6" cy="6" r="5" fill="#4360DF" />
<path
d="M9 9.5V9.5C8.37526 8.56288 7.3235 8 6.19722 8H5.80278C4.6765 8 3.62474 8.56288 3 9.5V9.5"
stroke="white"
strokeLinejoin="round"
/>
<circle cx="6" cy="6" r="4.25" stroke="#4360DF" strokeWidth="1.5" />
<circle
cx="6"
cy="4.5"
r="1.5"
stroke="white"
strokeLinejoin="round"
/>
</svg>
)}
{status === 'verified' && (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="6" cy="6" r="5" fill="#26A69A" />
<path
d="M4 6.3L5.33333 7.5L8 4.5"
stroke="white"
strokeWidth="1.1"
/>
</svg>
)}
{status === 'untrustworthy' && (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="6" cy="6" r="5" fill="#E65F5C" />
<path d="M6 7L6 3" stroke="white" strokeWidth="1.1" />
<path d="M6 9L6 8" stroke="white" strokeWidth="1.1" />
</svg>
)}
</XStack>
{address && (
<Paragraph color="$neutral-50" fontSize={11}>
{address}
{time && ` · ${time}`}
</Paragraph>
)}
</XStack>
)
}
export { Author }
export type { Props as AuthorProps }

View File