Merge pull request #30 from brunomachadors/29-feat-improve-clarity-of…

…-skills-button-interactivity feat: Improve SkillButton component with dynamic icons and centralize…
brunomachadors · Jan 7, 2025 · 6909543 · 6909543
2 parents 2a4b6ef + 5d81c85
commit 6909543
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 15 deletions.
diff --git a/public/file.svg b/public/file.svg
diff --git a/public/globe.svg b/public/globe.svg
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/public/window.svg b/public/window.svg
diff --git a/src/app/components/Button/SkillButton.tsx b/src/app/components/Button/SkillButton.tsx
@@ -1,19 +1,20 @@
 import { skillColors, defaultSkillColor } from '../../styles/skillStyles';
+import { FiChevronRight, FiChevronDown } from 'react-icons/fi'; // Ícones
 
 interface SkillButtonProps {
   text: string;
   description?: string;
   isActive: boolean;
   onClick: () => void;
-  testId?: string; // Novo parâmetro para test ID
+  testId?: string;
 }
 
 export default function SkillButton({
   text,
   description = 'This is a placeholder description for the skill.',
   isActive,
   onClick,
-  testId, // Recebendo test ID
+  testId,
 }: SkillButtonProps) {
   const colorClasses = skillColors[text] || defaultSkillColor;
 
@@ -28,7 +29,7 @@ export default function SkillButton({
         alignItems: 'center',
         justifyContent: 'center',
       }}
-      data-test-id={testId} // Adicionando test ID ao container principal
+      data-test-id={testId}
     >
       <button
         className={`border ${
@@ -39,20 +40,27 @@ export default function SkillButton({
           textAlign: 'center',
           whiteSpace: 'normal',
         }}
-        data-test-id={`${testId}-button`} // Adicionando test ID específico para o botão
+        data-test-id={`${testId}-button`}
       >
         <span
-          className={`font-bold transition-all duration-300 ${
-            isActive ? 'text-2xl sm:text-2xl px-4 sm:px-12' : 'text-lg'
+          className={`font-bold transition-all duration-300 flex items-center gap-2 ${
+            isActive
+              ? 'text-2xl sm:text-2xl px-4 sm:px-12 justify-center'
+              : 'text-lg'
           }`}
-          data-test-id={`${testId}-text`} // Test ID para o texto
+          data-test-id={`${testId}-text`}
         >
+          {isActive ? (
+            <FiChevronDown className="inline" />
+          ) : (
+            <FiChevronRight className="inline" />
+          )}
           {text}
         </span>
         {isActive && (
           <p
             className={`mt-4 text-m sm:text-xl ${colorClasses} px-4 sm:px-12`}
-            data-test-id={`${testId}-description`} // Test ID para a descrição
+            data-test-id={`${testId}-description`}
           >
             {description}
           </p>

diff --git a/src/app/contacts/page.tsx b/src/app/contacts/page.tsx
@@ -61,7 +61,7 @@ export default function ContactPage() {
 
         <form
           onSubmit={handleSubmit}
-          className="w-3/4 border border-white p-8 rounded-lg shadow-md"
+          className="w-full sm:w-3/4 border border-white p-8 rounded-lg shadow-md"
           data-test-id="contact-form"
           aria-labelledby="contact-page-title"
         >
@@ -137,7 +137,7 @@ export default function ContactPage() {
         aria-labelledby="follow-me-title"
       >
         <h2
-          className="text-2xl font-semibold text-yellow-500 mb-4"
+          className="text-2xl font-semibold text-yellow-500 mt-8 mb-4"
           id="follow-me-title"
         >
           Follow Me