Ternary Operator

[TheoGegout]

Hi ! I try to transform a React Tailwind UI component to Svelte but I encounter a problem. I don't find in the documentation how to adapt this one ... Thanks you !

<div className="relative flex">
      <Popover.Button
          className={classNames(
             open
                  ? 'border-indigo-600 text-indigo-600'
                  : 'border-transparent text-gray-700 hover:text-gray-800',
               'relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out'
            )}
        >
          {category.name}
     </Popover.Button>
</div>

[NoelOConnell]

You can find an example of using the open prop to style the component in the documentation

Use a ternary here to style the button based on the open state

<Popover let:open>
  <PopoverButton
    class={open ? "popover-overlay-open" : "popover-overlay-closed"}
>
   Solutions</PopoverButton>
  <PopoverPanel>
    <!-- ... -->
  </PopoverPanel>
</Popover>

This is an example of having default classes and a class based on the open state

<Popover let:open>
  <PopoverButton
    class={`${open ? "transform rotate-180" : ""} w-5 h-5 text-purple-500`}
>
   Solutions</PopoverButton>
  <PopoverPanel>
    <!-- ... -->
  </PopoverPanel>
</Popover>

[TheoGegout]

Oh okay my bad didn't see this part ! But maybe u can help me for this :

class={(open
? "border-indigo-600 text-indigo-600"
: "border-transparent text-gray-700 hover:text-gray-800",
"relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out")}

To do is correctly I will do this :

class={open ? "border-indigo-600 text-indigo-600" : "border-transparent text-gray-700 hover:text-gray-800"}

But in my case, I don't know why there is a comma and what it's doing :

,"relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out")}

[NoelOConnell]

The comma is part of the classNames function in React which is passing in the default classes.

The syntax for Svelte would be this

<PopoverButton
    class={`${open ? "border-indigo-600 text-indigo-600" : "border-transparent text-gray-700 hover:text-gray-800"} relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium transition-colors duration-200 ease-out`}
>

[TheoGegout]

Oh okay thank you very much ! ;)