rescript-lang.org/src/components/Footer.res at ee6134049de458eefebf50f016379344e3ee1468 · rescript-lang/rescript-lang.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
module Section = {
  @react.component
  let make = (~title, ~children) => {
    <div>
      <span className="block text-gray-60 tracking-wide text-14 uppercase mb-4">
        {React.string(title)}
      </span>
      children
    </div>
  }
}

@react.component
let make = () => {
  let linkClass = "hover:underline hover:pointer"
  let iconLink = "hover:pointer hover:text-gray-60-tr"
  let copyrightYear = Date.make()->Date.getFullYear->Int.toString

  <footer className="flex justify-center border-t border-gray-10">
    <div
      className="flex flex-col md:flex-row justify-between max-w-1280 w-full px-8 py-16 text-gray-80 ">
      <div>
        <img className="w-40 mb-5" src="/static/rescript_logo_black.svg" />
        <div className="text-16">
          <p> {React.string(`© ${copyrightYear} The ReScript Project`)} </p>
        </div>
      </div>
      <div
        className="flex flex-col space-y-16 md:flex-row mt-16 md:mt-0 md:ml-16 md:space-y-0 md:space-x-16">
        <Section title="About">
          <ul className="text-16 text-gray-80-tr space-y-2">
            <li>
              <Next.Link href="/community" className={linkClass}>
                {React.string("Community")}
              </Next.Link>
            </li>
            <li>
              <Next.Link href="/community/association" className={linkClass}>
                {React.string("ReScript Association")}
              </Next.Link>
            </li>
            <li>
              <Next.Link href="/community/donate" className={linkClass}>
                {React.string("Donate")}
              </Next.Link>
            </li>
          </ul>
        </Section>
        <Section title="Find us on">
          <div className="flex space-x-3 text-gray-100">
            <a className=iconLink rel="noopener noreferrer" href=Constants.githubHref>
              <Icon.GitHub className="w-6 h-6" />
            </a>
            <a className=iconLink rel="noopener noreferrer" href=Constants.xHref>
              <Icon.X className="w-6 h-6" />
            </a>
            <a className=iconLink rel="noopener noreferrer" href=Constants.blueSkyHref>
              <Icon.Bluesky className="w-6 h-6" />
            </a>
            <a className=iconLink rel="noopener noreferrer" href=Constants.discourseHref>
              <Icon.Discourse className="w-6 h-6" />
            </a>
          </div>
        </Section>
      </div>
    </div>
  </footer>
}

let make = React.memo(make)