konnosDashboard
BannerFreeMicroUpgrade.tsx69 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { useParams } from 'common/hooks'
3import Link from 'next/link'
4import { Button } from 'ui'
5import { ComputeBadge } from 'ui-patterns/ComputeBadge'
6
7import { BannerCard } from '../BannerCard'
8import { BANNER_ID, useBannerStack } from '../BannerStackProvider'
9import { ChevronsUpAnimated } from '@/components/ui/ComputeBadgeWrapper'
10import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
11import { useTrack } from '@/lib/telemetry/track'
12
13export const BannerFreeMicroUpgrade = () => {
14 const { ref } = useParams()
15 const track = useTrack()
16 const { dismissBanner } = useBannerStack()
17 const [, setIsDismissed] = useLocalStorageQuery(
18 LOCAL_STORAGE_KEYS.FREE_MICRO_UPGRADE_BANNER_DISMISSED(ref ?? ''),
19 false
20 )
21
22 return (
23 <BannerCard
24 onDismiss={() => {
25 setIsDismissed(true)
26 dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
27 track('free_micro_upgrade_banner_dismissed')
28 }}
29 >
30 <div className="flex flex-col gap-y-4">
31 <div className="flex flex-col gap-y-2 items-start">
32 <div className="animate-badge-pulse">
33 <div className="relative inline-flex overflow-hidden rounded-sm">
34 <ComputeBadge
35 infraComputeSize="nano"
36 icon={<ChevronsUpAnimated />}
37 className="text-brand-600 border-brand-500 bg-brand/10 gap-1"
38 />
39 <span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-linear-to-br from-transparent via-brand/20 to-transparent blur-md" />
40 </div>
41 </div>
42 </div>
43 <div className="flex flex-col gap-y-1 mb-2">
44 <p className="text-sm font-medium">Project low on resources</p>
45 <p className="text-xs text-foreground-lighter text-balance">
46 Your Nano compute is approaching its limits. Your Pro plan includes a free upgrade to
47 Micro — double the memory at no extra cost.
48 </p>
49 </div>
50 <div className="flex gap-2">
51 <Button
52 type="primary"
53 size="tiny"
54 asChild
55 onClick={() => {
56 setIsDismissed(true)
57 dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
58 track('free_micro_upgrade_banner_cta_clicked')
59 }}
60 >
61 <Link href={`/project/${ref}/settings/compute-and-disk?upgrade=micro`}>
62 Upgrade for free
63 </Link>
64 </Button>
65 </div>
66 </div>
67 </BannerCard>
68 )
69}