diff --git a/components/IntegrationsSection.tsx b/components/IntegrationsSection.tsx index c832f21..403c2b2 100644 --- a/components/IntegrationsSection.tsx +++ b/components/IntegrationsSection.tsx @@ -1,7 +1,23 @@ -import React from 'react'; -import { ExternalLink, BarChart3, FileText, Box, Server, Database } from 'lucide-react'; +import React, { useEffect, useState } from "react"; +import { + ExternalLink, + BarChart3, + FileText, + Box, + Server, + Database, +} from "lucide-react"; const IntegrationsSection: React.FC = () => { + const [isMobile, setIsMobile] = useState(false); + const [showAll, setShowAll] = useState(false); + + useEffect(() => { + const checkScreen = () => setIsMobile(window.innerWidth < 768); + checkScreen(); + window.addEventListener("resize", checkScreen); + return () => window.removeEventListener("resize", checkScreen); + }, []); const integrations = [ { name: "Grafana", @@ -223,7 +239,10 @@ const IntegrationsSection: React.FC = () => { d="M26.744,12v1.231H28.7v5.538H26.744V20H30V12Z" style={{ fill: "#201a26" }} > - + { link: "https://opsimate.vercel.app/docs/providers-services/services/systemd-services", }, ]; + const items = !isMobile || showAll ? integrations : integrations.slice(0, 4); return ( -
+
{/* Section Header */}

- Integrate with Your{' '} + Integrate with Your{" "} Existing Tools

- OpsiMate seamlessly connects with your current monitoring and infrastructure tools. - No need to replace what's working - enhance it. + OpsiMate seamlessly connects with your current monitoring and + infrastructure tools. No need to replace what's working - enhance + it.

{/* Integrations Grid */} -
- {integrations.map((integration, index) => ( +
+ {items.map((integration, index) => (
{/* Integration Icon */}
- {integration.icon } + {integration.icon}
- +
-

{integration.name}

+

+ {integration.name} +

- +
{integration.description}
- - {
))}
- - - - + {isMobile && integrations.length > 4 && ( + + )}
);