feature/keyword-actions-ui

src/components/shared/HeaderPage.tsx

@@ -3,34 +3,34 @@ import UrlDropdown from "./UrlDropdown"
 
 const HeaderPage = ({ title }: { title: string }) => {
     return (
-        <div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4">
+        <div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4 justify-between">
             <div className="flex items-baseline gap-4 flex-wrap">
                 <h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
 
                 {/* First SVG dot */}
-                <svg 
-                    xmlns="http://www.w3.org/2000/svg" 
-                    width="4" 
-                    height="4" 
-                    viewBox="0 0 4 4" 
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="4"
+                    height="4"
+                    viewBox="0 0 4 4"
                     fill="none"
                     className="flex-shrink-0 -translate-y-1"
                 >
-                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                    <circle cx="2" cy="2" r="2" fill="#E9EAF1" />
                 </svg>
 
                 <UrlDropdown />
 
                 {/* Second SVG dot */}
-                <svg 
-                    xmlns="http://www.w3.org/2000/svg" 
-                    width="4" 
-                    height="4" 
-                    viewBox="0 0 4 4" 
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="4"
+                    height="4"
+                    viewBox="0 0 4 4"
                     fill="none"
                     className="flex-shrink-0 -translate-y-1"
                 >
-                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                    <circle cx="2" cy="2" r="2" fill="#E9EAF1" />
                 </svg>
 
                 <div className="flex gap-1 flex-wrap">
@@ -38,7 +38,16 @@ const HeaderPage = ({ title }: { title: string }) => {
                     <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
                     <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
                 </div>
+
             </div>
+
+            <button className='bg-[#fff] border px-2 sm:px-3 py-2 rounded-lg text-sm sm:text-md font-medium transition-colors flex items-center gap-2'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <path d="M2.25 12.5735V14.1618C2.25 14.583 2.42779 14.987 2.74426 15.2848C3.06072 15.5827 3.48995 15.75 3.9375 15.75H14.0625C14.5101 15.75 14.9393 15.5827 15.2557 15.2848C15.5722 14.987 15.75 14.583 15.75 14.1618V12.5735M4.78125 6.22059L9 2.25M9 2.25L13.2187 6.22059M9 2.25V11.7794" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+
+                <span>Export to Slides</span>
+            </button>
         </div>
     )
 }