export const LayoutOne = ({ value }) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={120} height={55} fill="none">
			<path
				stroke={"layoutOne" === value ? "#1A74E4" : "#58707F"}
				strokeWidth={1.5}
				d="M6 1h108c1.442 0 2.423.002 3.158.1.706.096 1.033.263 1.256.486.223.223.39.55.485 1.256.099.735.101 1.716.101 3.158v43c0 1.442-.002 2.423-.101 3.158-.095.706-.262 1.033-.485 1.256-.223.223-.55.39-1.256.485-.735.1-1.716.101-3.158.101H6c-1.442 0-2.423-.002-3.158-.1-.706-.096-1.033-.263-1.256-.486-.223-.223-.39-.55-.485-1.256C1 51.423 1 50.442 1 49V6c0-1.442.002-2.423.1-3.158.096-.706.263-1.033.486-1.256.223-.223.55-.39 1.256-.485C3.577 1 4.558 1 6 1Z"
			/>
			<rect width={32} height={9} x={8.5} y={25.5} fill="#fff" stroke="#58707F" rx={1.5} />
			<path stroke="#58707F" strokeLinecap="round" strokeLinejoin="round" d="m37.5 29-2 2-2-2" />
			<rect width={12} height={2} x={11} y={29} fill="#58707F" rx={1} />
			<rect width={16} height={3} x={8} y={20} fill="#58707F" rx={1.5} />
			<rect width={32} height={9} x={44} y={25.5} fill="#fff" stroke="#58707F" rx={1.5} />
			<path stroke="#58707F" strokeLinecap="round" strokeLinejoin="round" d="m73 29-2 2-2-2" />
			<rect width={12} height={2} x={46.5} y={29} fill="#58707F" rx={1} />
			<rect width={16} height={3} x={43.5} y={20} fill="#58707F" rx={1.5} />
			<rect width={32} height={9} x={79.5} y={25.5} fill="#fff" stroke="#58707F" rx={1.5} />
			<path
				stroke="#58707F"
				strokeLinecap="round"
				strokeLinejoin="round"
				strokeWidth={0.75}
				d="m85.5 31.75-.846-.846m.457-1.098a1.555 1.555 0 1 1-3.11 0 1.555 1.555 0 0 1 3.11 0Z"
			/>
			<rect width={12} height={2} x={88} y={29} fill="#58707F" rx={1} />
			<rect width={16} height={3} x={79} y={20} fill="#58707F" rx={1.5} />
			<g clipPath="url(#a)">
				<path
					fill="#fff"
					d="M109.028 5H109a6.032 6.032 0 0 0-4.817 2.422A5.951 5.951 0 0 0 103 11c0 1.146.324 2.26.938 3.221a6.015 6.015 0 0 0 2.434 2.174A5.944 5.944 0 0 0 109 17H109.027c3.294-.016 5.973-2.707 5.973-6s-2.679-5.984-5.972-6Zm3.551 4.727-3.765 3.765a.858.858 0 0 1-1.219 0l-2.175-2.174a.864.864 0 0 1 .611-1.473c.23 0 .447.09.61.253l1.564 1.564 3.154-3.155a.858.858 0 0 1 .61-.252c.231 0 .447.09.61.253.163.163.253.38.253.61 0 .23-.09.446-.253.61Z"
				/>
				<path
					fill="#fff"
					d="m112.579 9.727-3.765 3.765a.858.858 0 0 1-1.219 0l-2.175-2.174a.864.864 0 0 1 .611-1.473c.23 0 .447.09.61.253l1.564 1.564 3.154-3.155a.858.858 0 0 1 .61-.252c.231 0 .447.09.61.253.163.163.253.38.253.61 0 .23-.09.446-.253.61Z"
				/>
				<path
					fill="#1A74E4"
					d="M109.028 5H109a6.032 6.032 0 0 0-4.817 2.422A5.951 5.951 0 0 0 103 11c0 1.146.324 2.26.938 3.221a6.015 6.015 0 0 0 2.434 2.174A5.944 5.944 0 0 0 109 17H109.027c3.294-.016 5.973-2.707 5.973-6s-2.679-5.984-5.972-6Zm3.551 4.727-3.765 3.765a.858.858 0 0 1-1.219 0l-2.175-2.174a.864.864 0 0 1 .611-1.473c.23 0 .447.09.61.253l1.564 1.564 3.154-3.155a.858.858 0 0 1 .61-.252c.231 0 .447.09.61.253.163.163.253.38.253.61 0 .23-.09.447-.253.61Z"
				/>
			</g>
		</svg>
	);
};
export const LayoutTwo = ({ value, coming }) => {
	return (
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width={120}
			height={55}
			fill="none"
			// className={coming ? 'sp-coming-layout' : ''}
		>
			<path
				fill="#fff"
				d="M6 .75h108c1.435 0 2.436.002 3.191.104.734.098 1.123.278 1.4.555.277.277.457.666.555 1.4.102.755.104 1.756.104 3.191v43c0 1.435-.002 2.436-.104 3.191-.098.734-.278 1.123-.555 1.4-.277.277-.666.457-1.4.556-.755.101-1.756.103-3.191.103H6c-1.435 0-2.436-.002-3.191-.103-.734-.1-1.123-.28-1.4-.556-.277-.277-.457-.666-.555-1.4C.752 51.436.75 50.435.75 49V6c0-1.435.002-2.436.104-3.191.098-.734.278-1.123.555-1.4.277-.277.666-.457 1.4-.555C3.564.752 4.565.75 6 .75Z"
			/>
			<path
				stroke={"layoutTwo" === value ? "#1A74E4" : "#58707F"}
				strokeWidth={1.5}
				d="M6 .75h108c1.435 0 2.436.002 3.191.104.734.098 1.123.278 1.4.555.277.277.457.666.555 1.4.102.755.104 1.756.104 3.191v43c0 1.435-.002 2.436-.104 3.191-.098.734-.278 1.123-.555 1.4-.277.277-.666.457-1.4.556-.755.101-1.756.103-3.191.103H6c-1.435 0-2.436-.002-3.191-.103-.734-.1-1.123-.28-1.4-.556-.277-.277-.457-.666-.555-1.4C.752 51.436.75 50.435.75 49V6c0-1.435.002-2.436.104-3.191.098-.734.278-1.123.555-1.4.277-.277.666-.457 1.4-.555C3.564.752 4.565.75 6 .75Z"
			/>
			<rect width={103} height={1} x={9} y={30.5} fill="#9EA9B2" rx={0.5} />
			<path
				fill="#58707F"
				stroke="#58707F"
				d="M9 24h19a.5.5 0 0 1 .5.5V31H9a.5.5 0 0 1-.5-.5v-6A.5.5 0 0 1 9 24Z"
			/>
			<rect width={12} height={2} x={12} y={26.5} fill="#fff" rx={1} />
			<path fill="#58707F" d="M51 30.5h12v1H51z" />
			<rect width={8} height={2} x={53} y={26.5} fill="#58707F" rx={1} />
			<rect width={10} height={2} x={67} y={26.5} fill="#58707F" rx={1} />
			<rect width={10} height={2} x={82} y={26.5} fill="#58707F" rx={1} />
			<rect width={8} height={2} x={97} y={26.5} fill="#58707F" rx={1} />
			<path stroke="#58707F" strokeLinecap="round" strokeLinejoin="round" d="m112 26.5-2 2-2-2" />
		</svg>
	);
};

export const LiveFilterIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 800 800" width={80} height={80}>
		<defs>
			<style>{".sp-st0{fill:var(--sp-smart-primary-2-600)}"}</style>
		</defs>
		<rect width={128.9} height={41.9} x={79.3} y={431.5} className="sp-st0" rx={21} ry={21} />
		<path
			d="M291.2 428.3c5.9-3.9 13.8-3.2 19 2 5.2 5.2 5.8 13.1 2 19l-2 2.4-21.6 21.6c-6.9 6.9-17.5 7.7-25.3 2.6l-3.2-2.6-21.6-21.6-2-2.4c-3.9-5.9-3.2-13.8 2-19 5.2-5.2 13.1-5.8 19-2l2.4 2 14.5 14.5 14.5-14.5 2.4-2Z"
			className="sp-st0"
		/>
		<path
			d="M327.5 570H63.2C33.9 570 10 546.1 10 516.8V387.9c0-29.3 23.9-53.2 53.2-53.2h264.3c29.3 0 53.2 23.9 53.2 53.2v128.9c0 29.3-23.9 53.2-53.2 53.2ZM63.2 376.6c-6.2 0-11.3 5-11.3 11.3v128.9c0 6.2 5.1 11.3 11.3 11.3h264.3c6.2 0 11.3-5 11.3-11.3V387.9c0-6.2-5.1-11.3-11.3-11.3H63.2ZM256.6 288H47.1c-16 0-29-13-29-29s13-29 29-29h209.5c16 0 29 13 29 29s-13 29-29 29ZM736.8 570H472.5c-29.3 0-53.2-23.9-53.2-53.2V387.9c0-29.3 23.9-53.2 53.2-53.2h264.3c29.3 0 53.2 23.9 53.2 53.2v128.9c0 29.3-23.9 53.2-53.2 53.2ZM472.5 376.6c-6.2 0-11.3 5-11.3 11.3v128.9c0 6.2 5.1 11.3 11.3 11.3h264.3c6.2 0 11.3-5 11.3-11.3V387.9c0-6.2-5.1-11.3-11.3-11.3H472.5Z"
			className="sp-st0"
		/>
		<circle cx={527.3} cy={452.4} r={32.2} className="sp-st0" />
		<path
			d="M553.1 486.2c-2.1 0-4.1-.8-5.7-2.4l-32.2-32.2c-3.1-3.1-3.1-8.2 0-11.4s8.2-3.1 11.4 0l32.2 32.2c3.1 3.1 3.1 8.2 0 11.4s-3.6 2.4-5.7 2.4Z"
			className="sp-st0"
		/>
		<rect width={128.9} height={41.9} x={591.8} y={431.4} className="sp-st0" rx={21} ry={21} />
		<path
			d="M654.6 288H456.4c-16 0-29-13-29-29s13-29 29-29h198.2c16 0 29 13 29 29s-13 29-29 29Z"
			className="sp-st0"
		/>
	</svg>
);