From 75deb9a2fffb3b576230820e2563ec90224a7871 Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Wed, 9 Aug 2023 10:43:18 +1000
Subject: [PATCH] feat: feature/mvp-sprint-1 Added home icon link in nav

---
 remix/app/components/Icon/Icon.tsx | 78 ++++++++++++++++++++++++++++++
 remix/app/components/Nav/Nav.tsx   | 28 +++++++++--
 2 files changed, 103 insertions(+), 3 deletions(-)

diff --git a/remix/app/components/Icon/Icon.tsx b/remix/app/components/Icon/Icon.tsx
index 6211597..b109e8c 100644
--- a/remix/app/components/Icon/Icon.tsx
+++ b/remix/app/components/Icon/Icon.tsx
@@ -49,6 +49,84 @@ export const Icon = (props) => {
       return "🌗"
       // return "⚖️"
     }
+    if (["rainbow"]?.includes(name)) {
+      return "🌈"
+    }
+    if (["sun"]?.includes(name)) {
+      return "☀️"
+    }
+    if (["moon"]?.includes(name)) {
+      return "🌙"
+    }
+    if (["unicorn"]?.includes(name)) {
+      return "🦄"
+    }
+    if (["user", "person"]?.includes(name)) {
+      return "👤"
+    }
+    if (["group", "team"]?.includes(name)) {
+      return "👥"
+    }
+    if (["success", "check"]?.includes(name)) {
+      return "✅"
+    }
+    if (["error", "stop"]?.includes(name)) {
+      return "❌"
+    }
+    if (["warning", "alert"]?.includes(name)) {
+      return "⚠️"
+    }
+    if (["time", "clock"]?.includes(name)) {
+      return "⏰"
+    }
+    if (["star", "favorite"]?.includes(name)) {
+      return "⭐"
+    }
+    if (["question", "help"]?.includes(name)) {
+      return "❓"
+    }
+    if (["video", "media"]?.includes(name)) {
+      return "🎥"
+    }
+    if (["music", "audio"]?.includes(name)) {
+      return "🎵"
+    }
+    if (["image", "picture"]?.includes(name)) {
+      return "🖼️"
+    }
+    if (["email", "mail"]?.includes(name)) {
+      return "✉️"
+    }
+    if (["computer", "laptop"]?.includes(name)) {
+      return "💻"
+    }
+    if (["mobile", "phone"]?.includes(name)) {
+      return "📱"
+    }
+    if (["world", "globe"]?.includes(name)) {
+      return "🌍"
+    }
+    if (["rocket", "launch"]?.includes(name)) {
+      return "🚀"
+    }
+    if (["pencil", "edit"]?.includes(name)) {
+      return "✏️"
+    }
+    if (["search", "magnify"]?.includes(name)) {
+      return "🔍"
+    }
+    if (["lock", "secure"]?.includes(name)) {
+      return "🔒"
+    }
+    if (["unlock", "access"]?.includes(name)) {
+      return "🔓"
+    }
+    if (["thumb-up", "like"]?.includes(name)) {
+      return "👍"
+    }
+    if (["thumb-down", "dislike"]?.includes(name)) {
+      return "👎"
+    }
   }, [name])
 
   return (
diff --git a/remix/app/components/Nav/Nav.tsx b/remix/app/components/Nav/Nav.tsx
index 2317771..d8ae81c 100644
--- a/remix/app/components/Nav/Nav.tsx
+++ b/remix/app/components/Nav/Nav.tsx
@@ -1,7 +1,9 @@
 import React from "react"
-import { Box, Flex } from "@chakra-ui/react"
+import { Box, Center, Flex } from "@chakra-ui/react"
+import { Link } from "@remix-run/react"
 
 import { Commander } from "../Commander/Commander"
+import { Icon } from "../Icon/Icon"
 import { RainbowSkeleton } from "../Skeleton/RainbowSkeleton"
 import { ProfileDrawer } from "./ProfileDrawer"
 
@@ -36,8 +38,28 @@ export const Nav = (props) => {
           // bg='white'
           // boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
         >
+          <Center
+            width="25px"
+            height="25px"
+            marginRight="auto"
+            transform="scaleX(-100%)"
+            cursor="pointer"
+          >
+            <Link to="/">
+              <Icon size="12px" name="unicorn"></Icon>
+            </Link>
+          </Center>
           <Commander></Commander>
-          <RainbowSkeleton
+          <Center
+            width="25px"
+            height="25px"
+            marginLeft="auto"
+            transform="scaleX(-100%)"
+            cursor="pointer"
+          >
+            <Icon size="12px" name="rainbow"></Icon>
+          </Center>
+          {/* <RainbowSkeleton
             marginLeft="auto"
             width="25px"
             height="25px"
@@ -46,7 +68,7 @@ export const Nav = (props) => {
             background="rgba(0,0,0,0.1)"
             sx={{}}
             borderRadius="999px"
-          ></RainbowSkeleton>
+          ></RainbowSkeleton> */}
           {/* <RainbowSkeleton w='40px' ml='auto' mr={"4px"}></RainbowSkeleton>
           <RainbowSkeleton></RainbowSkeleton> */}
         </Flex>