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