feat(platform): Add SVGs to projectTabs (#673)

Co-authored-by: Rajdip Bhattacharya <[email protected]>
keyshade-xyz · Jan 30, 2025 · 37bfddf · 37bfddf
1 parent b442fe0
commit 37bfddf
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/apps/platform/src/components/shared/navbar/index.tsx b/apps/platform/src/components/shared/navbar/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
 import Link from 'next/link'
 import { DropdownSVG } from '@public/svg/shared'
+import { SecretSVG, VariableSVG, EnvironmentSVG } from '@public/svg/dashboard'
 import type { User } from '@keyshade/schema'
 import SearchModel from './searchModel'
 import {
@@ -53,8 +54,29 @@ function Navbar(): React.JSX.Element {
 
   const pathname = usePathname()
 
-  const settingsTabs = ['Workspace', 'Profile', 'Billing']
-  const projectTabs = ['Secret', 'Variable', 'Environment']
+  const settingsTabs = [
+    { id: 'workspace', label: 'Workspace' },
+    { id: 'profile', label: 'Profile' },
+    { id: 'billing', label: 'Billing' }
+  ]
+
+  const projectTabs = [
+    {
+      id: 'secret',
+      label: 'Secret',
+      icon: <SecretSVG />
+    },
+    {
+      id: 'variable',
+      label: 'Variable',
+      icon: <VariableSVG />
+    },
+    {
+      id: 'environment',
+      label: 'Environment',
+      icon: <EnvironmentSVG />
+    }
+  ]
 
   useEffect(() => {
     const down = (e: KeyboardEvent): void => {

diff --git a/apps/platform/src/components/ui/line-tab.tsx b/apps/platform/src/components/ui/line-tab.tsx
@@ -11,14 +11,16 @@ interface TabProps {
   // setSelected: React.Dispatch<React.SetStateAction<string>>
   searchParams: ReadonlyURLSearchParams
   customID: string
+  icon?: React.ReactNode
 }
 
 function Tab({
   text,
   selected,
   // setSelected,
   searchParams,
-  customID
+  customID,
+  icon
 }: TabProps): React.JSX.Element {
   const router = useRouter()
   const pathname = usePathname()
@@ -46,27 +48,35 @@ function Tab({
       }}
       type="button"
     >
-      <span className="relative z-10">{text}</span>
+      <span className="relative z-10 flex items-center gap-2">
+        {icon && <span className={'h-4 w-4'}>{icon}</span>}
+        {text}
+      </span>
       {selected ? (
         <motion.div
           className="absolute left-0 top-0 flex size-full items-end justify-center"
           layoutId={`${customID}linetab`}
           transition={{ type: 'spring', duration: 0.4, bounce: 0, delay: 0.1 }}
         >
-          <span className="z-0 h-[3px] w-[60%] rounded-t-full bg-white" />
+          <span className="z-0 h-[3px] w-full rounded-t-full bg-white" />
         </motion.div>
       ) : null}
     </button>
   )
 }
 
+interface TabConfig {
+  id: string
+  label: string
+  icon?: React.ReactNode
+}
+
 interface LineTabsProps {
   customID: string
-  tabs: string[]
+  tabs: TabConfig[]
 }
 
 function LineTab({ customID, tabs }: LineTabsProps): React.JSX.Element {
-  // const [selected, setSelected] = useState(tabs[0])
   const searchParams = useSearchParams()
   const search = searchParams.get('tab')
 
@@ -77,10 +87,11 @@ function LineTab({ customID, tabs }: LineTabsProps): React.JSX.Element {
       {tabs.map((tab) => (
         <Tab
           customID={customID}
-          key={tab}
+          icon={tab.icon}
+          key={tab.id}
           searchParams={searchParams}
-          selected={search?.toLocaleLowerCase() === tab.toLocaleLowerCase()}
-          text={tab}
+          selected={search?.toLocaleLowerCase() === tab.id.toLocaleLowerCase()}
+          text={tab.label}
         />
       ))}
     </div>