Update Rooms.tsx

This commit is contained in:
Arjun Patel
2022-01-17 15:59:02 -08:00
parent 7c2f3c1061
commit 95ee81458a
+53 -51
View File
@@ -21,7 +21,7 @@ import { Collections } from "../../services/collections";
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext"; import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
import Room, { RoomStatus, RoomType } from "../../models/room"; import Room, { RoomStatus, RoomType } from "../../models/room";
import { useAuth } from "../../contexts/authContext"; import { useAuth } from "../../contexts/authContext";
import { Dropdown, Menu, Radio } from "antd"; import { Dropdown, Menu, Radio, Tooltip } from "antd";
import RoomCard from "../RoomCard"; import RoomCard from "../RoomCard";
enum RoomTypeFilter { enum RoomTypeFilter {
@@ -185,61 +185,63 @@ export default function DashboardRoom() {
<CreateRoom /> <CreateRoom />
{/* header */} {/* header */}
<span className="flex flex-row justify-end space-x-3 pb-5 items-center"> <Tooltip title={" archive rooms to keep your team focused"}>
<span className="flex flex-col mr-auto"> <span className="flex flex-row justify-end space-x-3 pb-5 items-center">
<span className="text-white "> <span className="flex flex-col mr-auto">
Rooms <span className="text-white ">
<button Rooms
className="right-1 rounded-lg py-1 px-2 ml-1 <button
className="right-1 rounded-lg py-1 px-2 ml-1
shadow-md text-center text-white text-sm font-bold" shadow-md text-center text-white text-sm font-bold"
> >
CTRL + Q CTRL + Q
</button> </button>
</span>
<span className="text-gray-300 text-xs">
archive rooms to keep your team focused
</span>
</span>
<Radio.Group
value={selectedTabPane}
onChange={(e) => setSelectedTabPane(e.target.value)}
>
<Radio.Button value={RoomTypeFilter.all}>
{RoomTypeFilter.all}{" "}
<span className="text-xs text-orange-500">{allRooms.length}</span>
</Radio.Button>
<Radio.Button value={RoomTypeFilter.me}>
{RoomTypeFilter.me}{" "}
<span className="text-xs text-orange-500">{meRooms.length}</span>
</Radio.Button>
<Radio.Button value={RoomTypeFilter.live}>
{RoomTypeFilter.live}{" "}
<span className="text-xs text-orange-500">{liveRooms.length}</span>
</Radio.Button>
<Radio.Button value={RoomTypeFilter.archived}>
{RoomTypeFilter.archived}{" "}
<span className="text-xs text-orange-500">
{archivedRooms.length}
</span> </span>
</Radio.Button> <span className="text-gray-300 text-xs"></span>
</Radio.Group>
<Dropdown overlay={TimePeriodFilterMenu}>
<span className="text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
Week <FaAngleDown />
</span> </span>
</Dropdown>
<button <Radio.Group
onClick={() => handleModalType(ShowModalType.createRoom)} value={selectedTabPane}
className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40" onChange={(e) => setSelectedTabPane(e.target.value)}
> >
<FaPlus className="text-lg text-white" /> <Radio.Button value={RoomTypeFilter.all}>
</button> {RoomTypeFilter.all}{" "}
<span className="text-xs text-orange-500">{allRooms.length}</span>
</Radio.Button>
<Radio.Button value={RoomTypeFilter.me}>
{RoomTypeFilter.me}{" "}
<span className="text-xs text-orange-500">{meRooms.length}</span>
</Radio.Button>
<Radio.Button value={RoomTypeFilter.live}>
{RoomTypeFilter.live}{" "}
<span className="text-xs text-orange-500">
{liveRooms.length}
</span>
</Radio.Button>
<Radio.Button value={RoomTypeFilter.archived}>
{RoomTypeFilter.archived}{" "}
<span className="text-xs text-orange-500">
{archivedRooms.length}
</span>
</Radio.Button>
</Radio.Group>
<BsThreeDots className="text-xl text-white" /> <Dropdown overlay={TimePeriodFilterMenu}>
</span> <span className="text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
Week <FaAngleDown />
</span>
</Dropdown>
<button
onClick={() => handleModalType(ShowModalType.createRoom)}
className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
>
<FaPlus className="text-lg text-white" />
</button>
<BsThreeDots className="text-xl text-white" />
</span>
</Tooltip>
{/* all rooms */} {/* all rooms */}
<span className="flex flex-row flex-wrap max-h-96 overflow-auto"> <span className="flex flex-row flex-wrap max-h-96 overflow-auto">