Logo Cloud 4

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "motion/react";
4import type React from "react";
5import { useEffect, useState } from "react";
6import {
7  Canpoy,
8  Canva,
9  Casetext,
10  Clearbit,
11  Descript,
12  Duolingo,
13  Faire,
14  Strava,
15} from "@/components/smoothui/shared";
16 
17export interface LogoGridProps {
18  columns?: 3 | 4 | 5 | 6;
19  description?: string;
20  logos?: Array<{
21    name: string;
22    logo: React.ReactNode;
23    href?: string;
24  }>;
25  title?: string;
26}
27 
28const DEFAULT_LOGOS = [
29  { logo: <Canpoy />, name: "Canpoy" },
30  { logo: <Canva />, name: "Canva" },
31  { logo: <Casetext />, name: "Casetext" },
32  { logo: <Strava />, name: "Strava" },
33  { logo: <Descript />, name: "Descript" },
34  { logo: <Duolingo />, name: "Duolingo" },
35  { logo: <Faire />, name: "Faire" },
36  { logo: <Clearbit />, name: "Clearbit" },
37];
38 
39const COLUMN_CLASSES = {
40  3: "grid-cols-2 sm:grid-cols-3",
41  4: "grid-cols-2 sm:grid-cols-4",
42  5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
43  6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
44};
45 
46// Animation constants
47const HOVER_LIFT_OFFSET = -4;
48const INACTIVE_OPACITY = 0.6;
49 
50interface LogoItemProps {
51  isHoverDevice: boolean;
52  logo: {
53    name: string;
54    logo: React.ReactNode;
55    href?: string;
56  };
57  shouldReduceMotion: boolean | null;
58}
59 
60function LogoItem({ logo, isHoverDevice, shouldReduceMotion }: LogoItemProps) {
61  const [isHovered, setIsHovered] = useState(false);
62 
63  const content = (
64    <motion.div
65      animate={
66        shouldReduceMotion
67          ? {}
68          : {
69              y: isHovered ? HOVER_LIFT_OFFSET : 0,
70            }
71      }
72      className="group relative flex items-center justify-center p-6"
73      onMouseEnter={() => isHoverDevice && setIsHovered(true)}
74      onMouseLeave={() => isHoverDevice && setIsHovered(false)}
75      transition={
76        shouldReduceMotion
77          ? { duration: 0 }
78          : {
79              bounce: 0.05,
80              duration: 0.25,
81              type: "spring" as const,
82            }
83      }
84    >
85      {/* Logo with grayscale effect */}
86      <div
87        className="transition-all duration-200 *:fill-foreground"
88        style={{
89          filter: isHovered ? "grayscale(0)" : "grayscale(1)",
90          opacity: isHovered ? 1 : INACTIVE_OPACITY,
91        }}
92      >
93        {logo.logo}
94      </div>
95 
96      {/* Tooltip */}
97      <AnimatePresence>
98        {isHovered ? (
99          <motion.div
100            animate={{ opacity: 1, scale: 1, x: "-50%", y: 0 }}
101// … truncated