59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import type { CSSProperties, ReactNode } from 'react';
|
|
import { cn } from '../../lib/cn';
|
|
|
|
/**
|
|
* Indian-grouped rupee figure (lakh/crore). e.g. 20000000 → ₹2,00,00,000.
|
|
*/
|
|
export function formatINR(n: number | null | undefined): string {
|
|
if (n == null || Number.isNaN(n)) return '—';
|
|
const neg = n < 0;
|
|
const s = Math.round(Math.abs(n)).toString();
|
|
let last3 = s.slice(-3);
|
|
let rest = s.slice(0, -3);
|
|
if (rest) last3 = ',' + last3;
|
|
rest = rest.replace(/\B(?=(\d{2})+(?!\d))/g, ',');
|
|
return (neg ? '-' : '') + rest + last3;
|
|
}
|
|
|
|
export type RupeeSize = 'sm' | 'md' | 'lg' | 'xl' | 'hero';
|
|
export type RupeeTone = 'default' | 'accent' | 'navy' | 'muted' | 'onNavy';
|
|
|
|
export interface RupeeAmountProps {
|
|
value: number;
|
|
/** @default "md" */
|
|
size?: RupeeSize;
|
|
/** @default "default" */
|
|
tone?: RupeeTone;
|
|
sub?: ReactNode;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
const SIZES: Record<RupeeSize, number> = { sm: 16, md: 22, lg: 32, xl: 44, hero: 64 };
|
|
const TONES: Record<RupeeTone, string> = {
|
|
default: 'var(--text-strong)',
|
|
accent: 'var(--sunrise-600)',
|
|
navy: 'var(--navy-900)',
|
|
muted: 'var(--text-muted)',
|
|
onNavy: 'var(--text-on-navy)',
|
|
};
|
|
|
|
/** Oversized confident rupee numeral via Inter Tight. */
|
|
export function RupeeAmount({ value, size = 'md', tone = 'default', sub, className, style }: RupeeAmountProps) {
|
|
const fs = SIZES[size];
|
|
return (
|
|
<span className={cn('inline-flex flex-col leading-none font-numeric', className)} style={style}>
|
|
<span
|
|
className="font-extrabold tracking-[-0.02em] nums inline-flex items-baseline gap-0.5"
|
|
style={{ fontSize: fs, color: TONES[tone] }}
|
|
>
|
|
<span className="font-bold" style={{ fontSize: fs * 0.62 }}>
|
|
₹
|
|
</span>
|
|
{formatINR(value)}
|
|
</span>
|
|
{sub && <span className="font-sans text-xs font-medium text-faint mt-1">{sub}</span>}
|
|
</span>
|
|
);
|
|
}
|