Skip to content

Commit fb154af

Browse files
kevcodezkevcodez
authored
chore: add disk pricing (supabase#30835)
1 parent f650b5a commit fb154af

File tree

3 files changed

+128
-0
lines changed

3 files changed

+128
-0
lines changed

‎apps/www/components/Pricing/PricingDiskSection.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { Button } from 'ui'
2+
import Panel from '../Panel'
3+
import Link from 'next/link'
4+
import { ArrowUpRight } from 'lucide-react'
5+
6+
const diskTypes = [
7+
{
8+
name: 'General Purpose',
9+
tagline: 'Balance between price and performance',
10+
maxSize: '16 TB',
11+
size: '8 GB included\nthen $0.125 per GB',
12+
iops: '3,000 IOPS included\nthen $0.024 per IOPS',
13+
throughput: '125 Mbps included\nthen $0.095 per Mbps',
14+
durability: '99.9%',
15+
},
16+
{
17+
name: 'High Performance',
18+
tagline: 'For mission critical applications',
19+
maxSize: '60 TB',
20+
size: '$0.195 per GB',
21+
iops: '$0.119 per IOPS',
22+
throughput: 'Scales automatically with IOPS',
23+
durability: '99.999%',
24+
},
25+
]
26+
27+
const PricingDiskSection = () => (
28+
<div>
29+
<div className="text-center mb-8 lg:mb-16">
30+
<h2 className="text-foreground text-3xl">Advanced disk configurations</h2>
31+
<p className="text-foreground-light mt-4 text-lg mb-4">
32+
Scale database storage up to 60 TB and 80,000 IOPS.
33+
</p>
34+
</div>
35+
<Panel outerClassName="gap-4 mx-auto max-w-6xl">
36+
<div>
37+
<table className="text-foreground m-0 hidden w-full table-auto overflow-hidden rounded-b lg:table text-sm">
38+
<thead>
39+
<tr>
40+
<th></th>
41+
<th className="p-3 text-left font-medium">Max Size</th>
42+
<th className="p-3 text-left font-medium">Size</th>
43+
<th className="p-3 text-left font-medium">IOPS</th>
44+
<th className="p-3 text-left font-medium">Throughput</th>
45+
<th className="p-3 text-left font-medium">Durability</th>
46+
</tr>
47+
</thead>
48+
<tbody>
49+
{diskTypes.map((diskType) => (
50+
<tr key={diskType.name} className="bg-surface-100 rounded-lg">
51+
<td className="p-3">
52+
<span className="text-base">{diskType.name}</span>
53+
<br />
54+
<span className="text-foreground-lighter">{diskType.tagline}</span>
55+
</td>
56+
<td className="p-3">{diskType.maxSize}</td>
57+
<td className="p-3 whitespace-pre-line">{diskType.size}</td>
58+
<td className="p-3 whitespace-pre-line">{diskType.iops}</td>
59+
<td className="p-3 whitespace-pre-line">{diskType.throughput}</td>
60+
<td>{diskType.durability}</td>
61+
</tr>
62+
))}
63+
</tbody>
64+
</table>
65+
<table className="text-foreground m-0 -mt-12 lg:mt-0 w-full table-auto overflow-hidden rounded-b lg:hidden text-xs">
66+
{diskTypes.map((diskType, idx) => (
67+
<tbody key={`${diskType.name}-mobile`}>
68+
<tr>
69+
<th className="py-3 pl-4 text-left font-medium pt-16 lg:pt-3 w-[60%]">Disk Type</th>
70+
<td className="px-4 py-3 text-brand pt-16 lg:pt-3">{diskType.name}</td>
71+
</tr>
72+
<tr>
73+
<th className="py-3 pl-4 text-left font-medium ">Max Size</th>
74+
<td className="px-4 py-3 whitespace-pre-wrap">{diskType.maxSize}</td>
75+
</tr>
76+
<tr>
77+
<th className="py-3 pl-4 text-left font-medium ">Size</th>
78+
<td className="px-4 py-3 whitespace-pre-wrap">{diskType.size}</td>
79+
</tr>
80+
<tr>
81+
<th className="py-3 pl-4 text-left font-medium ">IOPS</th>
82+
<td className="px-4 py-3 whitespace-pre-wrap">{diskType.iops}</td>
83+
</tr>
84+
<tr>
85+
<th className="py-3 pl-4 text-left font-medium ">Throughput</th>
86+
<td className="px-4 py-3 whitespace-pre-wrap">{diskType.throughput}</td>
87+
</tr>
88+
<tr>
89+
<th className="py-3 pl-4 text-left font-medium ">Durability</th>
90+
<td className="px-4 py-3 whitespace-pre-wrap">{diskType.durability}</td>
91+
</tr>
92+
</tbody>
93+
))}
94+
</table>
95+
</div>
96+
</Panel>
97+
<div className="mt-8 flex justify-center">
98+
<Button asChild size="tiny" type="default" iconRight={<ArrowUpRight className="w-4" />}>
99+
<Link href="https://supabase.com/docs/guides/platform/compute-and-disk#disk">
100+
Learn about advanced disk config
101+
</Link>
102+
</Button>
103+
</div>
104+
</div>
105+
)
106+
107+
export default PricingDiskSection

‎apps/www/pages/pricing.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const PricingAddons = dynamic(() => import('~/components/Pricing/PricingAddons')
1616
const PricingComparisonTable = dynamic(() => import('~/components/Pricing/PricingComparisonTable'))
1717
const PricingFAQs = dynamic(() => import('~/components/Pricing/PricingFAQs'))
1818
const CTABanner = dynamic(() => import('~/components/CTABanner'))
19+
const PricingDiskSection = dynamic(() => import('~/components/Pricing/PricingDiskSection'))
1920

2021
export default function IndexPage() {
2122
const router = useRouter()
@@ -114,6 +115,13 @@ export default function IndexPage() {
114115
<PricingComputeSection />
115116
</div>
116117

118+
<div
119+
id="disk"
120+
className="container relative mx-auto px-4 lg:px-12 pt-16 md:pt-24 lg:pt-32 lg:pb-16"
121+
>
122+
<PricingDiskSection />
123+
</div>
124+
117125
<div id="addons" className="sm:py-18 container relative mx-auto px-4 py-16 md:py-24 lg:px-12">
118126
<PricingAddons />
119127
</div>

‎packages/shared-data/pricing.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,19 @@ export const pricing: Pricing = {
6868
},
6969
usage_based: true,
7070
},
71+
{
72+
title: 'Advanced disk config',
73+
tooltips: {
74+
main: 'Supabase databases are backed by high performance SSD disks. The disk can be scaled up to 60 TB, 80,000 IOPS and 4,000 Mbps throughput.',
75+
},
76+
plans: {
77+
free: false,
78+
pro: true,
79+
team: true,
80+
enterprise: true,
81+
},
82+
usage_based: false,
83+
},
7184
{
7285
title: 'Automatic backups',
7386
tooltips: {

0 commit comments

Comments
 (0)