konnosDashboard
DiscordCTACard.tsx82 lines · main
1import { AnimatePresence, motion } from 'framer-motion'
2import Link from 'next/link'
3import router from 'next/router'
4import { useEffect, useState } from 'react'
5import SVG from 'react-inlinesvg'
6import { Button } from 'ui'
7
8import { NO_ORG_MARKER } from './SupportForm.utils'
9import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
10
11interface DiscordCTACardProps {
12 organizationSlug?: string | null
13}
14
15export const DiscordCTACard = ({ organizationSlug }: DiscordCTACardProps) => {
16 const { data: organizations } = useOrganizationsQuery()
17 const [isVisible, setIsVisible] = useState(false)
18
19 const selectedOrg = organizations?.find((org) => org.slug === organizationSlug)
20 const isFreePlan = selectedOrg?.plan.id === 'free'
21
22 useEffect(() => {
23 const timer = setTimeout(() => setIsVisible(true), 800)
24 return () => clearTimeout(timer)
25 }, [])
26
27 return (
28 <AnimatePresence>
29 {isVisible && isFreePlan && organizationSlug !== NO_ORG_MARKER && (
30 <motion.aside
31 initial={{ height: 0, opacity: 0 }}
32 animate={{ height: 'auto', opacity: 1 }}
33 exit={{ height: 0, opacity: 0 }}
34 className="w-full overflow-hidden border border-transparent rounded-md relative"
35 style={{
36 background: '#404EED',
37 borderColor: 'color-mix(in srgb, #404EED 95%, #000000)',
38 }}
39 >
40 <div className="flex items-center p-6">
41 {/* Decorative background */}
42 <div
43 className="absolute inset-0 opacity-20 md:opacity-30"
44 style={{
45 backgroundImage: `url(${router.basePath}/img/support/discord-bg-small.jpg)`,
46 backgroundSize: '75%',
47 backgroundPosition: '112% 50%',
48 backgroundRepeat: 'no-repeat',
49 maskImage: 'linear-gradient(to left, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%)',
50 WebkitMaskImage: 'linear-gradient(to left, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%)',
51 }}
52 />
53 {/* Content */}
54 <div className="relative z-10">
55 <div className="flex flex-col gap-3">
56 <div>
57 <h5 className="text-sm font-medium text-white">Ask the Discord community</h5>
58 <p className="text-sm text-white/75">
59 Many code-related questions are answered within minutes.
60 </p>
61 </div>
62
63 <Link href="https://discord.supabase.com" target="_blank" rel="noreferrer">
64 <Button
65 size="tiny"
66 type="secondary"
67 icon={
68 <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
69 }
70 className="bg-white hover:bg-white/90" // Force white button on all color schemes
71 >
72 <span style={{ color: '#404EED' }}>Ask on Discord</span>
73 </Button>
74 </Link>
75 </div>
76 </div>
77 </div>
78 </motion.aside>
79 )}
80 </AnimatePresence>
81 )
82}