mohammedsaid18/dashboard
1
0
نسخ 2
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

fixing styles

تصفح المصدر
هذا الالتزام موجود في:
Your Name
2025-10-12 13:22:38 +00:00
الأصل 93d9a598a8
التزام c683ba6252
11 ملفات معدلة مع 147 إضافات و83 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

3
src/assets/icons/iconheader/info.svg Normal file
عرض الملف

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20" id="Info">
<path d="M10 .4C4.697.4.399 4.698.399 10A9.6 9.6 0 0 0 10 19.601c5.301 0 9.6-4.298 9.6-9.601 0-5.302-4.299-9.6-9.6-9.6zm.896 3.466c.936 0 1.211.543 1.211 1.164 0 .775-.62 1.492-1.679 1.492-.886 0-1.308-.445-1.282-1.182 0-.621.519-1.474 1.75-1.474zM8.498 15.75c-.64 0-1.107-.389-.66-2.094l.733-3.025c.127-.484.148-.678 0-.678-.191 0-1.022.334-1.512.664l-.319-.523c1.555-1.299 3.343-2.061 4.108-2.061.64 0 .746.756.427 1.92l-.84 3.18c-.149.562-.085.756.064.756.192 0 .82-.232 1.438-.719l.362.486c-1.513 1.512-3.162 2.094-3.801 2.094z" fill="#999bad" class="color000000 svgShape"></path>
</svg>
جنبًا إلى جنب

بعد

العرض:  |  الارتفاع:  |  الحجم: 686 B

6
src/components/DashboardGrid.tsx
عرض الملف

@@ -28,7 +28,7 @@ import Map from "../assets/icons/maps.svg";
import TotalBacklinks from "../assets/icons/iconheader/total.svg";
import ActiveKeywords from "../assets/icons/iconheader/active.svg";
import PortfolioPerformance from "../assets/icons/iconheader/portfolio.svg";
import InfoBadge from "../assets/icons/iconheader/Info-badge.png";
import InfoBadge from "../assets/icons/iconheader/info.svg";
import Amazon from "../assets/icons/amazon.svg";
interface TagContent {
@@ -488,7 +488,7 @@ export default function DashboardGrid() {
<div className="flex flex-col px-2 sm:px-4">
<div className="flex items-center gap-2">
<span className="text-xl sm:text-2xl text-gray-500 font-bold">{value}</span>
<span className="text-xl sm:text-2xl font-bold">{value}</span>
{tooltipText && <div className="relative">
{/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
@@ -503,7 +503,7 @@ export default function DashboardGrid() {
)}
</div>}
</div>
<div className="text-sm sm:text-base lg:text-lg text-gray-500 ">{title}</div>
<div className="text-sm sm:text-base lg:text-lg text-gray-500 font-normal ">{title}</div>
<div className="text-sm sm:text-base lg:text-lg text-gray-500 flex items-center gap-2">
<span className="text-sm sm:text-base lg:text-lg text-gray-500 font-bold">{valueChange}</span>
</div>

5
src/components/Portfolio/BacklinkTypeDropdown.tsx
عرض الملف

@@ -28,11 +28,12 @@ const BacklinkTypeDropdown = ({ options, title, subTitle }: { options: Record<st
return (
<div className='relative' ref={dropdownRef}>
<button
className={`border rounded-lg px-3 py-1 bg-white text-gray-500 font-medium flex items-center text-md ${dropdownOpen ? "border-2 border-solid border-blue-500" : ""}`}
className={`border rounded-lg px-3 py-1 bg-white font-normal flex items-center text-md ${dropdownOpen ? "border-2 border-solid border-blue-500" : ""}`}
onClick={() => setDropdownOpen(v => !v)}
>
{title}
<ChevronDown className='ml-2' />
<ChevronDown className='ml-2 text-[#65677D]' />
</button>
{dropdownOpen && (
<div className={`absolute z-10 bg-white shadow-lg border rounded-lg top-[110%] right-0 px-4 py-3 min-w-[150px] `}>

44
src/components/Strategy/ProgressMetrics.tsx
عرض الملف

@@ -14,7 +14,7 @@ function ProgressMetrics() {
<div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
<div className="flex items-center md:flex-row flex-col justify-between pb-3 px-2">
<h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3>
<h3 className="text-lg font-bold text-[#2B2D3B]">CPA Los Angeles</h3>
{/* Example 2: With Completed Status */}
<div>
<Stepper
@@ -84,17 +84,35 @@ function ProgressMetrics() {
{/* Performance metrics with chart */}
<div className="flex items-center gap-4">
<div className="w-42 h-24 relative">
<svg viewBox="0 0 96 48" className="w-full h-full">
<defs>
<linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
<stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
</linearGradient>
</defs>
<path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
<path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
<circle cx="96" cy="15" r="2" fill="#10B981" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="119" height="71" viewBox="0 0 119 71" fill="none">
<rect width="118" height="70" transform="translate(0.75 0.907593)" fill="white"/>
<mask id="mask0_11446_9597" maskUnits="userSpaceOnUse" x="3" y="14" width="114" height="52">
<path d="M5.64838 59.4745C5.29306 59.7785 4.46666 60.91 3.91666 61.6963C3.72883 61.9648 3.61438 62.2769 3.57864 62.6027L3.55778 62.7928C3.42792 63.9766 4.35494 65.0109 5.54585 65.0109H114.083C115.187 65.0109 116.083 64.1155 116.083 63.0109V16.0255C116.083 15.4493 115.635 14.9719 115.06 14.934C114.828 14.9188 114.598 14.9775 114.402 15.1023C112.937 16.0346 110.35 17.6811 109.717 18.0872C109.166 18.4407 108.066 18.4994 107.312 18.4766C107.009 18.4675 106.719 18.3693 106.459 18.2136L103.127 16.2099C102.995 16.1305 102.855 16.0663 102.707 16.0216C101.783 15.7416 100.103 15.3214 99.3211 15.4551C98.5905 15.5801 96.2353 15.6692 94.6916 15.7109C94.2535 15.7228 93.8327 15.8756 93.4864 16.1443C91.7793 17.469 88.8713 19.5764 87.6518 19.9024C86.5411 20.1994 84.0773 20.5975 82.3848 20.8485C81.7606 20.9411 81.2146 21.3178 80.904 21.8672C79.6241 24.1312 77.4572 27.7623 76.1946 29.1601C74.3912 31.1569 74.073 31.1569 72.5878 32.246C71.9824 32.6899 71.3514 32.9171 70.8125 33.0212C70.0862 33.1614 69.3304 33.4254 68.8712 34.0053L67.3896 35.8765L65.7129 38.0624C65.4134 38.4528 64.8477 38.5121 64.4738 38.1922C64.0004 37.7872 63.264 38.005 63.0643 38.5952C62.7131 39.6334 62.271 40.7595 61.9793 40.9591C61.4489 41.3222 60.7063 42.5928 60.1759 42.9559C58.9733 43.779 57.1758 42.0663 56.7173 43.4496L56.269 44.8018C56.1202 45.2508 55.8168 45.6318 55.4157 45.8826C54.8933 46.2093 54.2639 46.6112 53.9169 46.8586C53.2803 47.3124 51.2647 48.7646 50.6282 48.8553C49.9917 48.9461 46.4909 49.6722 45.4301 50.0353C44.7384 50.272 43.7648 51.6502 43.1411 52.6761C42.898 53.0761 42.5396 53.3957 42.1053 53.5702C40.6848 54.1409 38.5818 55.0196 38.0042 55.3902C37.1555 55.9348 34.079 55.6625 32.9121 55.3902C31.7452 55.1179 28.6687 54.5733 26.9713 54.5733C25.274 54.5733 26.1227 56.5701 25.274 57.1147C24.595 57.5503 22.5865 58.1433 21.6671 58.3853L17.8781 58.9527C17.5791 58.9974 17.2941 59.1094 17.0446 59.2802L15.9356 60.0392C15.5277 60.3184 15.031 60.437 14.5413 60.3695C13.3132 60.2004 11.6092 59.9553 11.0586 59.8375C10.21 59.656 9.99779 59.2022 7.55784 58.6576C5.11789 58.113 6.17874 59.0207 5.64838 59.4745Z" fill="url(#paint0_linear_11446_9597)"/>
</mask>
<g mask="url(#mask0_11446_9597)">
<path opacity="0.25" d="M5.64839 59.4745C5.29307 59.7785 4.46667 60.91 3.91667 61.6963C3.72884 61.9648 3.61438 62.2769 3.57864 62.6027L3.55778 62.7928C3.42792 63.9766 4.35494 65.0109 5.54585 65.0109H114.083C115.188 65.0109 116.083 64.1155 116.083 63.0109V16.0255C116.083 15.4493 115.636 14.9719 115.061 14.934C114.829 14.9188 114.599 14.9775 114.403 15.1023C112.937 16.0346 110.351 17.6811 109.718 18.0872C109.167 18.4407 108.066 18.4994 107.312 18.4766C107.01 18.4675 106.719 18.3693 106.46 18.2136L103.127 16.2099C102.995 16.1305 102.855 16.0663 102.708 16.0216C101.784 15.7416 100.103 15.3214 99.3215 15.4551C98.591 15.5801 96.2357 15.6692 94.692 15.7109C94.2539 15.7228 93.8331 15.8756 93.4868 16.1443C91.7797 17.469 88.8717 19.5764 87.6522 19.9024C86.5415 20.1994 84.0776 20.5975 82.3852 20.8485C81.7609 20.9411 81.215 21.3178 80.9044 21.8672C79.6244 24.1311 77.4575 27.7623 76.195 29.1601C74.3915 31.1569 74.0733 31.1569 72.5881 32.246C71.9827 32.6899 71.3517 32.9171 70.8128 33.0212C70.0865 33.1614 69.3307 33.4254 68.8715 34.0053L67.3899 35.8765L65.7132 38.0624C65.4137 38.4528 64.848 38.5121 64.4741 38.1922C64.0007 37.7872 63.2643 38.005 63.0646 38.5952C62.7133 39.6334 62.2713 40.7595 61.9796 40.9591C61.4491 41.3222 60.7065 42.5928 60.1761 42.9559C58.9735 43.779 57.176 42.0663 56.7175 43.4496L56.2693 44.8018C56.1204 45.2508 55.817 45.6318 55.416 45.8826C54.8935 46.2093 54.2641 46.6112 53.9171 46.8586C53.2806 47.3124 51.265 48.7646 50.6284 48.8553C49.9919 48.9461 46.4911 49.6722 45.4303 50.0353C44.7386 50.272 43.765 51.6502 43.1413 52.6761C42.8982 53.0761 42.5398 53.3957 42.1055 53.5702C40.685 54.1409 38.5819 55.0196 38.0043 55.3902C37.1556 55.9348 34.0792 55.6625 32.9122 55.3902C31.7453 55.1179 28.6688 54.5733 26.9714 54.5733C25.2741 54.5733 26.1228 56.5701 25.2741 57.1147C24.5951 57.5503 22.5866 58.1433 21.6672 58.3853L17.8781 58.9527C17.5791 58.9974 17.2942 59.1094 17.0447 59.2802L15.9357 60.0392C15.5278 60.3184 15.031 60.437 14.5414 60.3695C13.3133 60.2004 11.6093 59.9553 11.0587 59.8375C10.21 59.656 9.99782 59.2022 7.55786 58.6576C5.1179 58.113 6.17875 59.0207 5.64839 59.4745Z" fill="url(#paint1_linear_11446_9597)"/>
</g>
<path d="M3.63379 62.1066C4.12877 61.3805 5.22481 59.8376 5.6491 59.4745C6.17946 59.0207 5.11862 58.113 7.55857 58.6576C9.99851 59.2022 10.2107 59.656 11.0594 59.8375C11.6099 59.9553 13.3139 60.2004 14.542 60.3695C15.0317 60.437 15.5285 60.3184 15.9364 60.0392L17.0453 59.2802C17.2948 59.1094 17.5798 58.9974 17.8788 58.9527L21.6678 58.3853C22.5872 58.1433 24.5958 57.5503 25.2747 57.1147C26.1234 56.5701 25.2747 54.5733 26.9721 54.5733C28.6694 54.5733 31.7459 55.1179 32.9128 55.3902C34.0797 55.6625 37.1562 55.9348 38.0049 55.3902C38.5825 55.0196 40.6855 54.1409 42.106 53.5702C42.5404 53.3957 42.8987 53.0761 43.1419 52.6761C43.7655 51.6502 44.7391 50.272 45.4308 50.0353C46.4917 49.6722 49.9924 48.9461 50.629 48.8553C51.2655 48.7646 53.2811 47.3124 53.9176 46.8586C54.2646 46.6112 54.894 46.2093 55.4165 45.8826C55.8175 45.6318 56.1209 45.2508 56.2698 44.8018L56.718 43.4496C57.1765 42.0663 58.974 43.779 60.1766 42.9559C60.707 42.5928 61.4496 41.3222 61.98 40.9591C62.2717 40.7595 62.7138 39.6334 63.0651 38.5952C63.2647 38.005 64.0011 37.7872 64.4746 38.1922C64.8484 38.5121 65.4142 38.4528 65.7136 38.0624L67.3903 35.8765L68.8719 34.0053C69.3311 33.4254 70.0869 33.1614 70.8132 33.0212C71.3521 32.9171 71.9832 32.6899 72.5885 32.246C74.0737 31.1569 74.3919 31.1569 76.1954 29.1601C77.4579 27.7623 79.6248 24.1312 80.9048 21.8672C81.2153 21.3178 81.7613 20.9411 82.3856 20.8485C84.078 20.5975 86.5419 20.1994 87.6525 19.9024C88.872 19.5764 91.78 17.469 93.4871 16.1443C93.8334 15.8756 94.2542 15.7228 94.6923 15.7109C96.236 15.6692 98.5913 15.5801 99.3218 15.4551C100.103 15.3214 101.784 15.7416 102.708 16.0216C102.855 16.0663 102.995 16.1305 103.127 16.2099L106.46 18.2136C106.719 18.3693 107.01 18.4675 107.312 18.4766C108.067 18.4994 109.167 18.4407 109.718 18.0872C110.316 17.7033 112.66 16.211 114.153 15.2614C114.511 15.0332 114.933 14.9256 115.357 14.9535L116.083 15.0013" stroke="url(#paint2_linear_11446_9597)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_11446_9597" x1="59.6985" y1="14.9105" x2="59.6985" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#DF8D2D"/>
<stop offset="1" stop-color="#794D18" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_11446_9597" x1="3.31445" y1="39.9607" x2="142.824" y2="39.942" gradientUnits="userSpaceOnUse">
<stop stop-color="#2F82F8"/>
<stop offset="0.348569" stop-color="#0EB65E"/>
<stop offset="0.67237" stop-color="#F6CA09"/>
<stop offset="1" stop-color="#F5484A"/>
</linearGradient>
<linearGradient id="paint2_linear_11446_9597" x1="3.63379" y1="38.5085" x2="142.748" y2="38.4888" gradientUnits="userSpaceOnUse">
<stop stop-color="#2F82F8"/>
<stop offset="0.348569" stop-color="#0EB65E"/>
<stop offset="0.67237" stop-color="#F6CA09"/>
<stop offset="1" stop-color="#F5484A"/>
</linearGradient>
</defs>
</svg>
</div>
<div className="text-right">
<div className="flex items-center justify-start gap-1 mb-1">
@@ -103,7 +121,7 @@ function ProgressMetrics() {
<span className="text-lg text-green-600 font-medium">+10</span>
</div>
<div className="flex items-center justify-start gap-1 mb-1">
<img src={Google} className="w-5 h-5 mr-2" alt="" />
<img src={Map} className="w-5 h-8 mr-2" alt="" />
<span className="text-lg font-bold text-gray-900">5</span>
<span className="text-lg text-green-600 font-medium">+3</span>
</div>

62
src/components/Strategy/RoadmapSidebar.tsx
عرض الملف

@@ -1,3 +1,6 @@
// بسم الله الرحمن الرحيم
// بسم الله الرحمن الرحيم
import Vector from "../../assets/icons/Vector.png"
import Vector2 from "../../assets/icons/Vector2.png"
@@ -26,11 +29,15 @@ const RoadmapSidebar = ({
null
:
<div className="mb-2 border-b-2 border-gray-200 p-6">
<h2 className="text-xl font-bold text-gray-900 mb-2">Roadmap</h2>
<div className="flex items-center gap-2">
<span className="text-3xl font-bold text-green-600">1001</span>
<div className="flex items-center gap-4">
<span
className="text-3xl font-bold text-[#198135] rounded-lg inline-block px-4 py-2"
style={{ background: '#E8FCED' }}
>
1001
</span>
<div>
<div className="font-semibold text-gray-900">Total Links</div>
<div className="font-bold font-text-gray-900">Total Links</div>
<div className="text-sm text-gray-500">Across all keywords</div>
</div>
</div>
@@ -38,29 +45,34 @@ const RoadmapSidebar = ({
}
<div className="space-y-2 pt-0">
<div className="space-y-0 pt-0">
{keywords.map((keyword, index) => (
<button
key={index}
onClick={() => onKeywordSelect(keyword)}
className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 border-2 border-dashed border-blue-300" : "hover:bg-gray-50"}`}
>
{
selectedKeyword === keyword
?
<>
<img src={Vector} alt={keyword} className="w-4 h-4" />
<span className="text-md text-blue-600 font-bold">{keyword}</span>
</>
:
<>
<img src={Vector2} alt={keyword} className="w-4 h-4" />
<span className="text-md text-gray-700 font-bold">{keyword}</span>
</>
<div key={index} className="border-b border-gray-200 last:border-b-0 ">
<button
onClick={() => onKeywordSelect(keyword)}
className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 border border-blue-200" : "hover:bg-gray-50"}`}
>
{
selectedKeyword === keyword
?
<>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#4C60E5"/>
</svg>
<span className="text-md text-blue-600 font-bold">{keyword}</span>
</>
:
<>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#787B91"/>
</svg>
<span className="text-md text-gray-700 font-bold">{keyword}</span>
</>
}
</button>
}
</button>
</div>
))}
</div>
</div>

29
src/components/shared/Header.tsx
عرض الملف

@@ -106,7 +106,7 @@ const Header = () => {
return (
<header className="pb-20">
<nav className="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
<nav className="bg-[#E6ECFB] backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
<div className="container mx-auto px-4 py-3 flex justify-between items-center">
{/* Left: Logo */}
<div className="flex items-center justify-between w-full md:w-auto">
@@ -134,7 +134,7 @@ const Header = () => {
<Link
key={index}
to={link.to}
className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${location.pathname === link.to
className={`font-normal px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${location.pathname === link.to
? 'bg-white blue-500/80 text-[#4C60E5] shadow-md'
: 'text-black/80 hover:bg-blue-200/50'
}`}
@@ -154,10 +154,14 @@ const Header = () => {
{/* Right Side - Desktop Only */}
<div className="hidden md:flex items-center space-x-4 relative">
{/* Add Keyword Button */}
<button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
<Plus size={18} />
<span>Add Keyword</span>
</button>
<button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
<Plus size={18} />
<span>Add Keywords</span>
</button>
<div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
{/* Profile Dropdown */}
<div className="relative">
@@ -168,7 +172,7 @@ const Header = () => {
<img
src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
alt="User avatar"
className="w-10 h-10 rounded-full border-2 border-orange-400"
className="w-10 h-10 rounded-full "
/>
<ChevronDown
size={16}
@@ -236,10 +240,15 @@ const Header = () => {
</div>
{/* Add Keyword Button */}
<button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
{/* <button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
<Plus size={18} />
<span>Add Keyword</span>
</button>
</button> */}
<div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
{/* Profile menu */}
<div className="mt-4 p-3 bg-white rounded-xl shadow-md">
@@ -250,7 +259,7 @@ const Header = () => {
className="w-10 h-10 rounded-full"
/>
<div>
<p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
<p className="font-semibold text-sm text-gray-800">Mohammed Sukkar</p>
<p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
</div>
</div>

10
src/components/shared/HeaderPage.tsx
عرض الملف

@@ -6,9 +6,17 @@ const HeaderPage = ({ title }: { title: string }) => {
<div className="flex space-x-4 my-0 md:my-4 lg:flex-row flex-col items-baseline">
<h1 className="text-3xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
</svg>
<UrlDropdown />
<div className="flex space-x-4">
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
<circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
</svg>
<div className="flex gap-1">
<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" />

4
src/components/shared/MetricCard.tsx
عرض الملف

@@ -34,7 +34,7 @@ console.log(Img);
return (
<div
className="flex-1 min-w-[50px] bg-white rounded-xl shadow-sm p-2 flex items-center space-x-2 relative"
className="flex-1 min-w-[50px] bg-white rounded-xl p-2 flex items-center space-x-2 relative"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
@@ -48,7 +48,7 @@ console.log(Img);
<div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2`}>
<span className="text-sm text-gray-400">{!tooltipText && label}</span>
<span className="text-gray-600 bg-gray-200 px-1 py-1 rounded-md">{value}</span>
<span className="text-[#787B91] bg-gray-200 px-1 py-1 rounded-md">{value}</span>
{valueChange && (
<div className="flex items-center text-sm font-semibold text-green-500">
{Icon && (

22
src/components/shared/UrlDropdown.tsx
عرض الملف

@@ -5,9 +5,7 @@ const urlOptions = [
"http://www.mysite.com",
"http://www.myseosucks.com",
"http://www.sribbble.com",
"http://www.myseosucks.com",
"http://www.myseosucks.com",
"http://www.myseosucks.com",
"http://onekeyword.com"
];
export default function UrlDropdown() {
@@ -29,13 +27,21 @@ export default function UrlDropdown() {
>
<span className="truncate text-gray-800">{selected}</span>
<div className="flex items-center gap-2">
<span className="text-gray-500 text-xs">▼</span>
{isOpen ? (
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L5 1L1 5" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
) : (
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5 5L9 1" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
)}
</div>
</div>
{/* Dropdown list */}
{isOpen && (
<div className="absolute mt-1 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10 ">
<div className="absolute mt-1 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10">
{urlOptions.map((url, index) => (
<div
key={index}
@@ -45,7 +51,9 @@ export default function UrlDropdown() {
>
<span className="truncate">{url}</span>
{selected === url && (
<span className="text-green-500 text-sm">✔</span>
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="18" viewBox="0 0 66 18" fill="none">
<path d="M47 7.25L51 11.25L59.5 2.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
)}
</div>
))}
@@ -53,4 +61,4 @@ export default function UrlDropdown() {
)}
</div>
);
}
}

43
src/pages/Portfolio.tsx
عرض الملف

@@ -70,7 +70,7 @@ function Portfolio() {
return (
<ContainerPage>
<HeaderPage title="Live Library" />
<HeaderPage title="Live Signals Portfolio" />
<div className='flex flex-col lg:flex-row gap-6 lg:gap-8 mx-auto'>
<RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
@@ -80,30 +80,35 @@ function Portfolio() {
{/* Title Bar */}
<div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
<div className='flex flex-col items-start gap-2'>
<span className='text-xl sm:text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
<span className='text-xl sm:text-2xl font-bold '>CPA Los Angeles</span>
<span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
<span className='font-bold pr-2 sm:pr-3 text-black'>Links:</span>
Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
<span className='font-bold pr-2 sm:pr-3 text-[#2B2D3B]'>Links:</span>
Indexed <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] border-[#B8D8EB] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
</span>
<span className='flex items-center gap-2 text-gray-800 text-sm sm:text-md'>Content Publishing:
<span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border text-xs sm:text-sm'>Locked</span>
<span className='flex items-center font-normal gap-2 text-[#787B91] sm:text-md'>Content Publishing
<span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border border-[#F7D2DF] text-xs sm:text-sm'>Locked</span>
</span>
</div>
<div className='flex flex-wrap items-center gap-2 sm:gap-3'>
<BacklinkTypeDropdown options={
{
Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
}} title="Backlink Type" subTitle="Show rings:" />
}} title="Backlink Type" subTitle="Show rings" />
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings" />
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings" />
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings:" />
<BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings" />
<button className='bg-[#fff] border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
<path d="M1.80154 10.583C1.7998 10.2479 1.7998 9.88794 1.7998 9.49999C1.7998 6.80829 1.7998 5.46245 2.37857 4.45999C2.75773 3.80327 3.30308 3.25792 3.95981 2.87876C4.96226 2.29999 6.30811 2.29999 8.9998 2.29999C11.6915 2.29999 13.0373 2.29999 14.0398 2.87876C14.6965 3.25792 15.2419 3.80327 15.621 4.45999C16.1998 5.46245 16.1998 6.80829 16.1998 9.49999C16.1998 12.1917 16.1998 13.5375 15.621 14.54C15.2419 15.1967 14.6965 15.7421 14.0398 16.1212C13.0373 16.7 11.6915 16.7 8.9998 16.7C8.60253 16.7 8.23457 16.7 7.8927 16.6981" stroke="#65677D" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.99503 6.79999H11.7002M11.7002 6.79999V11.5059M11.7002 6.79999L2.7002 15.8" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<button className='bg-[#fff] text-gray-500 border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
<img src={Share2} alt="" className='w-4 h-4' />
<span>Export</span>
</button>
</div>
@@ -112,22 +117,22 @@ function Portfolio() {
{/* Global Filter/Sort Header Row */}
<div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
<div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600'>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors '>
DR <SortIcon />
</span>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
DA <SortIcon />
</span>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
Traffic <SortIcon />
</span>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
Indexed <SortIcon />
</span>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
Interlinked <SortIcon />
</span>
<span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
<span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
Date <SortIcon />
</span>
</div>

2
src/pages/Strategy.tsx
عرض الملف

@@ -19,7 +19,7 @@ function Strategy() {
return (
<ContainerPage>
<HeaderPage title="Strategy" />
<HeaderPage title="Strategy Overview" />
<div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%] gap-6 lg:gap-8">
<RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />