diff --git a/packages/components/src/author/author.stories.tsx b/packages/components/src/author/author.stories.tsx new file mode 100644 index 00000000..6c2cc87c --- /dev/null +++ b/packages/components/src/author/author.stories.tsx @@ -0,0 +1,43 @@ +import { Author } from './author' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + 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 + +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 diff --git a/packages/components/src/author/author.tsx b/packages/components/src/author/author.tsx new file mode 100644 index 00000000..daff4c4b --- /dev/null +++ b/packages/components/src/author/author.tsx @@ -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 ( + + + + {name} + + {status === 'contact' && ( + + + + + + + )} + {status === 'verified' && ( + + + + + )} + {status === 'untrustworthy' && ( + + + + + + )} + + + {address && ( + + {address} + {time && ` ยท ${time}`} + + )} + + ) +} + +export { Author } +export type { Props as AuthorProps } diff --git a/packages/components/src/author/index.tsx b/packages/components/src/author/index.tsx new file mode 100644 index 00000000..e69de29b