konnosDashboard
LogDrainsEmpty.tsx77 lines · main
1import { IS_PLATFORM } from 'common'
2import Link from 'next/link'
3import { Button, Card, cn } from 'ui'
4
5import { AnimatedLogos } from './AnimatedLogos'
6import { VoteLink } from './VoteLink'
7import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
8import { DOCS_URL } from '@/lib/constants'
9
10export const LogDrainsEmpty = () => {
11 const items = [
12 {
13 step: 1,
14 title: 'Pricing',
15 description:
16 'Log Drains are available as a project Add-On for all Pro, Team, and Enterprise users. Each Log Drain costs $60 per month.',
17 label: 'See our pricing',
18 link: `${DOCS_URL}/guides/platform/manage-your-usage/log-drains`,
19 },
20 {
21 step: 2,
22 title: 'Connect to your drain',
23 description:
24 'We offer support for multiple destinations including Datadog, Loki, Sentry or a custom endpoint.',
25 label: 'Read our documentation',
26 link: `${DOCS_URL}/guides/telemetry/log-drains`,
27 },
28 ].filter((item) => IS_PLATFORM || item.title !== 'Pricing')
29
30 return (
31 <div className="flex grow h-full">
32 <div className="flex grow items-center justify-center p-12 @container">
33 <div className="w-full max-w-4xl flex flex-col items-center gap-0">
34 <div className="text-center mb-12">
35 <AnimatedLogos />
36 <h2 className="heading-section mb-1">Capture your logs, your way</h2>
37 <p className="text-foreground-light mb-6">
38 Upgrade to a Pro, Team or Enterprise Plan to send your logs to your preferred platform
39 </p>
40 {/* This should only be shown to free tier users so upgrade to Pro makes sense */}
41 <UpgradePlanButton
42 plan="Pro"
43 source="log-drains-empty-state"
44 featureProposition="use Log Drains"
45 />
46 </div>
47 <Card
48 className={cn('grid grid-cols-1 bg divide-x mb-8', IS_PLATFORM && '@xl:grid-cols-2')}
49 >
50 {items.map((item, i) => (
51 <div className="flex flex-col h-full p-6" key={i}>
52 <div className="flex items-center gap-3 mb-2">
53 <span
54 className={cn(
55 'text-xs shrink-0 font-mono text-foreground-light w-7 h-7 bg border flex items-center justify-center rounded-md',
56 !IS_PLATFORM && 'hidden'
57 )}
58 >
59 {item.step}
60 </span>
61 <h3 className="heading-default">{item.title}</h3>
62 </div>
63 <p className="text-foreground-light text-sm mb-4 flex-1">{item.description}</p>
64 <Button type="default" className="w-full" asChild>
65 <Link href={item.link} target="_blank">
66 {item.label}
67 </Link>
68 </Button>
69 </div>
70 ))}
71 </Card>
72 <VoteLink />
73 </div>
74 </div>
75 </div>
76 )
77}