Section

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function SectionIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-section-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-section-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-section-icon * {
  transform-box: fill-box;
}

.ai-section-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-section-icon [class^="dot-"] {
  transform-origin: center;
}

.ai-section-icon:not(.no-hover):hover .dot-t1,
.ai-section-icon:not(.no-hover):hover .dot-b1 {
  animation: ai-section-blink 700ms ease-in-out 0ms;
}

.ai-section-icon:not(.no-hover):hover .dot-t2,
.ai-section-icon:not(.no-hover):hover .dot-b2 {
  animation: ai-section-blink 700ms ease-in-out 50ms;
}

.ai-section-icon:not(.no-hover):hover .dot-t3,
.ai-section-icon:not(.no-hover):hover .dot-b3 {
  animation: ai-section-blink 700ms ease-in-out 100ms;
}

.ai-section-icon:not(.no-hover):hover .dot-t4,
.ai-section-icon:not(.no-hover):hover .dot-b4 {
  animation: ai-section-blink 700ms ease-in-out 150ms;
}

.ai-section-icon:not(.no-hover):hover .dot-t5,
.ai-section-icon:not(.no-hover):hover .dot-b5 {
  animation: ai-section-blink 700ms ease-in-out 200ms;
}

.ai-section-icon:not(.no-hover):hover .dot-t6,
.ai-section-icon:not(.no-hover):hover .dot-b6 {
  animation: ai-section-blink 700ms ease-in-out 250ms;
}

.ai-section-icon:not(.no-hover):hover .dot-t7,
.ai-section-icon:not(.no-hover):hover .dot-b7 {
  animation: ai-section-blink 700ms ease-in-out 300ms;
}

@keyframes ai-section-blink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="frame" fillRule="evenodd" d="M13.1025 4.00488C13.6067 4.05621 14 4.48232 14 5V10L13.9951 10.1025C13.9472 10.573 13.573 10.9472 13.1025 10.9951L13 11H2L1.89746 10.9951C1.42703 10.9472 1.05278 10.573 1.00488 10.1025L1 10V5C1 4.48232 1.39333 4.05621 1.89746 4.00488L2 4H13L13.1025 4.00488ZM2 10H13V5H2V10Z" fill="currentColor"/>
        <path className="dot-t1" d="M1.5 1C1.77614 1 2 1.22386 2 1.5C2 1.77614 1.77614 2 1.5 2C1.22386 2 1 1.77614 1 1.5C1 1.22386 1.22386 1 1.5 1Z" fill="currentColor"/>
        <path className="dot-t2" d="M3.5 1C3.77614 1 4 1.22386 4 1.5C4 1.77614 3.77614 2 3.5 2C3.22386 2 3 1.77614 3 1.5C3 1.22386 3.22386 1 3.5 1Z" fill="currentColor"/>
        <path className="dot-t3" d="M5.5 1C5.77614 1 6 1.22386 6 1.5C6 1.77614 5.77614 2 5.5 2C5.22386 2 5 1.77614 5 1.5C5 1.22386 5.22386 1 5.5 1Z" fill="currentColor"/>
        <path className="dot-t4" d="M7.5 1C7.77614 1 8 1.22386 8 1.5C8 1.77614 7.77614 2 7.5 2C7.22386 2 7 1.77614 7 1.5C7 1.22386 7.22386 1 7.5 1Z" fill="currentColor"/>
        <path className="dot-t5" d="M9.5 1C9.77614 1 10 1.22386 10 1.5C10 1.77614 9.77614 2 9.5 2C9.22386 2 9 1.77614 9 1.5C9 1.22386 9.22386 1 9.5 1Z" fill="currentColor"/>
        <path className="dot-t6" d="M11.5 1C11.7761 1 12 1.22386 12 1.5C12 1.77614 11.7761 2 11.5 2C11.2239 2 11 1.77614 11 1.5C11 1.22386 11.2239 1 11.5 1Z" fill="currentColor"/>
        <path className="dot-t7" d="M13.5 1C13.7761 1 14 1.22386 14 1.5C14 1.77614 13.7761 2 13.5 2C13.2239 2 13 1.77614 13 1.5C13 1.22386 13.2239 1 13.5 1Z" fill="currentColor"/>
        <path className="dot-b1" d="M1.5 13C1.77614 13 2 13.2239 2 13.5C2 13.7761 1.77614 14 1.5 14C1.22386 14 1 13.7761 1 13.5C1 13.2239 1.22386 13 1.5 13Z" fill="currentColor"/>
        <path className="dot-b2" d="M3.5 13C3.77614 13 4 13.2239 4 13.5C4 13.7761 3.77614 14 3.5 14C3.22386 14 3 13.7761 3 13.5C3 13.2239 3.22386 13 3.5 13Z" fill="currentColor"/>
        <path className="dot-b3" d="M5.5 13C5.77614 13 6 13.2239 6 13.5C6 13.7761 5.77614 14 5.5 14C5.22386 14 5 13.7761 5 13.5C5 13.2239 5.22386 13 5.5 13Z" fill="currentColor"/>
        <path className="dot-b4" d="M7.5 13C7.77614 13 8 13.2239 8 13.5C8 13.7761 7.77614 14 7.5 14C7.22386 14 7 13.7761 7 13.5C7 13.2239 7.22386 13 7.5 13Z" fill="currentColor"/>
        <path className="dot-b5" d="M9.5 13C9.77614 13 10 13.2239 10 13.5C10 13.7761 9.77614 14 9.5 14C9.22386 14 9 13.7761 9 13.5C9 13.2239 9.22386 13 9.5 13Z" fill="currentColor"/>
        <path className="dot-b6" d="M11.5 13C11.7761 13 12 13.2239 12 13.5C12 13.7761 11.7761 14 11.5 14C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13Z" fill="currentColor"/>
        <path className="dot-b7" d="M13.5 13C13.7761 13 14 13.2239 14 13.5C14 13.7761 13.7761 14 13.5 14C13.2239 14 13 13.7761 13 13.5C13 13.2239 13.2239 13 13.5 13Z" fill="currentColor"/>
      </svg>
    </>
  );
}