Fixes for www.

apps/www/components/Enterprise/Performance.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import UsersGrowthChart from '~/components/UsersGrowthChart'
 
 interface Props {
   id: string
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
   highlights: Highlight[]
 }
 

apps/www/components/Enterprise/Security.tsx

@@ -1,14 +1,14 @@
-import React, { FC } from 'react'
-import { TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
-
 import type { LucideIcon } from 'lucide-react'
+import { FC, ReactElement } from 'react'
+import { TextLink } from 'ui'
+
+import SectionContainer from '~/components/Layouts/SectionContainer'
 
 export interface SecuritySectionProps {
   id: string
-  label: string | JSX.Element
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  label: string | ReactElement
+  heading: string | ReactElement
+  subheading: string | ReactElement
   features: FeatureProps[]
   cta: {
     label: string
@@ -19,7 +19,7 @@ export interface SecuritySectionProps {
 export type Story = {
   url: string
   heading: string
-  subheading: string | JSX.Element
+  subheading: string | ReactElement
 }
 
 type FeatureProps = {

apps/www/components/Enterprise/Support.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import { cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -7,8 +7,8 @@ import type { LucideIcon } from 'lucide-react'
 
 interface Props {
   id: string
-  label?: string | JSX.Element
-  heading: string | JSX.Element
+  label?: string | ReactElement
+  heading: string | ReactElement
   features: Feature[]
 }
 

apps/www/components/Enterprise/UseCases.tsx

@@ -1,20 +1,19 @@
 import 'swiper/css'
 
-import React, { FC } from 'react'
-import { Swiper, SwiperSlide } from 'swiper/react'
+import type { LucideIcon } from 'lucide-react'
+import Image from 'next/image'
 import Link from 'next/link'
+import { FC, ReactElement } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
 
 import { TextLink } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import Panel from '~/components/Panel'
 
-import type { LucideIcon } from 'lucide-react'
-import Image from 'next/image'
-
 interface Props {
   id: string
-  label?: string | JSX.Element
-  heading?: string | JSX.Element
+  label?: string | ReactElement
+  heading?: string | ReactElement
   stories?: Story[]
   highlights?: Highlight[]
 }
@@ -24,7 +23,7 @@ export type Story = {
   url: string
   target?: '_blank' | string
   heading?: string
-  subheading?: string | JSX.Element
+  subheading?: string | ReactElement
 }
 
 type Highlight = {

apps/www/components/EnterpriseFormQuotes.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
 import { AnimatePresence, motion, useAnimation } from 'framer-motion'
+import { ReactElement, useEffect, useState } from 'react'
 import { cn } from 'ui'
 
 interface TabProps {
-  label: string | JSX.Element
+  label: string | ReactElement
   isActive: boolean
   onClick: VoidFunction
 }
@@ -22,9 +22,9 @@ const Tab = ({ isActive, label, onClick }: TabProps) => (
 )
 
 interface Tab {
-  label: string | JSX.Element
+  label: string | ReactElement
   paragraph?: string
-  panel: JSX.Element
+  panel: ReactElement
 }
 
 interface Props {

apps/www/components/Globe.tsx

@@ -1,11 +1,11 @@
 import createGlobe from 'cobe'
-import { useCallback, useEffect, useRef } from 'react'
-import { useTheme } from 'next-themes'
 import { debounce } from 'lib/helpers'
+import { useTheme } from 'next-themes'
+import { useCallback, useEffect, useRef } from 'react'
 
 const Globe = () => {
   const { resolvedTheme } = useTheme()
-  const canvasRef = useRef<any>()
+  const canvasRef = useRef<any>(null)
 
   let rotation: number = 0
   let width: number = 0

apps/www/components/LaunchWeek/15/LW15MainStage.tsx

@@ -1,21 +1,21 @@
-import 'swiper/css'
-import 'swiper/css/a11y'
-import 'swiper/css/navigation'
-import 'swiper/css/controller'
-import React, { useEffect, useRef, useState } from 'react'
+import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Button, cn } from 'ui'
-import { useTheme } from 'next-themes'
+import React, { useEffect, useRef, useState } from 'react'
+import 'swiper/css'
+import 'swiper/css/a11y'
+import 'swiper/css/controller'
+import 'swiper/css/navigation'
+import { A11y, Controller, Navigation } from 'swiper/modules'
 import { Swiper, SwiperClass, SwiperRef, SwiperSlide } from 'swiper/react'
-import { Controller, Navigation, A11y } from 'swiper/modules'
+import { Button, cn } from 'ui'
 
-import SectionContainer from 'components/Layouts/SectionContainer'
-import { mainDays, WeekDayProps } from './data'
-import { useWindowSize } from 'react-use'
 import { useBreakpoint } from 'common'
-import { DayLink } from './lw15.components'
+import SectionContainer from 'components/Layouts/SectionContainer'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useWindowSize } from 'react-use'
+import { mainDays, WeekDayProps } from './data'
+import { DayLink } from './lw15.components'
 
 const LW15MainStage = ({ className }: { className?: string }) => {
   const { resolvedTheme } = useTheme()
@@ -181,7 +181,7 @@ const CardBG = ({ day }: { day: WeekDayProps }) => (
 interface Props {
   className?: string
   slides: WeekDayProps[]
-  swiperRef: React.RefObject<SwiperRef>
+  swiperRef: React.RefObject<SwiperRef | null>
   setControlledSwiper: (swiper: SwiperClass) => void
   controlledSwiper: SwiperClass | null
 }

apps/www/components/LaunchWeek/15/Ticketing/LW15TicketShare.tsx

@@ -5,8 +5,8 @@ import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 import { Button } from 'ui'
-import useConfData from '../hooks/use-conf-data'
 import { LW15_TWEET_TEXT, LW15_URL } from '~/lib/constants'
+import useConfData from '../hooks/use-conf-data'
 import supabase from '../supabase'
 
 export default function LW15TicketShare() {
@@ -17,7 +17,7 @@ export default function LW15TicketShare() {
   const [_imgReady, setImgReady] = useState(false)
   const [_loading, setLoading] = useState(false)
   const isLessThanMd = useBreakpoint()
-  const downloadLink = useRef<HTMLAnchorElement>()
+  const downloadLink = useRef<HTMLAnchorElement>(null)
   const link = `${LW15_URL}/tickets/${username}?lw=15&t=${dayjs(new Date()).format('DHHmmss')}`
   const permalink = encodeURIComponent(link)
   const text = LW15_TWEET_TEXT
@@ -38,7 +38,7 @@ export default function LW15TicketShare() {
       setLoading(false)
       if (downloadLink.current) {
         downloadLink.current.click()
-        downloadLink.current = undefined
+        downloadLink.current = null
       }
     }
   }, [downloadUrl])

apps/www/components/Modules/Cron/CronSQLSection.tsx

@@ -1,9 +1,8 @@
-import React, { FC } from 'react'
-import type { LucideIcon } from 'lucide-react'
+import { FC, type ReactElement } from 'react'
 
 import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
 import CodeWindow from '~/components/CodeWindow'
+import SectionContainer from '~/components/Layouts/SectionContainer'
 
 const codeSnippet = `
 select
@@ -15,9 +14,9 @@ select
 `
 interface Props {
   id: string
-  label: string | JSX.Element
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  label: string | ReactElement
+  heading: string | ReactElement
+  subheading: string | ReactElement
   className?: string
   cta?: {
     label: string

apps/www/components/Modules/Queues/QueuesAPISection.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
 import CodeWindow from '~/components/CodeWindow'
+import SectionContainer from '~/components/Layouts/SectionContainer'
 
 const codeSnippet = `const queues = createClient(supabaseUrl, supabaseKey, {
     db: { schema: "pgmq_public" },
@@ -21,9 +21,9 @@ const message = await queues.rpc("pop", {
 
 interface Props {
   id: string
-  label: string | JSX.Element
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  label: string | ReactElement
+  heading: string | ReactElement
+  subheading: string | ReactElement
   className?: string
   cta?: {
     label: string

apps/www/components/Modules/Queues/QueuesSQLSection.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import { cn, TextLink } from 'ui'
-import SectionContainer from '~/components/Layouts/SectionContainer'
 import CodeWindow from '~/components/CodeWindow'
+import SectionContainer from '~/components/Layouts/SectionContainer'
 
 const codeSnippet = `
 select pgmq.create('my_special_queue');
@@ -16,9 +16,9 @@ select * from pgmq.pop('my_special_queue');
 `
 interface Props {
   id: string
-  label: string | JSX.Element
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  label: string | ReactElement
+  heading: string | ReactElement
+  subheading: string | ReactElement
   className?: string
   cta?: {
     label: string

apps/www/components/Pricing/PricingAddOnTable.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames'
-import { Fragment, useMemo, useState } from 'react'
+import { ChevronUp } from 'lucide-react'
+import { Fragment, ReactElement, useMemo, useState } from 'react'
 import { Collapsible } from 'ui'
 import { Check } from './PricingIcons'
-import { ChevronUp } from 'lucide-react'
 
 interface PricingAddOnTableProps {
   pricing: {
@@ -16,7 +16,7 @@ interface PricingAddOnTableProps {
       }[]
     }[]
   }
-  icon: JSX.Element
+  icon: ReactElement
 }
 
 const PricingAddOnTable = ({ icon, pricing }: PricingAddOnTableProps) => {

apps/www/components/Products/VectorAI/DeployGlobally.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { useTheme } from 'next-themes'
+import React, { useRef } from 'react'
 
 function getRandomNumber(min: number, max: number) {
   var range = max - min
@@ -10,7 +10,7 @@ function getRandomNumber(min: number, max: number) {
 
 const DeployGlobally = ({ isHovered }: { isHovered: boolean }) => {
   const { resolvedTheme } = useTheme()
-  const ref = React.useRef<any>()
+  const ref = useRef<any>(null)
   const states = ['1', '2', '3']
   const colors = {
     green: resolvedTheme?.includes('dark') ? '#1CF7C3' : '#00B99F',

apps/www/components/Products/VectorAI/PGvectorImg.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react'
-import { useTheme } from 'next-themes'
-import { DEFAULT_EASE } from '~/lib/animations'
 import { LazyMotion, domAnimation, m } from 'framer-motion'
+import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
+import { DEFAULT_EASE } from '~/lib/animations'
 
 const PGvectorImg = ({ isHovered }: { isHovered: boolean }) => {
   const { resolvedTheme } = useTheme()
-  const svgRef = useRef<any>()
+  const svgRef = useRef<any>(null)
 
   const colors = {
     circles1: resolvedTheme?.includes('dark') ? '#105C3B' : '#008B4F',

apps/www/components/Products/VectorAI/SecureAndScalableImg.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react'
 import { useTheme } from 'next-themes'
+import { useEffect, useRef } from 'react'
 import { DEFAULT_EASE } from '~/lib/animations'
 
 const SecureAndScalableImg = ({ isHovered }: { isHovered: boolean }) => {
   const { resolvedTheme } = useTheme()
-  const shieldsRef = useRef<any>()
-  const mainRef = useRef<any>()
+  const shieldsRef = useRef<any>(null)
+  const mainRef = useRef<any>(null)
 
   const colors = {
     shieldsStroke: resolvedTheme?.includes('dark') ? '#494949' : '#D5D5D5',

apps/www/components/Sections/FeaturesSection.tsx

@@ -2,7 +2,7 @@ import { LazyMotion, domAnimation, m, useInView } from 'framer-motion'
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode, useRef } from 'react'
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+import ReactMarkdown from 'react-markdown'
 import { Button, cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { INITIAL_BOTTOM, getAnimation } from '~/lib/animations'

apps/www/components/Sections/ImageParagraphSection.tsx

@@ -1,13 +1,13 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import { cn, TextLink } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 
 interface Props {
   id: string
-  label: string | JSX.Element
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  label: string | ReactElement
+  heading: string | ReactElement
+  subheading: string | ReactElement
   image?: any
   className?: string
   cta?: {

apps/www/components/Sections/ParagraphSection.tsx

@@ -1,7 +1,7 @@
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode } from 'react'
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+import ReactMarkdown from 'react-markdown'
 import { Button, cn } from 'ui'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 

apps/www/components/Sections/SingleQuote.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 import { cn } from 'ui'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -17,9 +17,9 @@ interface Props {
 type Quote = {
   text: string
   author: string
-  logo?: string | JSX.Element
+  logo?: string | ReactElement
   role: string
-  avatar?: string | JSX.Element
+  avatar?: string | ReactElement
   link?: string
 }
 

apps/www/components/Sections/TimedAccordionSection.tsx

@@ -1,10 +1,10 @@
 import 'swiper/css'
 
-import React, { useState, useEffect, useRef } from 'react'
-import { LazyMotion, domAnimation, m, useAnimation, useInView } from 'framer-motion'
-import { cn } from 'ui'
-import { Swiper, SwiperSlide } from 'swiper/react'
 import { useBreakpoint } from 'common'
+import { LazyMotion, domAnimation, m, useAnimation, useInView } from 'framer-motion'
+import React, { ReactElement, useEffect, useRef, useState } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { cn } from 'ui'
 
 interface TabProps {
   label: string | React.ReactNode
@@ -68,7 +68,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }
 interface Tab {
   label: string | React.ReactNode
   paragraph?: string | React.ReactNode
-  panel?: JSX.Element
+  panel?: ReactElement
   code?: string
 }
 

apps/www/components/Sections/TimedTabsSection.tsx

@@ -1,14 +1,14 @@
 import 'swiper/css'
 
 import { AnimatePresence, motion, useAnimation } from 'framer-motion'
+import { ArrowUpRight } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactElement, ReactNode, useEffect, useState } from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Button } from 'ui'
 import CodeBlock from '~/components/CodeBlock/CodeBlock'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import { ArrowUpRight } from 'lucide-react'
 
 interface TabProps {
   label: string
@@ -58,7 +58,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }
 interface Tab {
   label: string
   paragraph?: string
-  panel?: JSX.Element
+  panel?: ReactElement
   colabUrl: string
   code?: string
 }

apps/www/components/Solutions/ResultsSection.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import UsersGrowthChart from '~/components/UsersGrowthChart'
 
 export interface ResultsSectionProps {
   id: string
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
   highlights: Highlight[]
 }
 

apps/www/components/Solutions/Videos.tsx

@@ -1,13 +1,13 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import Panel from '../Panel'
 import type { Testimonials } from '~/data/solutions/solutions.utils'
+import Panel from '../Panel'
 
 export type Story = {
   url: string
   heading: string
-  subheading: string | JSX.Element
+  subheading: string | ReactElement
 }
 
 const EnterpriseSecurity: FC<Testimonials> = (props) => {

apps/www/components/Supasquad/PerfectTiming.tsx

@@ -1,12 +1,12 @@
-import React, { FC } from 'react'
+import { FC, ReactElement } from 'react'
 
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import UsersGrowthChart from '~/components/UsersGrowthChart'
 
 export interface PerfectTimingProps {
   id: string
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
   highlights: Highlight[]
 }
 

apps/www/data/MainProducts.tsx

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react'
 import { products } from 'shared-data'
 import { PRODUCT_NAMES, PRODUCT_SHORTNAMES } from 'shared-data/products'
 
@@ -5,7 +6,7 @@ export type ProductType = {
   [key: string]: {
     name: string
     icon: string
-    description: string | JSX.Element
+    description: string | ReactElement
     description_short: string
     label: string
     url: string

apps/www/data/open-source/contributing/supasquad.utils.tsx

@@ -1,7 +1,7 @@
 import { useBreakpoint } from 'common'
 import { LucideIcon } from 'lucide-react'
 import Link from 'next/link'
-import type { ComponentType, SVGProps } from 'react'
+import type { ComponentType, ReactElement, SVGProps } from 'react'
 import { cn } from 'ui'
 import z from 'zod'
 
@@ -43,9 +43,9 @@ export interface Metadata {
 export interface HeroSection {
   id: string
   title: string
-  h1: JSX.Element
-  subheader: JSX.Element[]
-  image: JSX.Element
+  h1: ReactElement
+  subheader: ReactElement[]
+  image: ReactElement
   className?: string
   sectionContainerClassName?: string
   icon?: string
@@ -66,7 +66,7 @@ export interface Quote {
   icon?: string
   author: string
   authorTitle?: string
-  quote: JSX.Element
+  quote: ReactElement
   avatar: string
 }
 
@@ -77,8 +77,8 @@ export interface Quotes {
 
 export interface Highlight {
   icon?: IconType
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
   url?: string
 }
 
@@ -86,16 +86,16 @@ export interface Feature {
   id?: string
   icon?: string
   iconNoStroke?: boolean
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
-  img?: JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
+  img?: ReactElement
 }
 
 export interface FeaturesSection {
   id: string
   label?: string
-  heading: JSX.Element
-  subheading?: string | JSX.Element
+  heading: ReactElement
+  subheading?: string | ReactElement
   features: Feature[]
   className?: string
   // {
@@ -106,7 +106,7 @@ export interface FeaturesSection {
 export interface Testimonials {
   id: string
   label: string
-  heading: JSX.Element
+  heading: ReactElement
   videos: {
     [key: string]: {
       url: string
@@ -117,7 +117,7 @@ export interface Testimonials {
 export interface CTASection {
   id: string
   label: string
-  heading: JSX.Element | string
+  heading: ReactElement | string
   subheading: string
   cta: {
     label: string

apps/www/data/solutions/solutions.utils.tsx

@@ -1,7 +1,7 @@
 import { useBreakpoint } from 'common'
 import { LucideIcon } from 'lucide-react'
 import Link from 'next/link'
-import type { ComponentType, SVGProps } from 'react'
+import type { ComponentType, ReactElement, SVGProps } from 'react'
 import { cn } from 'ui'
 
 export type HeroIcon = ComponentType<SVGProps<SVGSVGElement>>
@@ -15,9 +15,9 @@ export interface Metadata {
 export interface HeroSection {
   id: string
   title: string
-  h1: JSX.Element
-  subheader: JSX.Element[]
-  image: JSX.Element | undefined
+  h1: ReactElement
+  subheader: ReactElement[]
+  image: ReactElement | undefined
   className?: string
   sectionContainerClassName?: string
   icon?: string
@@ -38,7 +38,7 @@ export interface Quote {
   icon?: string
   author: string
   authorTitle?: string
-  quote: JSX.Element
+  quote: ReactElement
   avatar: string
 }
 
@@ -49,8 +49,8 @@ export interface Quotes {
 
 export interface Highlight {
   icon?: IconType
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
   url?: string
 }
 
@@ -58,15 +58,15 @@ export interface Feature {
   id?: string
   icon?: IconType | string
   iconNoStroke?: boolean
-  heading: string | JSX.Element
-  subheading: string | JSX.Element
-  img?: JSX.Element
+  heading: string | ReactElement
+  subheading: string | ReactElement
+  img?: ReactElement
 }
 
 export interface FeaturesSection {
   id: string
   label?: string
-  heading: JSX.Element
+  heading: ReactElement
   subheading?: string
   features: Feature[]
   // {
@@ -77,7 +77,7 @@ export interface FeaturesSection {
 export interface Testimonials {
   id: string
   label: string
-  heading: JSX.Element
+  heading: ReactElement
   videos: {
     [key: string]: {
       url: string
@@ -88,7 +88,7 @@ export interface Testimonials {
 export interface CTASection {
   id: string
   label: string
-  heading: JSX.Element | string
+  heading: ReactElement | string
   subheading: string
   cta: {
     label: string

apps/www/pages/assistant.tsx

@@ -4,7 +4,7 @@ import { NextSeo } from 'next-seo'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import { Button } from 'ui'
 import DotGrid from '~/components/AIDemo/DotGrid'
 import { AIDemoPanel } from '~/components/AIDemo/Panel'
@@ -17,9 +17,9 @@ const SectionContainer = dynamic(() => import('~/components/Layouts/SectionConta
 interface Message {
   id: string
   role: 'user' | 'assistant'
-  content: string | JSX.Element
+  content: string | ReactElement
   createdAt: Date
-  render?: JSX.Element
+  render?: ReactElement
 }
 
 const welcomeMessages = [

apps/www/pages/partners/integrations/[slug].tsx

@@ -38,7 +38,7 @@ function mdxComponents(callback: Dispatch<SetStateAction<string | null>>) {
     img: (
       props: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
     ) => {
-      return <img {...props} onClick={() => callback(props.src!)} />
+      return <img {...props} onClick={() => callback(props.src! as string)} />
     },
   }