Initial commit

src/components/Icons/tables/Square4PeopleIcon.tsx

@@ -0,0 +1,86 @@
+interface Square4PeopleIconType {
+  className?: string;
+  onClick?: () => void;
+  title?: string;
+  timer?: string;
+  fill?: string;
+}
+
+const Square4PeopleIcon = ({
+  className,
+  onClick,
+  title,
+  timer,
+  fill = "#5F6C7B",
+}: Square4PeopleIconType) => {
+  return (
+    <svg
+      width="75"
+      height="75"
+      viewBox="0 0 75 75"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      onClick={onClick}
+    >
+      <rect
+        x="6.18408"
+        y="6.18652"
+        width="61.8574"
+        height="61.8593"
+        rx="10"
+        fill={fill}
+        fillOpacity="0.12"
+      />
+      <path
+        d="M70.1074 24.7451C72.3849 24.7451 74.2312 26.5914 74.2312 28.8689V45.365C74.2312 47.6425 72.3849 49.4888 70.1074 49.4888V24.7451Z"
+        fill={fill}
+        fillOpacity="0.12"
+      />
+      <path
+        d="M24.7422 4.12402C24.7422 1.84643 26.5885 7.29561e-05 28.8661 7.29561e-05L45.3612 7.29561e-05C47.6388 7.29561e-05 49.4851 1.84643 49.4851 4.12402L24.7422 4.12402Z"
+        fill={fill}
+        fillOpacity="0.12"
+      />
+      <path
+        d="M49.4858 70.1064C49.4858 72.384 47.6395 74.2304 45.3619 74.2304H28.8668C26.5892 74.2304 24.7429 72.384 24.7429 70.1064H49.4858Z"
+        fill={fill}
+        fillOpacity="0.12"
+      />
+      <path
+        d="M4.12354 49.4873C1.84601 49.4873 -0.000291348 47.641 -0.000291348 45.3635L-0.000291348 28.8674C-0.000291348 26.5899 1.84601 24.7436 4.12354 24.7436L4.12354 49.4873Z"
+        fill={fill}
+        fillOpacity="0.12"
+      />
+
+      {/* Title and Timer Text */}
+      {title && (
+        <text
+          x="37.5"
+          y="35"
+          textAnchor="middle"
+          fontSize="12"
+          fontWeight="bold"
+          fill="#5F6C7B"
+          fontFamily="Arial, sans-serif"
+        >
+          {title}
+        </text>
+      )}
+      {timer && (
+        <text
+          x="37.5"
+          y="55"
+          textAnchor="middle"
+          fontSize="10"
+          fill="#5F6C7B"
+          fontFamily="Arial, sans-serif"
+        >
+          {timer}
+        </text>
+      )}
+    </svg>
+  );
+};
+
+export default Square4PeopleIcon;