57 أسطر
2.5 KiB
TypeScript
57 أسطر
2.5 KiB
TypeScript
import MetricCard from "./MetricCard"
|
|
import UrlDropdown from "./UrlDropdown"
|
|
|
|
const HeaderPage = ({ title, buttonShow = false }: { title: string, buttonShow?: boolean }) => {
|
|
return (
|
|
<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"
|
|
fill="none"
|
|
className="flex-shrink-0 -translate-y-1"
|
|
>
|
|
<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"
|
|
fill="none"
|
|
className="flex-shrink-0 -translate-y-1"
|
|
>
|
|
<circle cx="2" cy="2" r="2" fill="#E9EAF1" />
|
|
</svg>
|
|
|
|
<div className="flex gap-1 flex-wrap">
|
|
<MetricCard value="12" label="DR" valueChange="+1" size="sm" />
|
|
<MetricCard value="14" label="DA" valueChange="+3" size="sm" />
|
|
<MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
|
|
</div>
|
|
|
|
</div>
|
|
{
|
|
buttonShow &&
|
|
<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>
|
|
)
|
|
}
|
|
|
|
export default HeaderPage |