diff --git a/apps/marketing/src/components/ComparisonLayout.tsx b/apps/marketing/src/components/ComparisonLayout.tsx index 6d7f1bf10..df1ed0734 100644 --- a/apps/marketing/src/components/ComparisonLayout.tsx +++ b/apps/marketing/src/components/ComparisonLayout.tsx @@ -1,5 +1,4 @@ import React, { ReactNode, useState, useEffect, useMemo } from "react"; -import NextLink from "next/link"; import { Typography, Table, Space, Card, Button, Tooltip, Alert } from "antd"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCircleInfo } from "@fortawesome/free-solid-svg-icons"; @@ -7,7 +6,6 @@ import PageWrapper from "@/components/PageWrapper"; import { ALL_FEATURES, getFeatureStatus } from "@/constants/comparisonFeatures"; import { FEATURE_LABELS } from "@/constants/featureLabels"; import { FeatureStatusBadge } from "@/components/CommonFeatures"; -import { SIMPLE_TABLE_MULTI_FRAMEWORK_TAGLINE } from "@/constants/frameworkIntegrationHub"; import { SIMPLE_TABLE_INFO } from "@/constants/packageInfo"; const { Title, Paragraph, Text, Link } = Typography; @@ -25,8 +23,6 @@ interface ComparisonLayoutProps { competitorPackage: string; // Package key like "agGrid" performanceMetrics: PerformanceMetricsProps; summaryContent: ReactNode; - /** When true, shows a short note that Simple Table supports multiple frameworks (default: true). */ - showFrameworksCallout?: boolean; } const ComparisonLayout: React.FC = ({ @@ -37,7 +33,6 @@ const ComparisonLayout: React.FC = ({ competitorPackage, performanceMetrics, summaryContent, - showFrameworksCallout = true, }) => { const [isMobile, setIsMobile] = useState(false); @@ -115,7 +110,7 @@ const ComparisonLayout: React.FC = ({ align: "center" as const, }, ], - [competitorName, isMobile] + [competitorName, isMobile], ); return ( @@ -138,52 +133,32 @@ const ComparisonLayout: React.FC = ({ - {showFrameworksCallout ? ( + {/* Introduction */} +
+ + {introText} + +
+ + {/* AI Disclaimer */} +
- {SIMPLE_TABLE_MULTI_FRAMEWORK_TAGLINE}{" "} - - Browse framework setup - - . + This comparison guide was created with AI assistance. While we strive for accuracy, + if you notice any incorrect information, please{" "} + + contact us + {" "} + so we can correct it promptly. } type="info" showIcon - className="mb-8 max-w-3xl mx-auto" /> - ) : null} - - {/* Introduction */} -
- - {introText} -
- {/* AI Disclaimer */} - - This comparison guide was created with AI assistance. While we strive for accuracy, if - you notice any incorrect information, please{" "} - - contact us - {" "} - so we can correct it promptly. - - } - type="info" - showIcon - className="mb-8" - /> - {/* Comparison Table */} void) { + const mq = getMobileMq(); + if (!mq) return () => {}; + mq.addEventListener("change", cb); + return () => mq.removeEventListener("change", cb); +} + +function getMobileSnapshot(): boolean { + return getMobileMq()?.matches ?? false; +} + +function useFooterIsMobile(): boolean { + return useSyncExternalStore(subscribeMobile, getMobileSnapshot, () => false); +} + const CRMCustomFooter = ({ currentPage, totalPages, @@ -15,26 +38,25 @@ const CRMCustomFooter = ({ isDark, setRowsPerPage, }: FooterRendererProps & { isDark?: boolean; setRowsPerPage: (rowsPerPage: number) => void }) => { - // Generate visible page numbers with current page centered + const isMobile = useFooterIsMobile(); + const generateVisiblePages = (currentPage: number, totalPages: number): number[] => { const maxVisible = 5; if (totalPages <= maxVisible) { - // Show all pages if we have fewer than maxVisible return Array.from({ length: totalPages }, (_, i) => i + 1); } - // Calculate start and end to center current page - let start = currentPage - 2; - let end = currentPage + 2; + const halfLeft = Math.floor((maxVisible - 1) / 2); + const halfRight = Math.ceil((maxVisible - 1) / 2); + let start = currentPage - halfLeft; + let end = currentPage + halfRight; - // Adjust if we're near the beginning if (start < 1) { start = 1; end = Math.min(maxVisible, totalPages); } - // Adjust if we're near the end if (end > totalPages) { end = totalPages; start = Math.max(1, totalPages - maxVisible + 1); @@ -43,7 +65,7 @@ const CRMCustomFooter = ({ return Array.from({ length: end - start + 1 }, (_, i) => start + i); }; - const visiblePages = generateVisiblePages(currentPage, totalPages); + const visiblePages = isMobile ? [] : generateVisiblePages(currentPage, totalPages); const colors = isDark ? { @@ -73,47 +95,69 @@ const CRMCustomFooter = ({ activeText: "#ea580c", }; + const summaryFontSize = isMobile ? "12px" : "14px"; + const controlFontSize = isMobile ? "12px" : "14px"; + const pageBtnPadding = isMobile ? "6px 10px" : "8px 16px"; + const arrowPadding = isMobile ? "6px" : "8px"; + + const selectStyle = { + border: `1px solid ${colors.inputBorder}`, + borderRadius: "6px", + padding: isMobile ? "2px 6px" : "4px 8px", + fontSize: controlFontSize, + backgroundColor: colors.inputBg, + color: colors.text, + cursor: "pointer" as const, + maxWidth: isMobile ? "4.5rem" : undefined, + }; + return (
- {/* Results text */} -

- Showing {startRow} to{" "} - {endRow} of{" "} - {totalRows} results +

+ {isMobile ? ( + <> + {startRow}– + {endRow} + {" / "} + {totalRows} + + ) : ( + <> + Showing {startRow} to{" "} + {endRow} of{" "} + {totalRows} results + + )}

- {/* Controls */} -
- {/* Page size selector */} -
- +
+
+ {!isMobile && ( + + )} - per page + {!isMobile && per page}
- {/* Pagination */}