added close tab icon

JumboCode · Nov 12, 2024 · 5eace2f · 5eace2f
1 parent 070664b
commit 5eace2f
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/src/components/DashboardAlert.tsx b/src/components/DashboardAlert.tsx
@@ -8,27 +8,30 @@ interface DashboardAlertProps {
 
 const DashboardAlert = ({ Title, Subtext }: DashboardAlertProps) => {
     return (
-        <div className="ml-8 flex items-start shadow-[0px_4px_8px_-2px_rgba(16,24,40,0.10),_0px_2px_4px_-2px_rgba(16,24,40,0.06)">
-            <div className="flex w-[40px] py-0 px-[8px] items-center gap-[10px] self-stretch rounded-tl-[8px] rounded-bl-[8px] bg-[#FF8B14]">
-                {/* orange tab thingy */}
-                <div>
+        <div className="ml-8 flex items-start relative">
+            {/* Side Tab */}
+            <div className="flex shadow-md w-[40px] py-0 px-[8px] items-center gap-[10px] self-stretch rounded-tl-[8px] rounded-bl-[8px] bg-[#FF8B14]">
                 <Icon icon="lucide:info" width="24" height="24" style={{ color: 'white' }} />
-                </div>
             </div>
-            {/* big orange box */}
-            <div className="flex w-[1094px] h-[116px] p-[24px] px-[28px] items-start gap-[16px] rounded-tr-[8px] rounded-br-[8px] border border-[#FF8B14] bg-[#FFF]">
-                <div className="flex flex-col justify-start items-start gap-2">
-                    <div className="grow shrink basis-0 text-[#101828] text-lg font-bold font-['Sofia Pro'] leading-normal">
-                        {Title}
-                    </div>
-                    <div className="grow shrink basis-0 text-[#344054] text-base font-normal font-['Sofia Pro'] leading-normal">
-                        {Subtext}
-                    </div>
+
+            {/* Main Content Box */}
+            <div className="flex flex-col shadow-md w-[1094px] h-[116px] p-[24px] px-[28px] items-start gap-[16px] rounded-tr-[8px] rounded-br-[8px] border border-[#FF8B14] bg-[#FFF] relative">
+                <div className="text-[#101828] text-lg font-bold font-['Sofia Pro'] leading-normal">
+                    {Title}
+                </div>
+                <div className="text-[#344054] text-base font-normal font-['Sofia Pro'] leading-normal">
+                    {Subtext}
+                </div>
+
+                {/* Close Icon positioned in the top-right corner */}
+                <div className="absolute top-6 right-7">
+                    <Icon icon="icon-park-outline:close-one" width="24" height="24" style={{ color: 'grey/500' }} />
                 </div>
-
             </div>
         </div>
     );
 };
 
 export default DashboardAlert;
+
+