setting up basics of the links

components/Dashboard/Announcements.tsx

@@ -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>
+  );
 }

components/Dashboard/Links.tsx

@@ -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",
 }

components/Dashboard/Rooms.tsx

@@ -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>
   );

components/Dashboard/TeamVoiceLine.tsx

@@ -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>

components/LinkCard.tsx

@@ -0,0 +1,63 @@
+import { FaArchive, FaExternalLinkAlt, FaFilePdf } from "react-icons/fa";
+import Link from "../models/link";
+import Image from "next/image";
+import { BsThreeDots } from "react-icons/bs";
+
+export default function LinkCard(props: { link?: Link }) {
+  return (
+    <span className="flex flex-col rounded-lg">
+      {/* attmnt header */}
+      <span className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start">
+        <RenderFileIcon className="text-4xl text-orange-300 mr-2" />
+
+        <span className="flex flex-col items-baseline mr-10 space-y-1">
+          <span className="text-md font-bold text-white">report.pdf</span>
+
+          <span
+            className={`text-gray-200 text-xs mb-auto text-ellipsis whitespace-pre-line max-h-10 overflow-hidden`}
+          >
+            {"asdfaSdfasdfsadfsdf"}
+          </span>
+        </span>
+
+        {/* attachment actions */}
+        <button className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40">
+          <FaExternalLinkAlt className="text-sm text-white" />
+        </button>
+
+        <button className="bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
+          <FaArchive className="text-sm text-orange-500 " />
+        </button>
+      </span>
+
+      {/* attmnt footer */}
+      <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+        <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+          <span className="relative flex">
+            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+            <Image
+              className=""
+              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"}
+              alt="profile"
+              width={30}
+              height={30}
+            />
+          </span>
+        </span>
+
+        <span className="flex flex-col items-baseline">
+          <span className="text-xs text-gray-200 font-bold">Adriana</span>
+          <span className="text-xs text-gray-200 font-extralight">
+            5 minutes ago
+          </span>
+        </span>
+
+        <BsThreeDots className="text-white ml-auto hover:cursor-pointer" />
+      </span>
+    </span>
+  );
+}
+
+function RenderFileIcon(props) {
+  return <FaFilePdf {...props} />;
+}

components/Modals/CreateOrUpdateLink.tsx

@@ -0,0 +1,41 @@
+import Modal from "antd/lib/modal/Modal";
+import { useState } from "react";
+import {
+  ShowModalType,
+  useKeyboardContext,
+} from "../../contexts/keyboardContext";
+
+export default function CreateOrUpdateLink() {
+  const { handleModalType, showModalType } = useKeyboardContext();
+
+  function closeModal() {
+    handleModalType(ShowModalType.na);
+  }
+
+  const [link, setLink] = useState<string>("");
+
+  return (
+    <Modal
+      title="Link Details"
+      visible={showModalType == ShowModalType.createLink}
+      onCancel={closeModal}
+      onOk={closeModal}
+    >
+      <div className="flex flex-col">
+        <span className="flex flex-col items-start">
+          <span className="text-lg">Link</span>
+          <span className="text-gray-300 text-xs mb-2">
+            Please make sure this is valid for others to access.
+          </span>
+
+          <input
+            className="w-full rounded-lg bg-gray-50 p-3"
+            value={link}
+            placeholder="https://drive.google.com/xxx"
+            onChange={(e) => setLink(e.target.value)}
+          />
+        </span>
+      </div>
+    </Modal>
+  );
+}

models/attachment.ts

@@ -1,8 +0,0 @@
-export default class Attachment {
-  id: string;
-  name: string;
-  description: string;
-  link: string;
-
-  constructor() {}
-}

models/link.ts

@@ -0,0 +1,30 @@
+import { Timestamp } from "firebase/firestore";
+
+export default class Link {
+  id: string;
+  name: string;
+  description: string;
+  link: string; //url for file
+
+  state: AttachmentState = AttachmentState.active;
+
+  isLoomScreenshare: boolean = false;
+
+  teamId: string;
+  // if it's not a teamAttachment, then have a list of members who it's for
+
+  createdByUserId: string;
+  createdDate: Timestamp;
+
+  constructor(id: string, name: string, description: string) {}
+}
+
+export enum AttachmentState {
+  active = "active",
+  archived = "archived",
+}
+
+export enum AttachmentType {
+  link = "link",
+  screenshare = "",
+}

pages/teams/[teamid].tsx

@@ -17,6 +17,8 @@ import { TeamMemberStatus } from "../../models/teamMember";
 import { UserStatus } from "../../models/user";
 import TeamService from "../../services/teamService";
 import UserService from "../../services/userService";
+import Announcements from "../../components/Dashboard/Announcements";
+import Links from "../../components/Dashboard/Links";
 
 // User has switched back to the tab
 const onFocus = () => {
@@ -83,9 +85,16 @@ function TeamDashboard() {
       <Header />
 
       <div className="flex flex-row items-baseline space-x-5 space-y-5">
-        <TeamVoiceLine />
+        <div className="flex flex-col max-w-sm space-y-5">
+          <TeamVoiceLine />
+          <Links />
+        </div>
 
-        <Rooms />
+        <div className="flex flex-col space-y-5">
+          <Announcements />
+
+          <Rooms />
+        </div>
       </div>
     </div>
   );