YourBanK logoYourBanK

BankTabItem

A tab item component for displaying bank account information in a tabbed interface.

Usage

Main Checking

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { BankTabItem } from "@/components/bank/bank-tab-item"

export default function AccountTabs() {
  const account = {
    id: "acc-1",
    name: "Main Checking",
    mask: "4567",
    currentBalance: 12345.67,
    type: "depository",
    subtype: "checking",
  }

  return (
    <BankTabItem
      account={account}
      isSelected={true}
      onClick={() => console.log("Tab clicked")}
    />
  )
}

Props

account

The bank account object containing account details.

Type: BankAccount

isSelected

Whether the tab item is currently selected.

Type: boolean

onClick

Callback function called when the tab item is clicked.

Type: () -> void (optional)

className

Additional CSS classes to apply to the tab item.

Type: string (optional)

Features

Interactive States

Smooth hover and tap animations provide visual feedback for user interactions.

Selection Indicator

A highlighted border and background color clearly indicate the selected state.

Responsive Layout

The tab item adjusts its layout to maintain readability across different screen sizes.