DiskManagementReviewAndSubmitDialog.components.tsx34 lines · main

1	import { cn } from 'ui'
2
3	import { formatCurrency } from '@/lib/helpers'
4
5	export interface BreakdownRowProps {
6	label: string
7	description?: string
8	children: React.ReactNode
9	}
10
11	export const BreakdownRow = ({ label, description, children }: BreakdownRowProps) => (
12	<div className="flex items-start justify-between py-3 px-0 border-b border-dashed last:border-b-0">
13	<div className="flex flex-col gap-0.5">
14	<span className="text-sm text-foreground-light">{label}</span>
15	{description && <span className="text-xs text-warning-600 max-w-72">{description}</span>}
16	</div>
17	{children}
18	</div>
19	)
20
21	export const ValueChange = ({ from, to }: { from: string; to: string }) => (
22	<span className="text-sm font-mono uppercase">
23	<span className="text-foreground-lighter">{from}</span>
24	<span className="text-foreground-lighter mx-2">&rarr;</span>
25	<span className="text-foreground">{to}</span>
26	</span>
27	)
28
29	export const PriceDelta = ({ delta }: { delta: number }) => (
30	<span className={cn('text-xs', delta >= 0 ? 'text-brand' : 'text-destructive')}>
31	{delta >= 0 ? `+${formatCurrency(delta)}` : `-${formatCurrency(Math.abs(delta))}`}{' '}
32	<span className="text-foreground-lighter">per month</span>
33	</span>
34	)