Calculator App - Next13, TypeScript, Zustand & TailwindCSS

Hi @frbarbre! Nice Solution!

I have some suggestion for you:

• You can reduce nesting when writing logic using Guard Clause.

 function handleEquals() {
    if(secondArg.content === "") return; // ✅ Guard clause
    if(result) calculate(result, secondArg.content, operator, setResult)
    else  calculate(firstArg.content, secondArg.content, operator, setResult);

    softReset();
  }

• For button component, rather than passing custom style as props to create variation, you can define the styles variation inside the button component. Example:

type Variant = "equal" | "delete" | "reset"';

const variantStyles = {
equal : { bgColorDark : "", bgColorLight: "" , //...},
// ...other styles
}

export default function Button({
  handleClick,
  text,
  gridArea,
  operator,
  type,
  variant, // Receive variant instead👍
  hasSmallFont,
}: Props) {

I hope it helps! Cheers!