add sidebar icons

ff14-advanced-market-search · Jul 2, 2024 · 635c4e9 · 635c4e9
1 parent 47153a9
commit 635c4e9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/app/components/navigation/sidebar/Sidebar.tsx b/app/components/navigation/sidebar/Sidebar.tsx
@@ -8,13 +8,15 @@ import {
   CogIcon,
   MenuAlt2Icon,
   XIcon,
+  DocumentTextIcon,
   DocumentSearchIcon,
   ChevronUpIcon,
   ChevronDownIcon,
   PencilAltIcon,
   SearchIcon,
   ExclamationCircleIcon,
-  ShoppingCartIcon
+  ShoppingCartIcon,
+  ExternalLinkIcon
 } from '@heroicons/react/outline'
 import {
   Form,
@@ -31,6 +33,7 @@ import GithubIcon from '~/icons/GithubIcon'
 import FlatWoWIcon from '~/icons/FlatWowIcon'
 import FlatFFXIVIcon from '~/icons/FlatFFXIVIcon'
 import DiscordIcon from '~/icons/DiscordIcon'
+import YoutubeIcon from '~/icons/YoutubeIcon'
 import type { LoaderData } from '~/root'
 import DebouncedSelectInput from '~/components/Common/DebouncedSelectInput'
 import {
@@ -140,7 +143,7 @@ const navGroups: Array<{
       {
         name: 'Shopping List',
         href: 'ffxiv/shopping-list',
-        icon: PencilAltIcon
+        icon: ShoppingCartIcon
       },
       {
         name: 'Listings Comparison and Competition Metrics',
@@ -324,7 +327,12 @@ const navGroups: Array<{
         external: true,
         icon: GithubIcon
       },
-      // @coderabbitai
+      {
+        name: 'YouTube',
+        href: 'https://www.youtube.com/@saddlebagexchange704',
+        external: true,
+        icon: YoutubeIcon
+      },
       {
         name: 'blog',
         href: '/blog',
@@ -333,24 +341,24 @@ const navGroups: Array<{
       {
         name: 'List of all WoW Items',
         href: '/wow/itemlist',
-        icon: DocumentSearchIcon
+        icon: DocumentTextIcon
       },
       {
         name: 'List of all FFXIV Items',
         href: '/ffxiv/itemlist',
-        icon: DocumentSearchIcon
+        icon: DocumentTextIcon
       },
       {
         name: 'Fandom',
         href: 'https://ffxivmarketboard.fandom.com/wiki/Ffxivmarketboard_Wiki',
         external: true,
-        icon: DocumentSearchIcon
+        icon: ExternalLinkIcon
       },
       {
         name: 'Discord Webpage',
         href: 'https://discord.com/servers/saddlebag-exchange-973380473281724476',
         external: true,
-        icon: DocumentSearchIcon
+        icon: DiscordIcon
       }
     ]
   }

diff --git a/app/icons/YoutubeIcon.tsx b/app/icons/YoutubeIcon.tsx
@@ -0,0 +1,20 @@
+import type { FC, PropsWithChildren } from 'react'
+
+type SVGProps = PropsWithChildren<{ className: string }>
+
+const YoutubeIcon: FC<SVGProps> = (props) => {
+  return (
+    <svg
+      className={props.className}
+      viewBox="0 0 24 24"
+      height={`1em`}
+      width={`1em`}
+      stroke="currentColor"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg">
+      <path d="M23.498 6.186a2.999 2.999 0 0 0-2.11-2.11C19.396 3.5 12 3.5 12 3.5s-7.396 0-9.388.576a2.999 2.999 0 0 0-2.11 2.11C0 8.178 0 12 0 12s0 3.822.502 5.814a2.999 2.999 0 0 0 2.11 2.11C4.604 20.5 12 20.5 12 20.5s7.396 0 9.388-.576a2.999 2.999 0 0 0 2.11-2.11C24 15.822 24 12 24 12s0-3.822-.502-5.814zM9.75 15.568V8.432L15.75 12l-6 3.568z" />
+    </svg>
+  )
+}
+
+export default YoutubeIcon