1
\$\begingroup\$

This is a React icon component, with a few Tailwind classes. This icon component looks as follows in the UI. The name LongIcon is to differentiate with smaller, fully round icons that are used elsewhere.

Normal: enter image description here

Hovered: enter image description here

I'm using flex to center the icon SVG inside the green background.

import Image from 'next/image';
import React from 'react';

export default function LongIcon({ type }: { type: string }) {
  return (
    // flex used to center the type icon inside the colored div
    <div className={`
      ${type}
      h-[30px]
      w-[80px]
      p-1
      flex
      justify-between
      rounded-md
      transition-all
      hover:saturate-200
      hover:scale-110`}
    >
      {/* Capitalize type */}
      <span className='text-white font-medium'>{type.replace(/\b\w/, c => c.toUpperCase())}</span>
      <Image
        src={`/type-icons/${type}.svg`}
        alt={type}
        title={type}
        width={30 * 0.6}
        height={30 * 0.6}
      />
    </div>
  );
}
\$\endgroup\$

1 Answer 1

0
\$\begingroup\$

I have two main observations:

I'm not a big fan of the baked-in capitalization. For one, even in English title case not all words should be capitalized. And if the application is ever translated there are languages in which title case may be inappropriate. In my opinion the label should be capitalized correctly to begin with.

If you do keep it, you should consider using the CSS style text-transformation: capitalize (Tailwind class capitalize) instead, or at the very least define it as a separate function outside the component to make the HTML less busy.


Hover effects usually suggest to the user that the element is clickable. Since this component otherwise doesn't seem interactive, this may be confusing for the user.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.