Update responsive page
هذا الالتزام موجود في:
@@ -26,6 +26,7 @@
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
.container {
|
||||
max-width: 1824px;
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -425,7 +425,7 @@ export default function DashboardGrid() {
|
||||
{card.title}
|
||||
</div>
|
||||
{/* Tags */}
|
||||
<div className="mt-3 flex flex-row gap-2 flex-wrap justify-center">
|
||||
<div className="mt-2 flex flex-row gap-2 flex-wrap justify-center">
|
||||
{card.tags.map((tag, i) => (
|
||||
<TagComponent
|
||||
key={i}
|
||||
@@ -440,7 +440,7 @@ export default function DashboardGrid() {
|
||||
</div>
|
||||
)}
|
||||
{card.paused && (
|
||||
<div className="mt-3 text-center">
|
||||
<div className="mt-1 text-center">
|
||||
<div className="text-gray-400 text-sm">Campaign paused</div>
|
||||
<button className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800">Resume</button>
|
||||
</div>
|
||||
|
@@ -37,10 +37,10 @@ function ProgressMetrics() {
|
||||
{/* 60% Progress */}
|
||||
<div className="w-[100%]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
|
||||
<div className="text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
||||
<div className="text-lg 2xl:text-4xl font-bold text-gray-900 mb-1">60%</div>
|
||||
<div className="text-lg 2xl:text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
|
||||
<div className="text-xs 2xl:text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
|
||||
{/* Progress bar */}
|
||||
<div className="w-70 h-3 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
@@ -52,15 +52,15 @@ function ProgressMetrics() {
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-32 gap-3">
|
||||
<div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-12 lg:gap-6 gap-3">
|
||||
{/* 75% Keyword Visibility */}
|
||||
<div className="w-[30%]">
|
||||
<div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
|
||||
<div className="text-xl 2xl:text-3xl font-bold text-gray-900 mb-1">75%</div>
|
||||
<div className="text-sm text-gray-500">Keyword Visibility</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 w-[100%]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<MetricCard
|
||||
img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />
|
||||
|
||||
|
@@ -12,7 +12,7 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}>
|
||||
<div className={`${extraStyle}`}>
|
||||
<img src={Img} alt="Img" className="w-10 h-10" />
|
||||
<img src={Img} alt="Img" className="w-8 2xl:w-10 h-8 2xl:h-10" />
|
||||
</div>
|
||||
<div className="">
|
||||
{tooltipText && (
|
||||
|
@@ -15,7 +15,7 @@ export default function UrlDropdown() {
|
||||
const [selected, setSelected] = useState(urlOptions[0]);
|
||||
|
||||
const toggleDropdown = () => setIsOpen((prev) => !prev);
|
||||
const handleSelect = (url) => {
|
||||
const handleSelect = (url: string) => {
|
||||
setSelected(url);
|
||||
setIsOpen(false);
|
||||
};
|
||||
@@ -24,7 +24,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 border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer focus:border-2 focus:border-blue-500"
|
||||
className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded cursor-pointer focus:border-2 focus:border-blue-500"
|
||||
onClick={toggleDropdown}
|
||||
>
|
||||
<span className="truncate text-gray-800">{selected}</span>
|
||||
|
@@ -16,7 +16,7 @@ export default {
|
||||
lg: '1024px',
|
||||
xl: '1400px',
|
||||
'2xl': '1800px',
|
||||
// '3xl': '1800px',
|
||||
'3xl': '2000px',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
المرجع في مشكلة جديدة
حظر مستخدم