AdditionalMonthlySpend.tsx37 lines · main

1	import { NewProjectPrice } from './RestoreToNewProject.utils'
2
3	export const AdditionalMonthlySpend = ({
4	additionalMonthlySpend,
5	}: {
6	additionalMonthlySpend: NewProjectPrice
7	}) => {
8	return (
9	<div className="text-sm text-foreground-lighter border-t p-5">
10	<p>
11	The new project will start with the same compute size as your current project, but the disk
12	size will be slightly larger (1.25×) to ensure the restore completes successfully. You will
13	be able to update the compute size and increase the disk size after the new project is
14	created in{' '}
15	<span className="font-mono text-xs tracking-tighter text-foreground-light">
16	Project Settings &gt; Compute and Disk
17	</span>
18	</p>
19	<div className="flex flex-col gap-2 text-foreground mt-4">
20	<div className="flex justify-between">
21	<p>Additional Monthly Compute</p>
22	<p className="font-mono text-right text-light">${additionalMonthlySpend.computePrice}</p>
23	</div>
24	<div className="flex justify-between">
25	<p>Additional Monthly Disk</p>
26	<p className="font-mono text-right text-light">${additionalMonthlySpend.diskPrice}</p>
27	</div>
28	<div className="flex justify-between border-t pt-2">
29	<p>Total</p>
30	<p className="font-mono text-right text-brand">
31	${additionalMonthlySpend.computePrice + additionalMonthlySpend.diskPrice}
32	</p>
33	</div>
34	</div>
35	</div>
36	)
37	}