From b1fa3302fd399d44c257a6da044227167ccccbce Mon Sep 17 00:00:00 2001
From: mrswastik-robot <swastikpatel29@gmail.com>
Date: Wed, 29 Jan 2025 03:14:06 +0530
Subject: [PATCH 1/3] add SVGs

---
 apps/platform/src/components/ui/line-tab.tsx | 34 ++++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/platform/src/components/ui/line-tab.tsx b/apps/platform/src/components/ui/line-tab.tsx
index 3a25af5cf..75fcbad0d 100644
--- a/apps/platform/src/components/ui/line-tab.tsx
+++ b/apps/platform/src/components/ui/line-tab.tsx
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
 import React, { useCallback } from 'react'
 import type { ReadonlyURLSearchParams } from 'next/navigation'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { EnvironmentSVG, SecretSVG, VariableSVG } from '@public/svg/dashboard'
 import { cn } from '@/lib/utils'
 
 interface TabProps {
@@ -11,6 +12,7 @@ interface TabProps {
   // setSelected: React.Dispatch<React.SetStateAction<string>>
   searchParams: ReadonlyURLSearchParams
   customID: string
+  icon?: React.ReactNode
 }
 
 function Tab({
@@ -18,7 +20,8 @@ function Tab({
   selected,
   // setSelected,
   searchParams,
-  customID
+  customID,
+  icon
 }: TabProps): React.JSX.Element {
   const router = useRouter()
   const pathname = usePathname()
@@ -46,14 +49,21 @@ function Tab({
       }}
       type="button"
     >
-      <span className="relative z-10">{text}</span>
+      <span className="relative z-10 flex items-center gap-2">
+        {icon && (
+          <span className={"w-4 h-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-[70%] rounded-t-full bg-white" />
         </motion.div>
       ) : null}
     </button>
@@ -69,6 +79,23 @@ function LineTab({ customID, tabs }: LineTabsProps): React.JSX.Element {
   // const [selected, setSelected] = useState(tabs[0])
   const searchParams = useSearchParams()
   const search = searchParams.get('tab')
+  const pathname = usePathname()
+
+  const getIcon = (tab: string): React.ReactNode => {
+    
+    if (pathname.split('/')[1] !== 'project') return null
+
+    switch (tab.toLowerCase()) {
+      case 'secret':
+        return <SecretSVG />
+      case 'variable':
+        return <VariableSVG />
+      case 'environment':
+        return <EnvironmentSVG />
+      default:
+        return null
+    }
+  }
 
   return (
     <div
@@ -77,6 +104,7 @@ function LineTab({ customID, tabs }: LineTabsProps): React.JSX.Element {
       {tabs.map((tab) => (
         <Tab
           customID={customID}
+          icon={getIcon(tab)}
           key={tab}
           searchParams={searchParams}
           selected={search?.toLocaleLowerCase() === tab.toLocaleLowerCase()}

From 83b30fb960d82ada091e5bb6a2d7c5c41c9731e1 Mon Sep 17 00:00:00 2001
From: mrswastik-robot <swastikpatel29@gmail.com>
Date: Wed, 29 Jan 2025 03:16:56 +0530
Subject: [PATCH 2/3] code formatting

---
 apps/platform/src/components/ui/line-tab.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/platform/src/components/ui/line-tab.tsx b/apps/platform/src/components/ui/line-tab.tsx
index 75fcbad0d..4c4bff4b4 100644
--- a/apps/platform/src/components/ui/line-tab.tsx
+++ b/apps/platform/src/components/ui/line-tab.tsx
@@ -50,11 +50,7 @@ function Tab({
       type="button"
     >
       <span className="relative z-10 flex items-center gap-2">
-        {icon && (
-          <span className={"w-4 h-4"}>
-            {icon}
-          </span>
-        )}
+        {icon && <span className={'h-4 w-4'}>{icon}</span>}
         {text}
       </span>
       {selected ? (
@@ -82,7 +78,6 @@ function LineTab({ customID, tabs }: LineTabsProps): React.JSX.Element {
   const pathname = usePathname()
 
   const getIcon = (tab: string): React.ReactNode => {
-    
     if (pathname.split('/')[1] !== 'project') return null
 
     switch (tab.toLowerCase()) {

From f69df5dd57370160ec93bedec77e28999db95403 Mon Sep 17 00:00:00 2001
From: mrswastik-robot <swastikpatel29@gmail.com>
Date: Thu, 30 Jan 2025 00:47:23 +0530
Subject: [PATCH 3/3] code refactor

---
 .../src/components/shared/navbar/index.tsx    | 26 ++++++++++++--
 apps/platform/src/components/ui/line-tab.tsx  | 36 +++++++------------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/apps/platform/src/components/shared/navbar/index.tsx b/apps/platform/src/components/shared/navbar/index.tsx
index 65651a876..fce704c01 100644
--- 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
index 4c4bff4b4..82b7040f6 100644
--- a/apps/platform/src/components/ui/line-tab.tsx
+++ b/apps/platform/src/components/ui/line-tab.tsx
@@ -3,7 +3,6 @@ import { motion } from 'framer-motion'
 import React, { useCallback } from 'react'
 import type { ReadonlyURLSearchParams } from 'next/navigation'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { EnvironmentSVG, SecretSVG, VariableSVG } from '@public/svg/dashboard'
 import { cn } from '@/lib/utils'
 
 interface TabProps {
@@ -59,38 +58,27 @@ function Tab({
           layoutId={`${customID}linetab`}
           transition={{ type: 'spring', duration: 0.4, bounce: 0, delay: 0.1 }}
         >
-          <span className="z-0 h-[3px] w-[70%] 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')
-  const pathname = usePathname()
-
-  const getIcon = (tab: string): React.ReactNode => {
-    if (pathname.split('/')[1] !== 'project') return null
-
-    switch (tab.toLowerCase()) {
-      case 'secret':
-        return <SecretSVG />
-      case 'variable':
-        return <VariableSVG />
-      case 'environment':
-        return <EnvironmentSVG />
-      default:
-        return null
-    }
-  }
 
   return (
     <div
@@ -99,11 +87,11 @@ function LineTab({ customID, tabs }: LineTabsProps): React.JSX.Element {
       {tabs.map((tab) => (
         <Tab
           customID={customID}
-          icon={getIcon(tab)}
-          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>