WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added icons

Browse Source
This commit was merged in pull request #766.
This commit is contained in:
victorAnumudu
2024-07-24 18:32:43 +01:00
parent ddf361b496
commit 2f6f0bf501
3 changed files with 46 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/customTabs/TabButton.jsx
+9 -3
View File
@@ -1,16 +1,22 @@
import React from 'react'
import Icons from '../Helpers/Icons'
export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
export default function TabButton({ item='', iconName='', selectedTab='', setSelectedTab=()=>{} }) {
return (
<button
className={`text-18 tracking-wide flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
selectedTab === item ? "text-purple" : " text-thin-light-gray"
}`}
value={item}
name={item}
onClick={() => setSelectedTab(item)}
>
{item[0].toUpperCase() + item.slice(1)}
<div>
<Icons name={iconName} />
</div>
<div>
<p className="text-18 tracking-wide">{item[0].toUpperCase() + item.slice(1)}</p>
</div>
</button>
)
}