feat: create header component

[gllherme]

Sumary
Creates the header component with flexibility for future changes and/or additions. The additions include the main header, its two controlled states (Guest and Logged In), and its subcomponents with mocked values.

• Issue: Create header component #3

Changes

• src/components/Header/index.tsx: Creates the main Header component. The Logged In/Guest state is controlled by the "isLogged" constant which determines wheter <LoggedInComponents/> is rendered or not.

• src/components/Header/HeaderSearch/index.tsx: Creates the HeaderSearch component. This is a controlled input that is controlled in the parent component by the handleChange function and activated by pressing the Enter key.

• src/components/Header/HeaderNavItem/index.tsx: Creates the NavItem component that has three styles: default, hover and active. The "isActive" constant checks if the NavItem href is the current page, if true, it makes the NavItem active.

• src/components/Header/AccountNotification/index.tsx: Creates the AccountNotification component. This component simply renders an icon that can bet set through props and the number of notifications.

• src/components/Header/AccountMenu/index.tsx: Creates the AccountMenu component. This component shows the username and avatar of the logged in user.

• src/components/Header/HeaderBanner/index.tsx: Creates three banner components for warnings, announcements and twitch lives notifications. Each banner have a "message", href and "onClick" prop for different uses.

Images

Guest header:

Logged In header:

Header with banners:

Behavior:

[kaduwaengertner]

Really awesome, one small thing we forgot to say is that the header going to be fixed on top, so it matches with the other component style

Other than that looks pretty amazing

[edmolima]

You could use destructuring and create a default value when this data doesn't have filled

Example:

export default (props) => {
    const { username = "Kadoodle" } = props
    return (
        <h1>Hello {username}!</h1>;
    )
}

This will ensure that this component could be extensible

[guim0]

@edmolima
just a question, if the solution was like this:

export default ({username = "Kadoodle" } : IAccountMenu) => {
    return (
        <h1>Hello {username}!</h1>;
    )
}

Could work?

[edmolima]

Hey @guim0, yes this is absolutely work

I told to you use like receive "props" because I use this notation:

export const Example: FC<IExampleProps> = (props) => {
}

But anyway, you can use like this

export default ({username = "Kadoodle" } : IAccountMenu) => {
    return (
        <h1>Hello {username}!</h1>;
    )
}

I mean, do not use just export default anonymous function, is prefere to use export default NameComponent
this should be work better

[edmolima]

There is also a possibility of leaving all these hexadecimal values in variables

if it is not necessary to separate it into a file, it makes sense to leave it at the top of the file

[matheusmorett2]

I also think we should use variables instead of manually have the hexadecimal for each color definition

[matheusmorett2]

We can have <li><a></a></li> if we wanna follow the best HTML semantics practice. See https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure.

[gllherme]

you are absolutely right, going to fix it.

[matheusmorett2]

We should avoid using onClick on <div>, instead a <button> would be a better option for this case. See https://www.w3schools.com/accessibility/accessibility_buttons_links.php and https://www.yanandcoffee.com/2020/08/10/button-vs-div/ if you wanna understand how to still use a <div> but with a button role.

[gllherme]

great point, i'm going to add role="button" to this div since it's not really a button. thanks!

[matheusmorett2]

why having a inside a ? could this be just one with the 2 classes?

[guim0]

I think the purpose is to give a difference to the username text but add the "Hey, "

this could solve it:

on the component:

<p className={styles.greeting}>
       Hey, <span>{username}</span>
</p>

on CSS:

.greeting {
  font: 16px;
  font-weight: 400;
  color: #717F9E;
  
> span {
 font-weight: 600;
  color: #FFFFFF;
}

[matheusmorett2]

I see!! I missed that content on CSS.

[gllherme]

I think the purpose is to give a difference to the username text but add the "Hey, " this could solve it:

on the component:

<p className={styles.greeting}>
       Hey, <span>{username}</span>
</p>

on CSS:

.greeting {
  font: 16px;
  font-weight: 400;
  color: #717F9E;
  
> span {
 font-weight: 600;
  color: #FFFFFF;
}

that's it, the greeting and username have different colors and font-weight, thus explaining the nested spans but your solution has better html semantic. going to improve it. thanks!

[guim0]

LGTM

[mastercoks]

recomendo utilizar a lib https://lucide.dev/icons/search

[gllherme]

sim verdade, salvei esse svg antes de ver a lib e esqueci de apagar depois, vou corrigir.

[mastercoks]

eu removeria esses campos default e passaria eles na chamada desse componente

[gllherme]

coloquei esses valores default pra mockar o username e o avatar e depois remover quando for feita a integração com o serviço, mas realmente não faz muito sentido adicionar algo pra remover depois. vou fazer essa correção.

[mastercoks]

minha sugestão seria juntar tudo em um único componente HeaderBanner e passar uma prop type: 'warning' | 'announcement' | 'live'

import { AlertTriangle, LucideIcon, Megaphone } from "lucide-react";
import styles from "./style.module.css";
import { Twitch } from "@/assets/Icons";

type BannerType = "warning" | "announcement" | "live";

type Props = {
  type:  BannerType;
  href?: string;
  message: string;
  onClick?: () => void;
};

const bannerTypes: Record<BannerType, {icon: LucideIcon, style: string}> = {
  announcement: {
    icon: Megaphone,
    style: styles.announcement
  },
  live: {
    icon: Twitch,
    style: styles.live
  },
  warning: {
    icon: AlertTriangle,
    style: styles.warning
  }
}

const HeaderBanner: React.FC<Props> = ({ type, href, message, onClick }) => {
  const {icon: Icon, style} = bannerTypes[type];

  return (
    <div className={[styles.banner, style].join(" ")} onClick={onClick} role="button">
     <Icon className={styles.icon} /><a href={href} target="_blank">{message} Click here to know more.</a>
    </div>
  );
};

algo nesse sentido

[gllherme]

excelente sugestão, minha implementação tem muito código repetido, vou refazer esse componente.