Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mastodon
GitHub Repository: mastodon/joinmastodon
 Path: blob/main/components/donate/DonateWrapper.tsx
1006 views
1
import classNames from "classnames"

2
import Head from "next/head"

3
import Image from "next/image"

4
import { useLayoutEffect, useState } from "react"

5


6
import { Theme } from "../../donate/types"

7
import { isInIframe } from "../../donate/utils"

8


9
import heroDesktopImage from "../../public/illustrations/default_hero_desktop.png"

10
import heroMobileImage from "../../public/illustrations/default_hero_mobile.png"

11


12
interface DonateWrapperProps {

13
  children: React.ReactNode

14
  className?: string

15
  theme: Theme

16
  belowModal?: React.ReactNode

17
}

18


19
export function DonateWrapper({

20
  children,

21
  className,

22
  theme = "auto",

23
  belowModal,

24
}: DonateWrapperProps) {

25
  // This is done this way to avoid hydration errors.

26
  // See: https://nextjs.org/docs/messages/react-hydration-error

27
  const [isClient, setIsClient] = useState(false)

28
  useLayoutEffect(() => {

29
    setIsClient(isInIframe())

30
  }, [])

31


32
  if (isClient) {

33
    return (

34
      <div

35
        className={classNames(

36
          "bg-white dark:bg-black min-h-screen flex flex-col",

37
          theme,

38
          className

39
        )}

40
      >

41
        {children}

42
      </div>

43
    )

44
  }

45


46
  return (

47
    <main

48
      className={classNames(

49
        theme,

50
        "min-h-screen dark:bg-black overflow-hidden relative px-4"

51
      )}

52
    >

53
      <div

54
        className={classNames(

55
          "w-full max-w-md mx-auto mt-20 flex flex-col relative z-10",

56
          "bg-white dark:bg-black text-black dark:text-white dark:border dark:border-gray-0 rounded-lg overflow-hidden drop-shadow-lg",

57
          className

58
        )}

59
      >

60
        {children}

61
      </div>

62
      {belowModal}

63


64
      <div className="fixed top-0 left-0">

65
        <Image

66
          src={heroDesktopImage}

67
          alt=""

68
          role="presentation"

69
          className="hidden xl:block"

70
          objectFit="cover"

71
          objectPosition="center bottom"

72
          placeholder="empty"

73
        />

74
        <Image

75
          src={heroMobileImage}

76
          alt=""

77
          role="presentation"

78
          className="block xl:hidden"

79
          objectFit="cover"

80
          objectPosition="center bottom"

81
          placeholder="empty"

82
        />

83
      </div>

84


85
      <Head>

86
        <title>Donate - Mastodon</title>

87
      </Head>

88
    </main>

89
  )

90
}

91


92