diff --git a/src/shared/ui/Card/Card.module.scss b/src/shared/ui/Card/Card.module.scss new file mode 100644 index 0000000..f580337 --- /dev/null +++ b/src/shared/ui/Card/Card.module.scss @@ -0,0 +1,19 @@ +.card { + padding: 20px; +} + +.title { + margin-bottom: 15px; + + color: var(--color-blue); + font-weight: 400; + font-size: 25px; + line-height: 120%; +} + +.description { + color: var(--color-text); + font-weight: 400; + font-size: 20px; + line-height: 30px; +} \ No newline at end of file diff --git a/src/shared/ui/Card/Card.stories.tsx b/src/shared/ui/Card/Card.stories.tsx new file mode 100644 index 0000000..f6786ac --- /dev/null +++ b/src/shared/ui/Card/Card.stories.tsx @@ -0,0 +1,56 @@ +import { Card } from './Card' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta = { + title: 'Shared/Card', + component: Card, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +/** + * Базовая карточка + */ +export const Default: Story = { + args: { + title: '1945', + description: 'Окончание Второй мировой войны', + }, +} + +/** + * Карточка с длинным описанием + */ +export const LongDescription: Story = { + args: { + title: '1969', + description: + 'Первая высадка человека на Луну. Нил Армстронг и Базз Олдрин стали первыми людьми, ступившими на поверхность Луны в рамках миссии Аполлон-11.', + }, +} + +/** + * Карточка с коротким описанием + */ +export const ShortDescription: Story = { + args: { + title: '2001', + description: 'Запуск Wikipedia', + }, +} + +/** + * Карточка с текстовым заголовком + */ +export const TextTitle: Story = { + args: { + title: 'Новость', + description: 'Важное событие произошло сегодня', + }, +} diff --git a/src/shared/ui/Card/Card.tsx b/src/shared/ui/Card/Card.tsx new file mode 100644 index 0000000..3f5a212 --- /dev/null +++ b/src/shared/ui/Card/Card.tsx @@ -0,0 +1,37 @@ +import { memo } from 'react' + +import styles from './Card.module.scss' + +export interface CardProps { + /** + * Заголовок карточки (например, год события) + */ + readonly title: string | number + /** + * Описание карточки + */ + readonly description: string +} + +/** + * Универсальная карточка для отображения информации + * + * Отображает заголовок и описание. + * Используется для событий, новостей и других информационных блоков. + * + * @example + * ```tsx + * + * + * ``` + */ +export const Card = memo(({ title, description }: CardProps) => { + return ( +
+

{title}

+

{description}

+
+ ) +}) + +Card.displayName = 'Card' diff --git a/src/shared/ui/Card/index.ts b/src/shared/ui/Card/index.ts new file mode 100644 index 0000000..66e2db1 --- /dev/null +++ b/src/shared/ui/Card/index.ts @@ -0,0 +1,2 @@ +export { Card } from './Card' +export type { CardProps } from './Card' diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index d7f8c69..713fd13 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -1,2 +1,4 @@ export { Button } from './Button' export type { ButtonProps } from './Button' +export { Card } from './Card' +export type { CardProps } from './Card'