EmployeeCard component refactor

[kopitek8]

The Problem

The code of the component is very difficult to read at the moment. Components inside the file are rendered conditionally in a lot of places.

Example

                <div>
                    {variant === 'detail' && (
                        <h3>
                            {name}
                        </h3>
                    )}
                    {variant === 'list' && (
                        <h5>
                            {name}
                        </h5>
                    )}
                    <div className={styles.position}>
                        {position}
                    </div>
                </div>

The Solution

Maybe render all the components conditionally on the top so that if the variant is a list, all the components for the list variant are rendered and vice versa for details.

Example

{ variant === 'list' && (
    LIST VARIANT COMPONENTS
)}

{ variant === 'details' && (
    DETAILS VARIANT COMPONENTS
)}