Cards View Icon

1"use client";
2 
3import { motion } from "motion/react";
4 
5const CARD_DELAY_STEP = 0.067;
6 
7// Active permutation: TR BR / TL BL (indices in a 2×2 grid 0-3)
8const ACTIVE_ORDER = [1, 3, 0, 2];
9const DEFAULT_ORDER = [0, 1, 2, 3];
10 
11export interface CardsViewIconProps {
12  /** Whether the icon is in its active (animated) state. */
13  isActive: boolean;
14  /** Extra classes applied to the root element. */
15  className?: string;
16}
17 
18export function CardsViewIcon({ isActive, className }: CardsViewIconProps) {
19  const order = isActive ? ACTIVE_ORDER : DEFAULT_ORDER;
20 
21  return (
22    <motion.span
23      className={`inline-grid h-3 w-3 place-content-center grid-cols-2 gap-[2.5px] ${className ?? ""}`}
24      aria-hidden="true"
25    >
26      {order.map((id, i) => (
27        <motion.span
28          key={id}
29          layout
30          className="size-[4px] rounded-[1px] bg-current"
31          animate={isActive ? { opacity: [0.65, 1, 1] } : { opacity: 1 }}
32          transition={{
33            duration: 0.42,
34            delay: i === 0 ? 0 : i * CARD_DELAY_STEP,
35            ease: "easeOut",
36            layout: {
37              duration: 0.45,
38              delay: i === 0 ? 0 : i * CARD_DELAY_STEP,
39              ease: "easeInOut",
40            },
41          }}
42        />
43      ))}
44    </motion.span>
45  );
46}