From 7f0d6d902a4d13ac04c70dab36cf3db80be37bdb Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 20 Nov 2025 10:00:24 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B8=D1=81=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=B7=D1=83=D0=B5=D0=BC=D1=8B=D0=B9=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20Card=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D0=B8=20=D0=B2=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0?=
 =?UTF-8?q?=D1=82=D0=B5=20"=D0=97=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=BA=20-=20=D0=9E=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/ui/Card/Card.module.scss | 19 ++++++++++
 src/shared/ui/Card/Card.stories.tsx | 56 +++++++++++++++++++++++++++++
 src/shared/ui/Card/Card.tsx         | 37 +++++++++++++++++++
 src/shared/ui/Card/index.ts         |  2 ++
 src/shared/ui/index.ts              |  2 ++
 5 files changed, 116 insertions(+)
 create mode 100644 src/shared/ui/Card/Card.module.scss
 create mode 100644 src/shared/ui/Card/Card.stories.tsx
 create mode 100644 src/shared/ui/Card/Card.tsx
 create mode 100644 src/shared/ui/Card/index.ts

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<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Базовая карточка
+ */
+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
+ * <Card title="1945" description="Окончание Второй мировой войны" />
+ * <Card title="Новость" description="Текст новости" />
+ * ```
+ */
+export const Card = memo(({ title, description }: CardProps) => {
+  return (
+    <div className={styles.card}>
+      <h3 className={styles.title}>{title}</h3>
+      <p className={styles.description}>{description}</p>
+    </div>
+  )
+})
+
+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'