// responsive component device icons.
// Desktop Icon.
export const DesktopIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width={14} height={12} fill="none">
		<path d="M12.714 0H1.286C.655 0 .143.504.143 1.125v7.5c0 .621.512 1.125 1.143 1.125h4.571l-.38 1.125H3.761a.566.566 0 0 0-.571.563c0 .311.254.562.571.562h6.476c.317 0 .572-.25.572-.563a.566.566 0 0 0-.572-.562H8.524l-.38-1.125h4.57c.631 0 1.143-.504 1.143-1.125v-7.5C13.857.504 13.346 0 12.714 0Zm-.38 8.25H1.667V1.5h10.667v6.75Z" />
	</svg>
);

// Tablet device Icon.
export const TabletIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width={12} height={12} fill="currentColor">
		<path d="M9.428 0H2.571C1.623 0 .857.67.857 1.5v9c0 .83.766 1.5 1.714 1.5h6.857c.949 0 1.715-.67 1.715-1.5v-9c0-.83-.766-1.5-1.715-1.5ZM7.143 11H4.857v-.5h2.286v.5Zm3-1.5H1.857v-8h8.286v8Z" />
	</svg>
);

// Mobile device Icon.
export const MobileIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width={8} height={12} fill="currentColor">
		<path d="M6.286 0H1.714C1.082 0 .571.67.571 1.5v9c0 .83.51 1.5 1.143 1.5h4.572c.632 0 1.142-.67 1.142-1.5v-9c0-.83-.51-1.5-1.142-1.5ZM4.762 11H3.238v-.5h1.524v.5Zm2-1.5H1.238v-8h5.524v8Z" />
	</svg>
);