Equalizer landing page (React & Tailwind CSS)

Community feedback

• 

  P

  Lauris•200

  @EdanriellPosted 4 months ago

  Hello there, overall it looks ok, but you missed some couple of things. First of all you don't have any hover effects on your social-links, also your break points are wrong, usage of <h> tags is also wrong and overall your html structure is a little bit off, for example you forgot to use <main>. Also you have clearly two sections on site and not just one.

  So now let's talk about your JSX code, so there is some good things, and there is bad.

  Let's start with good ones. I like that you create your social links dynamically, and that's right thing to do.

  const network = [
    {
      icon: <Facebook />,
      url: '#',
      source: 'facebook',
    },
    {
      icon: <Instagram />,
      url: '#',
      source: 'instagram',
    },
    {
      icon: <Twitter />,
      url: '#',
      source: 'twitter',
    },
  ]
  

  JSX

        <ul className="flex gap-5 items-center">
          {network.map((link) => {
            return (
              <li key={link.source}>
                <a className="w-[20px] h-[20px]" href={link.url}>
                  {link.icon}
                </a>
              </li>
            )
          })}
        </ul>
  

  Probably in a real life scenario it will be pulled out to separate component.

  Now let's talk about bad stuff. Your ButtonLink component is something =) Let's go through basics. When we use button and when link? We use link when we are going somewhere, or we are accessing something through an endpoint. For example download, it's not a button, it clearly a link, because you have an endpoint which you use to get your file. In all other scenarios you probably will be using button, buttons usually are used when we call some sort of actions. For example we click on button and modal is being displayed, or for example we have an slider component, which has 2 arrows which are both buttons, when we click on right arrow slider goes right, when we click on left arrow, slider goes left and so on. It's enough to memorize that we use links when we travel to somewhere and buttons for some sort of actions.

  So let's take a look at your ButtonLink component

  export const BtnLink = ({ color, icon, device }) => {
    const colorBtn = () => {
      if (color === 'white') return 'bg-cream text-dark hover:bg-orange'
      if (color === 'black') return 'bg-dark text-cream hover:bg-mint'
    }
  
    return (
      <button
        className={`${colorBtn()} transition duration-500 pt-[15px] pb-[14px] w-full rounded-lg text-18 font-bold leading-32 flex justify-center items-center gap-1 cursor-pointer`}
      >
        {icon} {device} Download
      </button>
    )
  }
  

  Here is usage of your component

  <BtnLink color="black" device="IOS" icon={<IosIcon />} />
  <BtnLink color="white" device="Android" icon={<Android />} />
  

  And now on my Link component

  import { FC, ReactNode } from "react";
  import { cva, VariantProps } from "class-variance-authority";
  
  const linkStyles = cva(
  	"transition duration-500 pt-[15px] pb-[14px] w-full rounded-lg text-18 font-bold leading-32 flex justify-center items-center gap-1 cursor-pointer",
  	{
  		variants: {
  			colorScheme: {
  				light: "bg-cream text-dark hover:bg-orange",
  				dark: "bg-dark text-cream hover:bg-mint"
  			}
  		},
  		defaultVariants: {
  			colorScheme: "light"
  		}
  	}
  );
  
  type LinkProps = VariantProps<typeof linkStyles> & {
  	colorScheme?: "light" | "dark";
  	linkTo?: string;
  	children: ReactNode;
  };
  
  export const Link: FC<LinkProps> = ({ colorScheme, linkTo = "#", children }) => {
  	return (
  		<a href={linkTo} className={linkStyles({ colorScheme })}>
  			{children}
  		</a>
  	);
  };
  
  

  And here is usage of component

  
  <Link colorScheme="light" linkTo="https://example.com">
  	<AppleIcon /> Download
  </Link>
  <Link colorScheme="dark" linkTo="https://example.com">
  	<AndroidIcon /> Download
  </Link>
  

  So as you can see, my component is very different. Firstly, i used TypeScript, and i highly recommend you to learn it, without knowledge of TS you will not find job nowadays. Secondly, i'm using children props in my component also CVA, to make link component variants. With the help of CVA you can easily make different uis for your components, it is easy to add new styles and modify old ones, if you are using tailwind or plain classes. I think we both will agree that my component is much more versatile, and it has more structure, and it is much more easier to maintain. Of course if you don't like to use CVA you always can go for Factory Pattern, and use switch or if else.

  Happy Coding ❤️

  0