mirror of
https://github.com/supabase/supabase.git
synced 2026-07-06 19:44:24 +08:00
436bdb10ae
* Move all studio files from /studio to /apps/studio. * Move studio specific prettier ignores. * Fix the ui references from studio. * Fix the css imports. * Fix all package.json issues. * Fix the prettier setup for the studio app. * Add .turbo folder to prettierignore. * Fix the github workflows.
186 lines
8.3 KiB
TypeScript
186 lines
8.3 KiB
TypeScript
import * as Tooltip from '@radix-ui/react-tooltip'
|
|
import Link from 'next/link'
|
|
import { Button, IconHelpCircle, Modal } from 'ui'
|
|
|
|
interface SpendCapModalProps {
|
|
visible: boolean
|
|
onHide: () => void
|
|
}
|
|
|
|
const SpendCapModal = ({ visible, onHide }: SpendCapModalProps) => {
|
|
return (
|
|
<Modal hideFooter visible={visible} size="xlarge" header="Spend cap" onCancel={() => onHide()}>
|
|
<div className="py-4 space-y-4">
|
|
<Modal.Content>
|
|
<div className="space-y-4">
|
|
<p className="text-sm">
|
|
Enabling the spend cap sets a limit on your usage to stay within your plan's quota,
|
|
which controls costs but can limit service. Disabling the spend cap removes these
|
|
limits, but any extra usage beyond the plan's limit will be charged per usage.
|
|
</p>
|
|
<p className="text-sm">
|
|
Take a look at the following table to see which resources are chargeable and how they
|
|
are charged:
|
|
</p>
|
|
{/* Maybe instead of a table, show something more interactive like a spend cap playground */}
|
|
{/* Maybe ideate this in Figma first but this is good enough for now */}
|
|
<div className="border rounded border-control bg-overlay-hover">
|
|
<div className="flex items-center px-4 pt-2 pb-1">
|
|
<p className="w-[50%] text-sm text-foreground-light">Item</p>
|
|
<p className="w-[25%] text-sm text-foreground-light">Limit</p>
|
|
<p className="w-[25%] text-sm text-foreground-light">Rate</p>
|
|
</div>
|
|
<div className="py-2">
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Database size</p>
|
|
<p className="w-[25%] text-sm">8GB</p>
|
|
<p className="w-[25%] text-sm">$0.125 per GB</p>
|
|
</div>
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Egress</p>
|
|
<p className="w-[25%] text-sm">250GB</p>
|
|
<p className="w-[25%] text-sm">$0.09 per GB</p>
|
|
</div>
|
|
</div>
|
|
<div className="py-2">
|
|
<div className="flex items-center px-4 py-1">
|
|
<div className="flex w-[50%] items-center space-x-2">
|
|
<p className="text-sm">Auth MAUs</p>
|
|
<Tooltip.Root delayDuration={0}>
|
|
<Tooltip.Trigger>
|
|
<IconHelpCircle
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
className="transition opacity-50 cursor-pointer hover:opacity-100"
|
|
/>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content side="bottom">
|
|
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
|
<div
|
|
className={[
|
|
'rounded bg-alternative py-1 px-2 leading-none shadow', // background
|
|
'border border-background', //border
|
|
].join(' ')}
|
|
>
|
|
<span className="text-xs text-foreground">
|
|
Monthly Active Users: A user that has made an API request in the
|
|
last month
|
|
</span>
|
|
</div>
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
</div>
|
|
<p className="w-[25%] text-sm">100,000</p>
|
|
<p className="w-[25%] text-sm">$0.00325 per user</p>
|
|
</div>
|
|
<div className="flex items-center px-4 py-1">
|
|
<div className="flex w-[50%] items-center space-x-2">
|
|
<p className="text-sm">Single Sign-On (SAML 2.0) MAUs</p>
|
|
<Tooltip.Root delayDuration={0}>
|
|
<Tooltip.Trigger>
|
|
<IconHelpCircle
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
className="transition opacity-50 cursor-pointer hover:opacity-100"
|
|
/>
|
|
</Tooltip.Trigger>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content side="bottom">
|
|
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
|
<div
|
|
className={[
|
|
'rounded bg-alternative py-1 px-2 leading-none shadow', // background
|
|
'border border-background', //border
|
|
].join(' ')}
|
|
>
|
|
<span className="text-xs text-foreground">
|
|
Single Sign-On Monthly Active Users: A user that has made an API
|
|
request in the last month
|
|
</span>
|
|
</div>
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Portal>
|
|
</Tooltip.Root>
|
|
</div>
|
|
<p className="w-[25%] text-sm">50</p>
|
|
<p className="w-[25%] text-sm">$0.015 per user</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-2">
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Storage size</p>
|
|
<p className="w-[25%] text-sm">100GB</p>
|
|
<p className="w-[25%] text-sm">$0.021 per GB</p>
|
|
</div>
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Storage Image Transformations</p>
|
|
<p className="w-[25%] text-sm">100 origin images</p>
|
|
<p className="w-[25%] text-sm">$5 per 1000 origin images</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-2">
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Realtime concurrent peak connections</p>
|
|
<p className="w-[25%] text-sm">500</p>
|
|
<p className="w-[25%] text-sm">$10 per 1000</p>
|
|
</div>
|
|
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Realtime messages</p>
|
|
<p className="w-[25%] text-sm">5 Million</p>
|
|
<p className="w-[25%] text-sm">$2.50 per Million</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-2">
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Function invocations</p>
|
|
<p className="w-[25%] text-sm">2 Million</p>
|
|
<p className="w-[25%] text-sm">$2 per Million</p>
|
|
</div>
|
|
|
|
<div className="flex items-center px-4 py-1">
|
|
<p className="w-[50%] text-sm">Function count</p>
|
|
<p className="w-[25%] text-sm">100 functions</p>
|
|
<p className="w-[25%] text-sm">$10 per 100 functions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm">
|
|
See{' '}
|
|
<Link
|
|
href="https://supabase.com/pricing"
|
|
className="text-brand"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<span>pricing page</span>
|
|
</Link>{' '}
|
|
for a full overview.
|
|
</p>
|
|
</div>
|
|
</Modal.Content>
|
|
<Modal.Separator />
|
|
<Modal.Content>
|
|
<div className="flex items-center gap-2">
|
|
<Button block type="primary" onClick={() => onHide()}>
|
|
Understood
|
|
</Button>
|
|
</div>
|
|
</Modal.Content>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default SpendCapModal
|