setting up basics of the links

2022-01-18 16:24:20 -08:00
parent 5686d0fcb8
commit bf180f8334
9 changed files with 390 additions and 14 deletions
@@ -1,3 +1,99 @@
+import { FaAngleDown, FaCheck, FaMicrophoneAlt, FaPlay } from "react-icons/fa";
+import { UserStatus } from "../../models/user";
+
+import Image from "next/image";
+
 export default function Announcements() {
-  return <span> this is the announcements</span>;
+  return (
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+      <span className="flex flex-row justify-start items-center pb-5">
+        <span className="flex flex-col mr-20">
+          <span className="text-white mr-auto">
+            ANNOUNCEMENTS
+            <button
+              className="right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-white text-sm font-bold"
+            >
+              CTRL + A
+            </button>
+          </span>
+          <span className="text-gray-300 text-xs">
+            updates, pep talks, blockers, reminders
+          </span>
+        </span>
+
+        {/* tab pane */}
+        <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
+          <span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
+            Active
+          </span>
+
+          <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+            Resolved
+          </span>
+        </span>
+
+        <span className="text-sm text-gray-300 flex flex-row items-center">
+          TODAY <FaAngleDown />
+        </span>
+
+        <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+          <FaMicrophoneAlt className="text-lg text-white" />
+        </button>
+        <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+          <FaPlay className="text-lg text-white" />
+        </button>
+      </span>
+
+      <div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
+        {/* adriana's announcement */}
+        <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+          <span className="relative mr-2 grid items-center justify-items-center">
+            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+            <Image
+              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"}
+              alt="profile"
+              width={50}
+              height={50}
+            />
+          </span>
+
+          <span className="flex flex-col items-baseline">
+            <span className="text-md font-bold text-white">Adriana</span>
+            <span className="text-xs text-gray-200">5 minutes ago</span>
+            <span className="text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center">
+              <span>blockers</span>
+            </span>
+          </span>
+        </span>
+
+        {/* arjun's announcement */}
+        <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center">
+          <span className="relative mr-2 grid items-center justify-items-center">
+            <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+            <Image
+              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
+              alt="profile"
+              width={50}
+              height={50}
+            />
+          </span>
+
+          <span className="flex flex-col items-baseline mr-5">
+            <span className="text-md font-bold text-white">Arjun</span>
+            <span className="text-xs text-gray-200">30 minutes ago</span>
+            <span className="text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center">
+              <span>engineering</span>
+            </span>
+          </span>
+
+          <button className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+            <FaCheck className="text-lg text-white" />
+          </button>
+        </span>
+      </div>
+    </section>
+  );
 }
@@ -1,3 +1,148 @@
+import { BsThreeDots } from "react-icons/bs";
+import {
+  FaAngleDown,
+  FaArchive,
+  FaAtlassian,
+  FaCode,
+  FaCopy,
+  FaExternalLinkAlt,
+  FaFilePdf,
+  FaLink,
+  FaPlus,
+} from "react-icons/fa";
+
+import Image from "next/image";
+import { Dropdown, Menu, Radio, Tooltip } from "antd";
+import {
+  ShowModalType,
+  useKeyboardContext,
+} from "../../contexts/keyboardContext";
+import CreateOrUpdateLink from "../Modals/CreateOrUpdateLink";
+import { useState } from "react";
+import LinkCard from "../LinkCard";
+
 export default function Links() {
-  return <span> this is the links</span>;
+  const { handleModalType } = useKeyboardContext();
+
+  const TimePeriodFilterMenu = (
+    <Menu>
+      <Menu.Item key={1} disabled>
+        Past 24 Hours (Coming Soon)
+      </Menu.Item>
+      <Menu.Item key={2} disabled>
+        This Month (Coming Soon)
+      </Menu.Item>
+    </Menu>
+  );
+
+  const [selectedTabPane, setSelectedTabPane] = useState<string>(
+    LinkTypeFilter.me
+  );
+
+  return (
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+      {/* header row */}
+      <Tooltip title={"archive unneeded links, keep yourself focused on today"}>
+        {/* modal */}
+        <CreateOrUpdateLink />
+
+        <span className="flex flex-row justify-start pb-5 items-center">
+          <span className="flex flex-col mr-20">
+            <span className="text-white mr-auto">
+              LINKS
+              {/* <button
+                className="right-1 rounded-lg py-1 px-2 ml-1 
+                            shadow-md text-center text-white text-sm font-bold"
+              >
+                CTRL + V
+              </button> */}
+            </span>
+
+            <span className="text-gray-300 text-xs">
+              links: jira tickets, drive files/folders, powerpoints...
+            </span>
+          </span>
+
+          {/* tab pane */}
+          {/* <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
+            <span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
+              Team
+            </span>
+
+            <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+              Personal
+            </span>
+
+            <span className="text-gray-300 hover:text-white hover:cursor-pointer">
+              Favorites
+            </span>
+          </span> */}
+
+          <Dropdown overlay={TimePeriodFilterMenu}>
+            <span className="text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
+              Week <FaAngleDown />
+            </span>
+          </Dropdown>
+
+          <Tooltip title={"code blocks: coming soon"}>
+            <button className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40 ml-2">
+              <FaCode className="text-lg text-white" />
+            </button>
+          </Tooltip>
+
+          <button
+            onClick={() => handleModalType(ShowModalType.createLink)}
+            className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40"
+          >
+            <FaPlus className="text-lg text-white" />
+          </button>
+        </span>
+      </Tooltip>
+
+      <div className="mb-5">
+        <Radio.Group
+          value={selectedTabPane}
+          onChange={(e) => setSelectedTabPane(e.target.value)}
+        >
+          <Radio.Button value={LinkTypeFilter.me}>
+            {LinkTypeFilter.me}{" "}
+            {/* <span className="text-xs text-orange-500">
+            {meRooms.length > 0 ? meRooms.length : ""}
+          </span> */}
+          </Radio.Button>
+          <Radio.Button value={LinkTypeFilter.team}>
+            {LinkTypeFilter.team}{" "}
+            {/* <span className="text-xs text-orange-500">{teamRooms.length}</span> */}
+          </Radio.Button>
+          <Tooltip title={"coming soon"}>
+            <Radio.Button disabled value={LinkTypeFilter.favorites}>
+              {LinkTypeFilter.favorites}{" "}
+              {/* <span className="text-xs text-orange-500">
+            {liveRooms.length > 0 ? liveRooms.length : ""}
+          </span> */}
+            </Radio.Button>
+          </Tooltip>
+          <Radio.Button value={LinkTypeFilter.archived}>
+            {LinkTypeFilter.archived}{" "}
+            {/* <span className="text-xs text-orange-500">
+            {archivedRooms.length > 0 ? archivedRooms.length : ""}
+          </span> */}
+          </Radio.Button>
+        </Radio.Group>
+      </div>
+
+      {/* table of links */}
+      <div className="flex flex-col space-y-2">
+        {/* pdf example */}
+        <LinkCard />
+      </div>
+    </section>
+  );
+}
+
+enum LinkTypeFilter {
+  team = "team",
+  me = "me",
+  favorites = "favorites",
+  archived = "archived",
 }
@@ -130,7 +130,7 @@ export default function DashboardRoom() {
        Past 24 Hours (Coming Soon)
      </Menu.Item>
      <Menu.Item key={2} disabled>
-        This Month(Coming Soon)
+        This Month (Coming Soon)
      </Menu.Item>
    </Menu>
  );
@@ -208,7 +208,7 @@ export default function TeamVoiceLine() {
  }

  return (
-    <section className="p-5 flex flex-col w-full max-w-sm bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
      <span className="flex flex-row justify-start items-center pb-5">
        <span className="flex flex-col">
          <span className="text-white">TEAM</span>