👌 IMPROVE(carousel): fix missing classname, use data attribute for thumbs

[ahmedrowaihi]

to allow overwriting styles of active thumb, dynamically with isSlideActive using className

[BelkacemYerfa]

Thanks @ahmedrowaihi for your contribution , but i tested the code for the data-attr modification , and that will not work , since you have forget to add the data-active attr for the button.

As you can see here :

the proper fix will be to add the data-active={isSlideActive} to the button so it will now that the state of the active data attr has been changed.

The new modification will result :

,

the code for that is :

<Button
  ref={ref}
  size="icon"
  data-active={isSlideActive}
  className={cn(
    "h-1 w-6 rounded-full",
    "data-[active='false']:bg-primary/50 data-[active='true']:bg-primary",
    className
  )}
  onClick={() => onThumbClick(index)}
  {...props}
>
    <span className="sr-only">slide {index + 1} </span>
</Button>

Please consider this change if you want the pr get merged.

[ahmedrowaihi]

oopss! my bad, I forgot to add it

[ahmedrowaihi]

there you go boss

[BelkacemYerfa]

Thanks you for your help @ahmedrowaihi.

Welcome to contribution club , as the first contributor 💪. Don't forget to spread the word on Reddit or similar. Enjoy 🎉!