Category

A component for displaying transaction categories with visual indicators.

Usage

Shopping

25

1

2

3

4

5

6

7

8

9

10

11

import { Category } from "@/components/bank/category"

export default function TransactionCategories() {
  const category = {
    name: "Shopping",
    count: 25,
    totalCount: 100,
  }

  return <Category category={category} />
}

Props

category

The category object containing name, count, and total count.

Type: {name: string, count: number, totalCount: number}

Features

Progress Indicator

Visual progress bar showing the category's proportion of total transactions.

Dynamic Styling

Category-specific colors and icons based on predefined styles.

Responsive Design

Adapts to different screen sizes while maintaining visual hierarchy.