Finish

04/Task04.js

@@ -23,7 +23,7 @@ const Task04 = () => {
                     <Tab label="Home">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
                     </Tab>
-                    <Tab label="Profile">
+                    <Tab label="Profile" active>
                         <p>Donec dignissim ultricies felis, eu dictum eros congue in. In gravida lobortis libero nec tempus. Cras rutrum nisl ut leo volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, tincidunt eu lacus.</p>
                     </Tab>
                     <Tab label="Contact" disabled>

src/components/Tabs/Tab.js

@@ -1,11 +1,18 @@
 import React from "react";
 import { TabButton } from "./Tabs.styled";
 
-const Tab = ({ label, active, children, onClick }) => {
+const Tab = ({ label, active, disabled, children, onClick }) => {
+    const handleClick = () => {
+        if (!disabled) {
+            onClick(label);
+        }
+    };
+
     return (
         <TabButton
-            onClick={() => onClick(label)}
-            className={active ? "active" : ""}
+            onClick={handleClick}
+            className={`${active ? "active" : ""} ${disabled ? "disabled" : ""}`}
+            disabled={disabled}
         >
             {label}
         </TabButton>

src/components/Tabs/Tabs.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { TabList, TabsContainer, TabContent } from './Tabs.styled';
 
 const Tabs = ({ children }) => {
-    const [activeTab, setActiveTab] = useState(children[0].props.label);
+    const [activeTab, setActiveTab] = useState('Profile');
 
     const handleClick = (label) => {
         setActiveTab(label);

src/components/Tabs/Tabs.styled.js

@@ -31,11 +31,20 @@ const TabButton = styled.button`
         background-color: #fff;
         border-color: #dee2e6 #dee2e6 #fff;
     }
+
+    &:not(.active) {
+        color: #007bff;
+    }
 
     &:not(.active):hover {
         border0color: transparent;
         color: #0056b3;
     }
+
+    &.disabled {
+        color: #6c757d;
+        cursor: default;
+    }
 `;
 
 const TabContent = styled.div`