CourseMate/web/components/BottomBar.tsx at c171119c5bdd9a08b7aec5a5db78929fba4fa78d · ut-code/CourseMate · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import Link from "next/link";
import {
  MdHome,
  MdOutlineChat,
  MdOutlinePersonSearch,
  MdOutlineSettings,
  MdPeopleOutline,
  MdPersonSearch,
} from "react-icons/md";
import { MdPeople } from "react-icons/md";
import { MdChat } from "react-icons/md";
import { MdSettings } from "react-icons/md";
import { MdOutlineHome } from "react-icons/md";

type Props = {
  activeTab: "0_home" | "1_friends" | "2_search" | "3_chat" | "4_settings";
};

function BottomBarCell({
  href,
  iconComponent,
}: {
  href: string;
  iconComponent: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className="flex flex-1 justify-center py-3 text-primary focus:bg-gray-300"
    >
      {iconComponent}
    </Link>
  );
}

export default function BottomBar(props: Props) {
  const { activeTab } = props;
  return (
    <div
      className="fixed bottom-0 z-30 flex w-full flex-row items-center justify-around border-gray-200 border-t bg-white"
      style={{
        height: "calc(3rem + env(safe-area-inset-bottom))",
        paddingBottom: "env(safe-area-inset-bottom)",
      }}
    >
      <BottomBarCell
        href="/home"
        iconComponent={
          activeTab === "0_home" ? (
            <MdHome className="text-3xl" />
          ) : (
            <MdOutlineHome className="text-3xl" />
          )
        }
      />
      <BottomBarCell
        href="/friends"
        iconComponent={
          activeTab === "1_friends" ? (
            <MdPeople className="text-3xl" />
          ) : (
            <MdPeopleOutline className="text-3xl" />
          )
        }
      />
      <BottomBarCell
        href="/search"
        iconComponent={
          activeTab === "2_search" ? (
            <MdPersonSearch className="text-3xl" />
          ) : (
            <MdOutlinePersonSearch className="text-3xl " />
          )
        }
      />
      <BottomBarCell
        href="/chat"
        iconComponent={
          activeTab === "3_chat" ? (
            <MdChat className="text-3xl" />
          ) : (
            <MdOutlineChat className="text-3xl" />
          )
        }
      />
      <BottomBarCell
        href="/settings"
        iconComponent={
          activeTab === "4_settings" ? (
            <MdSettings className="text-3xl" />
          ) : (
            <MdOutlineSettings className="text-3xl" />
          )
        }
      />
    </div>
  );
}