"use client" import { useEffect, useId, useRef, useState } from "react" import { BarChart, File, Globe, HeartHandshake, Rss, Shield, } from "lucide-react" import { motion, useAnimation, useInView } from "motion/react" import { cn } from "@/lib/utils" import { Marquee } from "@/registry/eldoraui/marquee" const tiles = [ { icon: , bg: (

), }, { icon: , bg: (

), }, ] function shuffleArray(array: T[]): T[] { let currentIndex = array.length let randomIndex // While there remain elements to shuffle. while (currentIndex !== 0) { // Pick a remaining element. randomIndex = Math.floor(Math.random() * currentIndex) currentIndex-- // And swap it with the current element. ;[array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex], ] } return array } function Card(card: { icon: React.ReactNode; bg: React.ReactNode }) { const id = useId() const controls = useAnimation() const ref = useRef(null) const inView = useInView(ref, { once: true }) useEffect(() => { if (inView) { controls.start({ opacity: 1, transition: { delay: Math.random() * 2, ease: "easeOut", duration: 1 }, }) } }, [controls, inView]) return ( {card.icon} {card.bg} ) } export default function Integrations() { const [randomTiles1, setRandomTiles1] = useState([]) const [randomTiles2, setRandomTiles2] = useState([]) const [randomTiles3, setRandomTiles3] = useState([]) const [randomTiles4, setRandomTiles4] = useState([]) useEffect(() => { if (typeof window !== "undefined") { // Ensures this runs client-side setRandomTiles1(shuffleArray([...tiles])) setRandomTiles2(shuffleArray([...tiles])) setRandomTiles3(shuffleArray([...tiles])) setRandomTiles4(shuffleArray([...tiles])) } }, []) return (

{randomTiles1.map((review, idx) => ( ))} {randomTiles2.map((review, idx) => ( ))} {randomTiles1.map((review, idx) => ( ))} {randomTiles2.map((review, idx) => ( ))} {randomTiles3.map((review, idx) => ( ))} {randomTiles4.map((review, idx) => ( ))}

) }

integrations

Instalação

Dependências

Registry dependencies