transaction-history-page

Transaction history page. Filterable list of all transactions with date grouping, search, and export. Shows transaction type, status, amount, and counterparty.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"

interface TransactionHistoryPageProps {
  filters?: React.ReactNode
  children?: React.ReactNode
  loading?: boolean
  className?: string
}

export function TransactionHistoryPage({ filters, children, loading = false, className }: TransactionHistoryPageProps) {
  const { log, motion, LiveRegion } = useNyuchiHarness("transaction-history-page")
  const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
  if (loading) return <main data-slot="transaction-history-page" data-portal="https://design.nyuchi.com/components/transaction-history-page" data-loading role="main" className="p-4 space-y-3 animate-pulse">{[1,2,3,4,5].map(i=><div key={i} className="h-16 rounded-[var(--radius-lg,14px)] bg-muted" />)}</main>
  return (
    <main data-slot="transaction-history-page" role="main" aria-label="Transaction History" style={animStyle} className={cn("flex flex-col gap-4 p-4", className)}>
      <h1 className="text-xl font-bold">Transactions</h1>
      {filters && <section aria-label="Filters">{filters}</section>}
      <section aria-label="Transaction list" className="flex flex-col gap-2">{children}</section>
    </main>
  )
}
export type { TransactionHistoryPageProps }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/transaction-history-page

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/transaction-history-page

Source path

components/ui/transaction-history-page.tsx

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { useNyuchiHarness } from "@/lib/harness"

interface TransactionHistoryPageProps {
  filters?: React.ReactNode
  children?: React.ReactNode
  loading?: boolean
  className?: string
}

export function TransactionHistoryPage({ filters, children, loading = false, className }: TransactionHistoryPageProps) {
  const { log, motion, LiveRegion } = useNyuchiHarness("transaction-history-page")
  const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
  if (loading) return <main data-slot="transaction-history-page" data-portal="https://design.nyuchi.com/components/transaction-history-page" data-loading role="main" className="p-4 space-y-3 animate-pulse">{[1,2,3,4,5].map(i=><div key={i} className="h-16 rounded-[var(--radius-lg,14px)] bg-muted" />)}</main>
  return (
    <main data-slot="transaction-history-page" role="main" aria-label="Transaction History" style={animStyle} className={cn("flex flex-col gap-4 p-4", className)}>
      <h1 className="text-xl font-bold">Transactions</h1>
      {filters && <section aria-label="Filters">{filters}</section>}
      <section aria-label="Transaction list" className="flex flex-col gap-2">{children}</section>
    </main>
  )
}
export type { TransactionHistoryPageProps }