add author component
This commit is contained in:
parent
52f19899a6
commit
01a70d2ec1
|
@ -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
|
|
@ -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 }
|
Loading…
Reference in New Issue