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

Add Page Keyword

تصفح المصدر
هذا الالتزام موجود في:
mohammedsaid18
2025-10-19 19:16:45 +03:00
الأصل 50d9c13f98
التزام 490aebbf8a
11 ملفات معدلة مع 94 إضافات و105 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

2
src/components/Analysis/StrategyHero.tsx
عرض الملف

@@ -75,7 +75,7 @@ function StrategyHero() {
</div>
{/* Dotted Line 2 */}
<div className="hidden md:block w-[158px] h-0.5 mt-[43px] shrink-0 absolute bottom-[70px] right-[280px]">
<div className="hidden md:block w-[168px] h-0.5 mt-[43px] shrink-0 absolute bottom-[70px] right-[280px]">
<svg width="163" height="5" viewBox="0 0 163 5" fill="none" xmlns="http://www.w3.org/2000/svg" className="opacity-60">
<path d="M2.8999 2.70001H160.85" stroke="#4C60E5" strokeWidth="3.9" strokeLinecap="round" strokeDasharray="0.13 9.23" />
</svg>

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

@@ -10,9 +10,9 @@ interface KeywordRowProps {
export function KeywordRow({ keyword }: KeywordRowProps) {
return (
<div className="grid grid-cols-12 gap-4 justify-items-cente px-6 pr-[52px] py-3 border-t border-grey-300 min-h-[54px]">
<div className="grid grid-cols-12 gap-4 justify-items-cente px-6 pr-[52px] py-3 border-t border-grey-300 min-h-[54px] hover:bg-gray-100 transition-colors">
<div className="flex items-center gap-1 mr-20">
<div className="flex items-center gap-1 mr-20 col-span-2" >
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className="shrink-0">
<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>

32
src/components/KeywordSection.tsx
عرض الملف

@@ -1,6 +1,8 @@
import { useState } from "react";
import { type KeywordSection as KeywordSectionType } from "../assets/keyword-data";
import { KeywordRow } from "./KeywordRow";
import MetricCard from "./shared/MetricCard";
import MetricTooltip from "./shared/MetricTooltip";
interface KeywordSectionProps {
section: KeywordSectionType;
@@ -17,12 +19,12 @@ export function KeywordSection({ section }: KeywordSectionProps) {
>
<div className="w-6 h-6 flex items-center justify-center shrink-0">
{isExpanded ? (
<svg width="6" height="12" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg" className="rotate-180">
<path d="M1 1L7 7L13 0.999999" stroke="#65677D" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8" fill="none">
<path d="M1 1L7 7L13 0.999999" stroke="#65677D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
</svg>
) : (
<svg width="6" height="12" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L7 7L1 13" stroke="#65677D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14" fill="none">
<path d="M1 1L7 7L1 13" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)}
</div>
@@ -34,9 +36,9 @@ export function KeywordSection({ section }: KeywordSectionProps) {
{isExpanded && section.keywords.length > 0 && (
<>
<div className="grid grid-cols-11 gap-4 items-center px-6 pr-[52px] py-1.5 bg-grey-100 border-b border-grey-300">
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Keyword</span>
<div className="grid grid-cols-12 gap-4 items-center px-6 pr-[52px] py-1.5 bg-grey-100 border-b border-grey-300">
<div className="col-span-2">
<span className="text-xs font-semibold text-grey-800 leading-[18px] ">Keyword</span>
</div>
<div>
<span className="text-xs font-semibold text-grey-800 leading-[18px]">G Search Vol</span>
@@ -67,21 +69,19 @@ export function KeywordSection({ section }: KeywordSectionProps) {
</div>
<div className="flex items-center gap-0.5">
<span className="text-xs font-semibold text-grey-800 leading-[18px]">Beacons</span>
<svg width="14" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="7.43555" cy="7" r="6.125" fill="#999BAD" />
<path d="M8.39805 6.06532L7.55805 9.4737C7.55805 9.4737 7.55805 9.547 7.52305 9.6203C7.52305 9.6936 7.48805 9.76689 7.48805 9.76689C7.48805 9.87684 7.52305 9.91349 7.62805 9.91349C7.90805 9.91349 8.18805 9.547 8.46805 8.85066L8.74805 9.07056C8.39805 10.0234 7.87305 10.4999 7.10305 10.4999C6.43805 10.4999 6.12305 10.2433 6.12305 9.76689C6.12305 9.6203 6.15805 9.43705 6.19305 9.21716L6.89305 6.43182H6.29805L6.36805 6.10197H7.06805C7.27805 6.10197 7.52305 6.10197 7.80305 6.06532L8.15305 6.02867H8.39805V6.06532ZM7.17305 4.26951C7.17305 4.04962 7.24305 3.86637 7.38305 3.71977C7.52305 3.57318 7.69805 3.49988 7.90805 3.49988C8.11805 3.49988 8.29305 3.57318 8.43305 3.71977C8.57305 3.86637 8.64305 4.04962 8.64305 4.26951C8.64305 4.48941 8.57305 4.67265 8.43305 4.81925C8.29305 4.96585 8.11805 5.03914 7.90805 5.03914C7.69805 5.03914 7.52305 4.96585 7.38305 4.81925C7.24305 4.67265 7.17305 4.48941 7.17305 4.26951Z" fill="white" />
</svg>
<MetricTooltip extraTooltipText="Save to projects" tooltipText="first to enable monitoring and signal for Keywords" />
</div>
</div>
<div className="bg-grey-50">
{section.keywords.map((keyword) => {
return <KeywordRow key={keyword.id} keyword={keyword} />;
})}
{section.keywords.map((keyword) => (
<KeywordRow key={keyword.id} keyword={keyword} />
))}
</div>
<div className="flex items-center justify-center gap-2 py-2.5 px-2">
<button className="text-sm font-medium text-primary underline leading-[17px] hover:text-primary/80 transition-colors">
<div className="flex items-center justify-center gap-2 py-3.5 px-2 bg-[#FAFAFC]">
<button className="text-sm font-medium text-[#4C60E5] underline leading-[17px] hover:text-primary/80 transition-colors">
Load 10 More Keywords
</button>
</div>

8
src/components/shared/ActionBadge.tsx
عرض الملف

@@ -17,9 +17,9 @@ export function ActionBadge({ type }: ActionBadgeProps) {
if (type === "active") {
return (
<div className="flex items-center gap-1 px-2.5 py-1 rounded-md border border-[#C9DAFD] bg-[#EBF1FF] h-7">
<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M5.63665 3.23881L2.14908 7.97092H3.26257C3.28232 7.97092 3.3511 7.97018 3.41648 7.97908C3.50774 7.99243 3.678 8.03322 3.83191 8.18824C3.98514 8.344 4.03554 8.52572 4.05393 8.62362C4.06755 8.69409 4.07232 8.769 4.07368 8.79051V8.79422L4.35154 12.8432L8.087 8.16821H6.75286C6.73379 8.16821 6.66569 8.16895 6.59963 8.16005C6.44539 8.13921 6.30092 8.06663 6.18624 7.95238C6.07249 7.83718 5.99443 7.68633 5.96286 7.5207C5.95318 7.46578 5.94636 7.41031 5.94243 7.35456V7.35011L5.63665 3.23881Z" fill="#2D6BEB" />
<div className="flex items-center gap-1 px-2.5 py-1 rounded-md border border-[#C9DAFD] bg-[#EBF1FF] h-7 w-fit cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="16" viewBox="0 0 11 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.63665 3.23881L2.14908 7.97092H3.26257C3.28232 7.97092 3.3511 7.97018 3.41648 7.97908C3.50774 7.99243 3.678 8.03322 3.83191 8.18824C3.98514 8.344 4.03554 8.52572 4.05393 8.62362C4.06755 8.69409 4.07232 8.769 4.07368 8.79051V8.79422L4.35154 12.8432L8.087 8.16821H6.75286C6.73379 8.16821 6.66569 8.16895 6.59963 8.16005C6.44539 8.13921 6.30092 8.06663 6.18624 7.95238C6.07249 7.83718 5.99443 7.68633 5.96286 7.5207C5.95318 7.46578 5.94636 7.41031 5.94243 7.35456V7.35011L5.63665 3.23881ZM9.02955 8.17711C9.03409 8.17761 9.03409 8.17761 9.02955 8.17711V8.17711ZM8.69993 7.38868C8.7022 7.38423 8.7022 7.38423 8.69993 7.38868V7.38868ZM5.60396 0.934321C5.65163 0.885369 5.93494 0.59536 6.34288 0.731835C6.7515 0.868309 6.83663 1.28144 6.85093 1.35116C6.87068 1.4461 6.87817 1.55587 6.88294 1.61595L6.88362 1.63153L7.25955 6.68479H8.71832C8.88177 6.68479 9.07109 6.68479 9.22432 6.70927C9.37415 6.73226 9.75893 6.81756 9.93941 7.24998C10.1206 7.68239 9.92647 8.05399 9.84406 8.19195C9.74819 8.34356 9.64283 8.48779 9.52874 8.62362L9.50695 8.65107L4.5218 14.8896C4.4671 14.9602 4.40842 15.0271 4.34609 15.0898C4.29161 15.141 4.00694 15.4051 3.6133 15.2627C3.21966 15.1195 3.13658 14.7227 3.12091 14.647C3.10649 14.5612 3.09671 14.4745 3.09163 14.3874L3.09027 14.3719L2.75316 9.45434H1.54909C1.39382 9.45434 1.20994 9.45434 1.06011 9.4306C0.908241 9.40613 0.539802 9.32157 0.356605 8.90696C0.174088 8.4916 0.344346 8.12594 0.421983 7.98204C0.49894 7.83964 0.614035 7.68388 0.711422 7.55185L0.731853 7.52441L5.43166 1.14645L5.44119 1.13384C5.47524 1.08711 5.53858 1.00108 5.60396 0.934321Z" fill="#2D6BEB" />
</svg>
<span className="text-xs font-semibold text-[#163981] leading-[18px]">Active</span>
</div>
@@ -27,7 +27,7 @@ export function ActionBadge({ type }: ActionBadgeProps) {
}
return (
<div className="flex items-center gap-1 px-2.5 py-1 rounded-md border border-[#C9DAFD] bg-[#EBF1FF] h-7">
<div className="flex items-center gap-1 px-2.5 py-1 rounded-md border border-[#C9DAFD] bg-[#EBF1FF] h-7 w-fit cursor-pointer">
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.275146 2.71305C0.275146 1.67985 0.275146 1.1638 0.596173 0.84277C0.917199 0.521744 1.43325 0.521744 2.46645 0.521744C3.49965 0.521744 4.0157 0.521744 4.33673 0.84277C4.65776 1.1638 4.65776 1.67985 4.65776 2.71305V9.28696C4.65776 10.3202 4.65776 10.8362 4.33673 11.1572C4.0157 11.4783 3.49965 11.4783 2.46645 11.4783C1.43325 11.4783 0.917199 11.4783 0.596173 11.1572C0.275146 10.8362 0.275146 10.3202 0.275146 9.28696V2.71305ZM6.84906 2.71305C6.84906 1.67985 6.84906 1.1638 7.17009 0.84277C7.49111 0.521744 8.00716 0.521744 9.04036 0.521744C10.0736 0.521744 10.5896 0.521744 10.9106 0.84277C11.2317 1.1638 11.2317 1.67985 11.2317 2.71305V9.28696C11.2317 10.3202 11.2317 10.8362 10.9106 11.1572C10.5896 11.4783 10.0736 11.4783 9.04036 11.4783C8.00716 11.4783 7.49111 11.4783 7.17009 11.1572C6.84906 10.8362 6.84906 10.3202 6.84906 9.28696V2.71305Z" fill="#2D6BEB" />
</svg>

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

@@ -1,7 +1,7 @@
import MetricCard from "./MetricCard"
import UrlDropdown from "./UrlDropdown"
const HeaderPage = ({ title }: { title: string }) => {
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">
@@ -40,14 +40,16 @@ const HeaderPage = ({ title }: { title: string }) => {
</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>
<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>
<span>Export to Slides</span>
</button>
}
</div>
)
}

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

@@ -6,7 +6,7 @@ interface MetricBadgeProps {
export function MetricBadge({ type, value }: MetricBadgeProps) {
if (type === "google") {
return (
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px]">
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px] w-fit">
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_google)">
<path d="M14.3291 8.15431C14.3291 7.67081 14.2857 7.2059 14.2052 6.75958H7.7832V9.40027H11.4529C11.2917 10.2495 10.8082 10.9686 10.083 11.4521V13.1691H12.2959C13.5853 11.979 14.3291 10.2309 14.3291 8.15431Z" fill="#4285F4"/>
@@ -26,7 +26,7 @@ interface MetricBadgeProps {
}
return (
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px]">
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px] w-fit">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.15063 13.5217C3.60189 14.086 4.06148 14.7957 4.30199 15.2243C4.59489 15.7815 4.71634 16.1578 4.93422 16.8317C5.06162 17.2008 5.18307 17.3127 5.43787 17.3127C5.71648 17.3127 5.84388 17.1246 5.94151 16.8317C6.14511 16.1994 6.30228 15.7184 6.55112 15.26C7.51078 13.4502 9.0753 12.1643 9.95637 10.4022C9.95637 10.4022 10.5362 9.32582 10.5362 7.81846C10.5362 6.41349 9.96471 5.43716 9.96471 5.43716L3.15421 13.5336L3.15063 13.5217Z" fill="#34A853"/>
<path d="M0.839878 10.2128C1.38877 11.4629 2.43535 12.5583 3.14973 13.5228L6.93599 9.03402C6.93599 9.03402 6.40139 9.73412 5.43578 9.73412C4.35943 9.73412 3.48311 8.87686 3.48311 7.79337C3.48311 7.04802 3.92723 6.53128 3.92723 6.53128C1.14111 6.94563 1.2959 7.62072 0.831543 10.2104L0.839878 10.2128Z" fill="#FBBC04"/>

9
src/components/shared/MetricTooltip.tsx
عرض الملف

@@ -1,6 +1,6 @@
import { useState } from "react";
function MetricTooltip({ tooltipText }: { tooltipText: string, }) {
function MetricTooltip({ tooltipText, extraTooltipText, widthfit }: { tooltipText: string, extraTooltipText?: string, widthfit: boolean }) {
const [isHovered, setIsHovered] = useState(false);
@@ -17,11 +17,12 @@ function MetricTooltip({ tooltipText }: { tooltipText: string, }) {
<path d="M7.96232 6.06532L7.12232 9.4737C7.12232 9.4737 7.12232 9.547 7.08732 9.6203C7.08732 9.6936 7.05232 9.76689 7.05232 9.76689C7.05232 9.87684 7.08732 9.91349 7.19232 9.91349C7.47232 9.91349 7.75232 9.547 8.03232 8.85066L8.31232 9.07056C7.96232 10.0234 7.43732 10.4999 6.66732 10.4999C6.00232 10.4999 5.68732 10.2433 5.68732 9.76689C5.68732 9.6203 5.72232 9.43705 5.75732 9.21716L6.45732 6.43182H5.86232L5.93232 6.10197H6.63232C6.84232 6.10197 7.08732 6.10197 7.36732 6.06532L7.71732 6.02867H7.96232V6.06532ZM6.73732 4.26951C6.73732 4.04962 6.80732 3.86637 6.94732 3.71977C7.08732 3.57318 7.26232 3.49988 7.47232 3.49988C7.68232 3.49988 7.85732 3.57318 7.99732 3.71977C8.13732 3.86637 8.20732 4.04962 8.20732 4.26951C8.20732 4.48941 8.13732 4.67265 7.99732 4.81925C7.85732 4.96585 7.68232 5.03914 7.47232 5.03914C7.26232 5.03914 7.08732 4.96585 6.94732 4.81925C6.80732 4.67265 6.73732 4.48941 6.73732 4.26951Z" fill="white" />
</svg>
{isHovered && (
<div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
<div className={`absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 max-w-[400px] ${widthfit ? "w-fit whitespace-nowrap" : "min-w-[280px]"} bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100`}>
{/* Tooltip triangle */}
<div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
<div className={`absolute ${!extraTooltipText ? '-bottom-[40%]' : '-bottom-[20%]'} left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800`}></div>
{extraTooltipText && <span className="text-[#9DB1F3] underline mr-1">{extraTooltipText} </span>}
{tooltipText}
</div>
)}

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

@@ -22,7 +22,7 @@ export default function UrlDropdown() {
<div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
{/* Input box */}
<div
className={`flex justify-between items-center border-2 bg-white px-2 py-1 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
className={`flex justify-between items-center border-2 bg-white px-1 py-0.5 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
onClick={toggleDropdown}
>
<span className="truncate text-gray-800">{selected}</span>

2
src/components/shared/VisibilityIndicator.tsx
عرض الملف

@@ -24,7 +24,7 @@ export function VisibilityIndicator({ platform, visible }: VisibilityIndicatorPr
};
return (
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px]">
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white h-[30px] w-fit">
{platformIcons[platform]}
<span className={cn("text-xs leading-[18px]", visible ? "text-grey-900 font-normal" : "text-grey-700 font-normal")}>
{visible ? "Visible" : "Invisible"}

115
src/pages/Analysis.tsx
عرض الملف

@@ -51,25 +51,26 @@ const Analysis = () => {
{ label: "20% Multimedia Content & Beauty Visuals", color: "#FBBC05", icons: ["📹", "📷", "🎬"] },
{ label: "10% Community and UGC Signals", color: "#EA4335", icons: ["👥", "💭", "⭐"] },
];
return (
<>
<Header />
<ContainerPage>
<div className="mb-5">
<div className="mb-2 flex justify-between items-center">
<h1 className="text-xl font-bold text-grey-950 mb-1">Analysis of Visibility</h1>
<div className="flex items-center gap-[2.3rem] w-[61%] text-xs font-semibold text-grey-700 mt-1">
<h1 className="text-xl font-bold text-gray-950 mb-1">Analysis of Visibility</h1>
<div className="flex items-center gap-[2.3rem] w-[61%] text-xs font-semibold text-gray-700 mt-1">
<div className="w-22 flex items-center gap-2">
<span className="w-full">
AIO Health
</span>
<MetricTooltip tooltipText="AIO Health" />
<MetricTooltip tooltipText="AIO Health" widthfit={true} />
</div>
<div className="w-20 flex items-center gap-2">Backlinks
<MetricTooltip tooltipText="Backlinks" />
<MetricTooltip tooltipText="Backlinks" widthfit={true} />
</div>
<div className="w-14 text-[#65677D]">G Pos #</div>
<div className="w-10 text-[#65677D]">Maps</div>
@@ -79,9 +80,9 @@ const Analysis = () => {
<div className="w-16 text-[#65677D]">Perplexity</div>
</div>
</div>
<div className="flex items-center justify-between border border-grey-300 rounded-lg bg-white p-3">
<div className="flex items-center justify-between border border-gray-300 rounded-lg bg-white p-3">
<div>
<h2 className="text-sm font-semibold text-grey-950">BH Medical Spa of Beverly Hills</h2>
<h2 className="text-sm font-semibold text-gray-950">BH Medical Spa of Beverly Hills</h2>
<div className="flex items-center gap-4 mt-1 text-xs">
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#17171B]">Sector:</span>
@@ -100,7 +101,7 @@ const Analysis = () => {
<circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
<path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
</svg>
<span className="text-sm font-semibold text-grey-900">24%</span>
<span className="text-sm font-semibold text-gray-900">24%</span>
</div>
<div className="flex items-center gap-3">
@@ -109,22 +110,22 @@ const Analysis = () => {
<path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
</svg>
<div className="flex flex-col">
<span className="text-sm font-semibold text-grey-900">14%</span>
<span className="text-[11px] font-semibold text-grey-700">50/370 links</span>
<span className="text-sm font-semibold text-gray-900">14%</span>
<span className="text-[11px] font-semibold text-gray-700">50/370 links</span>
</div>
</div>
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white">
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-gray-300 bg-white">
<svg width="15" height="15" viewBox="0 0 15 16">
<path d="M13.9853 8.15431C13.9853 7.67081 13.9419 7.2059 13.8613 6.75958H7.43933V9.40027H11.109C10.9478 10.2495 10.4643 10.9686 9.73908 11.4521V13.1691H11.9521C13.2414 11.979 13.9853 10.2309 13.9853 8.15431Z" fill="#4285F4" />
<path d="M7.43878 14.8186C9.27982 14.8186 10.8233 14.2111 11.9515 13.1697L9.73853 11.4527C9.13105 11.8618 8.3562 12.1097 7.43878 12.1097C5.66592 12.1097 4.15962 10.9134 3.62032 9.3017H1.35156V11.0622C2.47354 13.2875 4.7733 14.8186 7.43878 14.8186Z" fill="#34A853" />
<path d="M3.62113 9.29494C3.48475 8.88582 3.40417 8.45191 3.40417 7.99939C3.40417 7.54688 3.48475 7.11297 3.62113 6.70385V4.94339H1.35237C0.887459 5.86081 0.620911 6.89601 0.620911 7.99939C0.620911 9.10278 0.887459 10.138 1.35237 11.0554L3.11902 9.67927L3.62113 9.29494Z" fill="#FBBC05" />
<path d="M7.43878 3.89567C8.44298 3.89567 9.33561 4.24281 10.0485 4.91228L12.0011 2.95966C10.8171 1.85627 9.27982 1.1806 7.43878 1.1806C4.7733 1.1806 2.47354 2.71171 1.35156 4.94327L3.62032 6.70373C4.15962 5.09204 5.66592 3.89567 7.43878 3.89567Z" fill="#EA4335" />
</svg>
<span className="text-sm font-semibold text-grey-900">5</span>
<span className="text-sm font-semibold text-gray-900">5</span>
</div>
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-grey-300 bg-white">
<div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-gray-300 bg-white">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="16" viewBox="0 0 11 16" fill="none">
<path d="M2.80688 11.5217C3.25814 12.086 3.71773 12.7957 3.95824 13.2243C4.25114 13.7815 4.37259 14.1578 4.59047 14.8317C4.71787 15.2008 4.83932 15.3127 5.09412 15.3127C5.37273 15.3127 5.50013 15.1246 5.59776 14.8317C5.80136 14.1994 5.95853 13.7184 6.20737 13.26C7.16703 11.4502 8.73155 10.1643 9.61262 8.40216C9.61262 8.40216 10.1925 7.32582 10.1925 5.81846C10.1925 4.41349 9.62096 3.43716 9.62096 3.43716L2.81046 11.5336L2.80688 11.5217Z" fill="#34A853" />
<path d="M0.49625 8.21276C1.04514 9.46294 2.09172 10.5583 2.80611 11.5228L6.59236 7.03402C6.59236 7.03402 6.05776 7.73412 5.09215 7.73412C4.0158 7.73412 3.13949 6.87686 3.13949 5.79337C3.13949 5.04802 3.5836 4.53128 3.5836 4.53128C0.797483 4.94563 0.952267 5.62072 0.487915 8.21038L0.49625 8.21276Z" fill="#FBBC04" />
@@ -132,39 +133,39 @@ const Analysis = () => {
<path d="M1.18726 2.50895C1.93975 1.61358 3.25898 0.687256 5.08067 0.687256C5.96056 0.687256 6.62851 0.920623 6.62851 0.920623L3.59236 4.52828C3.38757 4.4172 1.38967 2.86138 1.18726 2.50418V2.50895Z" fill="#1A73E8" />
<path d="M0.496744 8.21327C0.496744 8.21327 0.000244141 7.22741 0.000244141 5.80816C0.000244141 4.46273 0.52651 3.28399 1.19089 2.52197L3.596 4.54607L0.500316 8.21327H0.496744Z" fill="#EA4335" />
</svg>
<span className="text-sm font-semibold text-grey-900">8</span>
<span className="text-sm font-semibold text-gray-900">8</span>
</div>
<div className="flex items-center gap-5">
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Gemini} alt="G" className="w-4 h-4" />
Invisible
</div>
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={ChatGPT} alt="ChatGPT" className="w-4 h-4" />
Invisible</div>
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Gemini} alt="Gemini" className="w-4 h-4" />Invisible</div>
<div className="text-xs text-grey-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
<img src={Preplextiy} alt="Perplexity" className="w-4 h-4" />
Invisible</div>
</div>
<button className="flex items-center gap-1 px-1.5 py-1 rounded-md border border-grey-300 bg-white shadow-sm">
<button className="flex items-center gap-1 px-1.5 py-1 rounded-md border border-gray-300 bg-white shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d="M6.59226 2H5.69226C3.75926 2 2.19226 3.567 2.19226 5.5V10.5C2.19226 12.433 3.75926 14 5.69226 14H10.6923C12.6253 14 14.1923 12.4333 14.1923 10.5003C14.1923 10.2415 14.1923 9.95005 14.1923 9.6" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
<path d="M10.1923 2H14.1923M14.1923 2V6M14.1923 2L8.19128 8" stroke="#65677D" stroke-width="1.5" stroke-linejoin="round" />
</svg>
<span className="text-xs font-semibold text-grey-900">Share</span>
<span className="text-xs font-semibold text-gray-900">Share</span>
</button>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-4">
<div className="flex flex-col gap-5 rounded-xl bg-white border border-grey-300 shadow-sm overflow-hidden justify-between">
<div className="flex items-center gap-2 px-4 py-3 border-b border-grey-300 h-[60px]">
<h2 className="text-base font-semibold text-grey-950">Ai Frequently Cited Sources in Healthcare</h2>
<div className="flex flex-col gap-5 rounded-xl bg-white border border-gray-300 shadow-sm overflow-hidden justify-between">
<div className="flex items-center gap-2 px-4 py-3 border-b border-gray-300 h-[60px]">
<h2 className="text-base font-semibold text-gray-950">Ai Frequently Cited Sources in Healthcare</h2>
</div>
<div className="flex flex-col justify-between h-full gap-8 px-6 pb-6">
@@ -175,17 +176,17 @@ const Analysis = () => {
{healthcareItems.map((item, index) => (
<div
key={index}
className={`flex items-center gap-2.5 px-2 py-1.5 rounded-md border hover:border-[#C9D7FB] hover:bg-[#ECF1FD] ${item.highlighted ? "border-[#C9D7FB] bg-[#ECF1FD]" : "border-grey-300"
className={`flex items-center gap-2.5 px-2 py-1.5 rounded-md border hover:border-[#C9D7FB] hover:bg-[#ECF1FD] ${item.highlighted ? "border-[#C9D7FB] bg-[#ECF1FD]" : "border-gray-300"
}`}
>
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: item.color }} />
<div className="flex items-center gap-0.5 flex-1">
<span className="text-sm">
<span className="font-bold text-grey-900">{item.label.split(" ")[0]}</span>
<span className="text-grey-900 font-medium"> {item.label.split(" ").slice(1).join(" ")}</span>
<span className="font-bold text-gray-900">{item.label.split(" ")[0]}</span>
<span className="text-gray-900 font-medium"> {item.label.split(" ").slice(1).join(" ")}</span>
</span>
{item.subtitle && (
<span className="text-sm text-grey-700 ml-1">{item.subtitle}</span>
<span className="text-sm text-gray-700 ml-1">{item.subtitle}</span>
)}
</div>
</div>
@@ -200,9 +201,9 @@ const Analysis = () => {
<path d="M4.27642 14.6968C4.55366 14.6212 4.83089 14.5456 5.10813 14.47C9.24146 13.2854 9.03984 13.3862 9.11545 13.2098C9.72033 11.1936 10.1236 11.748 11.2073 10.2106C11.7114 9.47974 12.0894 8.64804 12.2407 7.76592C12.3163 7.41308 12.3415 7.03503 12.3415 6.65698C12.3415 3.50657 9.79594 0.961044 6.67073 0.961044C3.54553 0.961044 1 3.50657 1 6.63178C1 7.51389 1.17642 8.42121 1.55447 9.22771C1.83171 9.83259 2.23496 10.3871 2.68862 10.8659C3.08885 11.2852 3.58998 11.6613 3.90862 12.1576" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.28516 17.039L8.81361 16.0056" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span className="text-sm font-semibold text-grey-950">How Ai and LLMs Choose Their Sources</span>
<span className="text-sm font-semibold text-gray-950">How Ai and LLMs Choose Their Sources</span>
</div>
<p className="text-xs text-grey-900 leading-[18px]">
<p className="text-xs text-gray-900 leading-[18px]">
Our analysis reveals distinct patterns in how leading AIs source and prioritize industry information. For example, ChatGPT leans heavily on user-generated content, while Google's AI Overviews favors authoritative tech review sites. Across the board, backlink quality plays a crucial role, with...{" "}
<span className="text-[#4C60E5] underline cursor-pointer">read more</span>
</p>
@@ -210,12 +211,12 @@ const Analysis = () => {
</div>
</div>
<div className="flex flex-col gap-5 rounded-xl bg-white border border-grey-300 shadow-sm overflow-hidden">
<div className="flex flex-col gap-7 px-4 py-3 border-b border-grey-300 h-[60px]">
<div className="flex flex-col gap-5 rounded-xl bg-white border border-gray-300 shadow-sm overflow-hidden">
<div className="flex flex-col gap-7 px-4 py-3 border-b border-gray-300 h-[60px]">
<div>
<h2 className="text-base font-bold text-grey-950">Become the Source</h2>
<p className="text-xs text-grey-700">
Custom Authority Beacons & Backlink Strategy, Tailored for <span className="font-bold text-grey-950">Medical Spas</span>
<h2 className="text-base font-bold text-gray-950">Become the Source</h2>
<p className="text-xs text-gray-700">
Custom Authority Beacons & Backlink Strategy, Tailored for <span className="font-bold text-gray-950">Medical Spas</span>
</p>
</div>
</div>
@@ -231,18 +232,18 @@ const Analysis = () => {
<div className="flex flex-col gap-0 flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center gap-0.5">
<span className="text-sm font-bold text-grey-900">{item.label.split(" ")[0]}</span>
<span className="text-sm font-bold text-gray-900">{item.label.split(" ")[0]}</span>
<MetricTooltip tooltipText={item.label.split(" ").slice(1).join(" ")} />
</div>
<div className="flex items-center gap-1">
{item.icons.map((icon, i) => (
<div key={i} className="w-[30px] h-[30px] rounded-md border border-grey-300 bg-white flex items-center justify-center text-md">
<div key={i} className="w-[30px] h-[30px] rounded-md border border-gray-300 bg-white flex items-center justify-center text-md">
{icon}
</div>
))}
</div>
</div>
<span className="text-sm text-grey-900">{item.label.split(" ").slice(1).join(" ")}</span>
<span className="text-sm text-gray-900">{item.label.split(" ").slice(1).join(" ")}</span>
</div>
</div>
))}
@@ -260,26 +261,10 @@ const Analysis = () => {
</span>
</div>
</button>
{/* <button className="relative flex items-center gap-2 px-3 py-2.5 rounded-full border-2 border-[#4C60E5] bg-white">
<div className="w-6 h-6 rounded-full bg-[#4C60E5] flex items-center justify-center">
<svg width="16" height="16" viewBox="0 0 17 16" fill="none">
<path d="M9.21967 6.45829L9.28321 2.02145C9.28861 1.64492 8.81816 1.47023 8.5765 1.75901L3.07231 8.33635C2.85614 8.59467 3.03653 8.98819 3.37334 8.99302L6.68243 9.04041C6.90333 9.04357 7.07983 9.2252 7.07667 9.44609L7.01049 14.0671C7.00499 14.4511 7.49125 14.6214 7.72657 14.3179L13.2691 7.16853C13.4729 6.90569 13.2855 6.52345 12.953 6.52345L11.45 6.52345" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<span className="text-sm font-semibold text-grey-950">Add your Keywords and Become the Source</span>
</button> */}
</div>
</div>
</div>
</div>
{/* <div className="space-y-8">
<AnalysisSearch />
<VisibilityAnalysis />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<SourcesChart />
<BecomeTheSource />
</div>
</div> */}
<StrategyHero />
@@ -307,29 +292,29 @@ interface DonutChartProps {
function Header() {
return (
<div className="w-full border-b border-grey-300 bg-[#F6F8FE] px-2 py-2.5 mt-[-8px]">
<div className="w-full border-b border-gray-300 bg-[#F6F8FE] px-2 py-2.5 mt-[-8px]">
<div className="flex items-center justify-center gap-1.5">
<div className="flex h-[30px] w-[312px] items-center gap-1.5 rounded-lg border border-grey-300 bg-white p-0.5">
<div className="flex h-[30px] w-[312px] items-center gap-1.5 rounded-lg border border-gray-300 bg-white p-0.5">
<div className="flex items-center gap-1.5 flex-1">
<div className="flex items-end rounded-lg">
<div className="flex px-1.5 items-center justify-center">
<span className="text-xs font-semibold text-grey-700">AIQ</span>
<span className="text-xs font-semibold text-gray-700">AIQ</span>
</div>
<div className="flex px-1.5 items-center justify-center rounded-[5px] bg-grey-300">
<span className="text-xs font-semibold text-grey-700">10</span>
<div className="flex px-1.5 items-center justify-center rounded-[5px] bg-gray-300">
<span className="text-xs font-semibold text-gray-700">10</span>
</div>
</div>
<div className="w-px h-5 bg-grey-300" />
<div className="flex px-1.5 justify-between items-center flex-1">
<span className="text-sm text-grey-900 tracking-tight">mysite.com</span>
<ChevronDown className="w-3 h-3 text-grey-800" />
<div className="w-px h-5 bg-gray-300" />
<div className="flex px-1.5 justify-between items-center flex-1 cursor-pointer">
<span className="text-sm text-gray-900 tracking-tight">mysite.com</span>
<ChevronDown className="w-3 h-3 text-gray-800" />
</div>
</div>
</div>
<button className="flex h-7 px-1 items-center justify-center gap-1.25 rounded-md border border-grey-300 bg-white shadow-sm">
<button className="flex h-7 px-1 items-center justify-center gap-1.25 rounded-md border border-gray-300 bg-white shadow-sm">
<div className="flex px-1 items-center gap-1.25">
<Search className="w-4 h-4 text-grey-800" strokeWidth={1.5} />
<span className="text-xs font-semibold text-grey-900">Analyze</span>
<Search className="w-4 h-4 text-gray-800" strokeWidth={1.5} />
<span className="text-xs font-semibold text-gray-900">Analyze</span>
</div>
</button>
</div>

3
src/pages/Keywords.tsx
عرض الملف

@@ -8,7 +8,8 @@ import HeaderPage from '../components/shared/HeaderPage';
const Keywords = () => {
return (
<ContainerPage>
<HeaderPage title="Keyword Visibility Matrix" />
<HeaderPage title="Keyword Visibility Matrix" buttonShow={true} />
<div className="flex flex-col">
{keywordSections.map((section) => (
<KeywordSection key={section.id} section={section} />