Prime Community Forum

I've purchased PrimeBlocks. The first code which I looked at is the
Application/Multi Column Layout.

A sample of the code is below.
The code has 2 classNames for the same <a> tag
Please advise how I should use... (without actually rewriting it)


<div className="overflow-y-auto mt-3">
<ul className="list-none py-3 px-2 m-0">
<li className="mb-2">
<a className="p-ripple" onClick={() => setActiveTab(0)}
className={classNames('p-ripple flex align-items-center cursor-pointer p-3 lg:justify-content-center hover:bg-indigo-400 border-round text-indigo-100 hover:text-indigo-50 transition-duration-150 transition-colors', { 'bg-indigo-700': activeTab === 0 })}>
<i className="pi pi-home text-lg"></i>
<Ripple />
</a>
</li>

Hey there,

The classNames() function is a utility function that allows you to conditionally concatenate multiple class names together.
The p-ripple, flex, align-items-center, cursor-pointer, py-3, pl-0, pr-2, justify-content-center, hover:bg-indigo-600, text-indigo-100, hover:text-indigo-50, transition-duration-150 and transition-colors class names are always applied.

The object passed as the second argument { "bg-indigo-500": activeTab2 === 0 } means that the class name bg-indigo-500 will only be applied when the value of activeTab2 is equal to 0.

I hope these answer helps you
Best