starting to implement create ui/ux flow

2022-02-01 11:25:42 -08:00
parent fd28ab47c0
commit f20eaea04e
5 changed files with 103 additions and 67 deletions
@@ -0,0 +1,61 @@
+import {
+  FaAtlassian,
+  FaFileAlt,
+  FaFileCode,
+  FaFileImage,
+  FaFilePdf,
+  FaGithubSquare,
+  FaGlobe,
+  FaGoogleDrive,
+} from "react-icons/fa";
+import Link, { LinkType } from "../models/link";
+
+export default function LinkIcon(props: {
+  className?: string;
+  linkType: LinkType;
+}) {
+  // github
+
+  // atlassian
+
+  // drive
+
+  // onedrive
+
+  // dropbox
+
+  // image
+
+  // pdf
+
+  // https://www.codepile.net/ for code snippets
+
+  const { className, linkType, ...rest } = props;
+
+  switch (linkType) {
+    case LinkType.default:
+      return <FaGlobe {...rest} className={`${className} text-slate-300 `} />;
+    case LinkType.atlassian:
+      return <FaAtlassian {...rest} className={`${className} text-sky-500 `} />;
+    case LinkType.codePile:
+      return <FaFileCode {...rest} className={`${className} text-pink-200 `} />;
+    case LinkType.github:
+      return (
+        <FaGithubSquare {...rest} className={`${className} text-gray-200 `} />
+      );
+    case LinkType.googleDrive:
+      return (
+        <FaGoogleDrive {...rest} className={`${className} text-emerald-500 `} />
+      );
+    case LinkType.image:
+      return (
+        <FaFileImage {...rest} className={`${className} text-purple-500 `} />
+      );
+    case LinkType.pdf:
+      <FaFilePdf {...rest} className={`${className} text-orange-500 `} />;
+    default:
+      return (
+        <FaFileAlt {...rest} className={`${className} text-orange-500 `} />
+      );
+  }
+}