86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
interface Circle4PeopleIconType {
|
|
className?: string;
|
|
onClick?: () => void;
|
|
title?: string;
|
|
timer?: string;
|
|
fill?: string;
|
|
}
|
|
|
|
const Circle4PeopleIcon = ({
|
|
className,
|
|
onClick,
|
|
title,
|
|
timer,
|
|
fill = "#5F6C7B",
|
|
}: Circle4PeopleIconType) => {
|
|
return (
|
|
<svg
|
|
width="75"
|
|
height="75"
|
|
viewBox="0 0 75 75"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
onClick={onClick}
|
|
>
|
|
<path
|
|
d="M70.9565 24.8184C73.1894 24.8184 74.9995 26.6285 74.9995 28.8614V45.0331C74.9995 47.266 73.1894 49.0761 70.9565 49.0761V24.8184Z"
|
|
fill={fill}
|
|
fillOpacity="0.12"
|
|
/>
|
|
<path
|
|
d="M25.999 4.11816C25.999 1.8853 27.8091 0.0752001 30.042 0.0752001L46.2141 0.0752001C48.4469 0.0752001 50.257 1.8853 50.257 4.11816L25.999 4.11816Z"
|
|
fill={fill}
|
|
fillOpacity="0.12"
|
|
/>
|
|
<path
|
|
d="M50.2559 70.2617C50.2559 72.4946 48.4458 74.3047 46.2129 74.3047H30.0408C27.808 74.3047 25.9979 72.4946 25.9979 70.2617H50.2559Z"
|
|
fill={fill}
|
|
fillOpacity="0.12"
|
|
/>
|
|
<path
|
|
d="M4.81201 49.0752C2.57912 49.0752 0.769012 47.2651 0.769012 45.0322L0.769012 28.8604C0.769012 26.6275 2.57912 24.8174 4.81201 24.8174L4.81201 49.0752Z"
|
|
fill={fill}
|
|
fillOpacity="0.12"
|
|
/>
|
|
<ellipse
|
|
cx="37.8909"
|
|
cy="37.2011"
|
|
rx="30.3225"
|
|
ry="30.3222"
|
|
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 Circle4PeopleIcon;
|