87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
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;
|