69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { Stack } from "@mantine/core";
|
||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||
import { EntryCard } from "@/shared/ui";
|
||
import { BankOperationIcon } from "./BankOperationIcon";
|
||
|
||
const meta = {
|
||
title: "Product/BankCards/OperationIcons",
|
||
component: BankOperationIcon,
|
||
tags: ["autodocs"],
|
||
args: { kind: "expense", categoryName: "Продукты" },
|
||
} satisfies Meta<typeof BankOperationIcon>;
|
||
export default meta;
|
||
type Story = StoryObj<typeof meta>;
|
||
export const Categories: Story = {
|
||
render: () => (
|
||
<Stack maw={640}>
|
||
{[
|
||
"Алкоголь",
|
||
"Вклады",
|
||
"Другое",
|
||
"Жильё",
|
||
"Здоровье",
|
||
"Инвестиции и накопления",
|
||
"Кафе",
|
||
"Образование",
|
||
"Переводы",
|
||
"Погашение кредита",
|
||
"Подписки",
|
||
"Покупки",
|
||
"Продукты",
|
||
"Путешествия",
|
||
"Развлечения",
|
||
"Связь и интернет",
|
||
"Снятие наличных",
|
||
"Ставки",
|
||
"Страхование",
|
||
"Табак",
|
||
"Такси",
|
||
"Транспорт",
|
||
"Хостинг и ИИ-сервисы",
|
||
"Цифровые покупки",
|
||
"Моя категория",
|
||
].map((name) => (
|
||
<EntryCard
|
||
key={name}
|
||
title="Расход"
|
||
metadata={`12.09.2026 · ${name}`}
|
||
initial="Р"
|
||
color="red"
|
||
icon={<BankOperationIcon kind="expense" categoryName={name} />}
|
||
value="−1 250,00 ₽"
|
||
valueLabel="Расход"
|
||
tone="negative"
|
||
/>
|
||
))}
|
||
<EntryCard
|
||
title="Пополнение"
|
||
metadata="12.09.2026"
|
||
initial="П"
|
||
color="green"
|
||
icon={<BankOperationIcon kind="topup" />}
|
||
value="+15 000,00 ₽"
|
||
valueLabel="Пополнение"
|
||
tone="positive"
|
||
/>
|
||
</Stack>
|
||
),
|
||
};
|