>codeshame
Score: 6.5 out of 10
6.5/10
verdict: could_be_worse

"Messy React component with questionable styling"

lang: JavaScript·39 lines
//your_submission
PasswordPanic.js
"use client"

import { useState } from "react"
import Button from "@/src/components/aon/Button"
import { ChangePasswordModal } from "../ChangePasswordModal"

export function PasswordSection() {
  const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false)

  return (
    <>
      <div className="flex w-full flex-col items-start gap-8 py-4 lg:flex-row lg:items-center ">
        <div className="w-full max-w-[486px] lg:w-[486px]">
          <h2 className="mb-2 text-h4 font-semibold text-aon-text2">Senha</h2>
          <p className="text-p2 text-aon-text3">
            Nesta seção, você pode alterar sua senha. Para isso, você precisará inserir a senha
            atual e definir uma nova, garantindo mais segurança para sua conta.
          </p>
        </div>

        <div className="w-full lg:w-[200px] lg:flex-none">
          <Button
            variant="primary"
            className="w-full px-6 py-2.5"
            onClick={() => setIsChangePasswordModalOpen(true)}
          >
            Alterar senha
          </Button>
        </div>
      </div>

      <ChangePasswordModal
        isOpen={isChangePasswordModalOpen}
        onClose={() => setIsChangePasswordModalOpen(false)}
      />
    </>
  )
}
//detailed_analysis
?

Inconsistent styling

Why are you using both max-w-[486px] and w-[486px]? Make up your mind, and for the love of all things good, use a consistent naming convention for your classes.
?

Unnecessary whitespace

All that extra whitespace is making the code look like it was written by a kindergartener who just discovered the space bar. Get a code formatter, or better yet, learn to use it.
!

Missing input validation

You're just blindly opening a modal without checking if the user has actually entered anything. What if they just click the button without reading the instructions? You're basically asking for a support ticket apocalypse.
//suggested_fix
PasswordPanic_fixed.js
+import { useState } from 'react';
+import Button from '@/src/components/aon/Button';
+import { ChangePasswordModal } from '../ChangePasswordModal';
+
+export function PasswordSection() {
+ const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);
+
+ return (
+ <>
+ <div className="flex flex-col items-start gap-8 py-4 lg:flex-row lg:items-center">
+ <div className="w-full max-w-[486px] lg:w-[486px]">
+ <h2 className="mb-2 text-h4 font-semibold text-aon-text2">Senha</h2>
+ <p className="text-p2 text-aon-text3">
+ Nesta seção, você pode alterar sua senha. Para isso, você precisará inserir a senha atual e definir uma nova, garantindo mais segurança para sua conta.
+ </p>
+ </div>
+
+ <div className="w-full lg:w-[200px] lg:flex-none">
+ <Button
+ variant="primary"
+ className="w-full px-6 py-2.5"
+ onClick={() => setIsChangePasswordModalOpen(true)}
+ >
+ Alterar senha
+ </Button>
+ </div>
+ </div>
+
+ <ChangePasswordModal
+ isOpen={isChangePasswordModalOpen}
+ onClose={() => setIsChangePasswordModalOpen(false)}
+ />
+ </>
+ );
+}