const label = props.label ?? "Label"; const value = props.value ?? "0"; const onChange = props.onChange ?? (() => {}); const error = props.error ?? ""; const Container = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0px; gap: 0.45em; width: 100%; `; const Label = styled.label` font-style: normal; font-weight: 600; font-size: 0.95em; line-height: 1.25em; color: #344054; `; const Error = styled.span` display: inline-block; font-style: normal; font-weight: 400; font-size: 0.75em; line-height: 1.25em; color: #ff4d4f; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; &.show { height: 1.25em; } `; const Option = styled.div` margin-bottom: 24px; flex: 1; border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; background: #fff; padding: 4px; cursor: pointer; border: 2px solid transparent; position: relative; min-width: 160px; max-width: 260px; aspect-ratio: 1; display: flex; flex-direction: column; h5 { font-size: 16px; font-weight: 600; padding: 6px 16px; text-align: center; } svg { width: 80%; margin: auto; flex: 1; } &.active { border-color: #4f46e5; } `; return ( <Container> <Label>{label}</Label> <div className="d-flex flex-wrap gap-3"> <Option className={value == "0" ? "active" : ""} onClick={() => onChange("0")} > <svg viewBox="0 0 278 107" fill="#E9ECEF" xmlns="http://www.w3.org/2000/svg" > <path d="M59 22C59 9.84974 68.8497 0 81 0H255C267.15 0 277 9.84974 277 22C277 34.1503 267.15 44 255 44H81C68.8497 44 59 34.1503 59 22Z" /> <path d="M60 85C60 72.8497 69.8497 63 82 63H256C268.15 63 278 72.8497 278 85C278 97.1503 268.15 107 256 107H82C69.8497 107 60 97.1503 60 85Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 4H22C12.0589 4 4 12.0589 4 22C4 31.9411 12.0589 40 22 40H23C32.9411 40 41 31.9411 41 22C41 12.0589 32.9411 4 23 4ZM22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44H23C35.1503 44 45 34.1503 45 22C45 9.84974 35.1503 0 23 0H22Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 67H23C13.0589 67 5 75.0589 5 85C5 94.9411 13.0589 103 23 103H24C33.9411 103 42 94.9411 42 85C42 75.0589 33.9411 67 24 67ZM23 63C10.8497 63 1 72.8497 1 85C1 97.1503 10.8497 107 23 107H24C36.1503 107 46 97.1503 46 85C46 72.8497 36.1503 63 24 63H23Z" /> <path d="M11 85C11 77.8203 16.8203 72 24 72C31.1797 72 37 77.8203 37 85C37 92.1797 31.1797 98 24 98C16.8203 98 11 92.1797 11 85Z" /> </svg> <h5>Yes or No</h5> </Option> <Option className={value == "1" ? "active" : ""} onClick={() => onChange("1")} > <svg viewBox="0 0 278 174" xmlns="http://www.w3.org/2000/svg" fill="#E9ECEF" > <path d="M59 88.5C59 76.3497 68.8497 66.5 81 66.5H255C267.15 66.5 277 76.3497 277 88.5C277 100.65 267.15 110.5 255 110.5H81C68.8497 110.5 59 100.65 59 88.5Z" /> <path d="M60 151.5C60 139.35 69.8497 129.5 82 129.5H256C268.15 129.5 278 139.35 278 151.5C278 163.65 268.15 173.5 256 173.5H82C69.8497 173.5 60 163.65 60 151.5Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 70.5H22C12.0589 70.5 4 78.5589 4 88.5C4 98.4411 12.0589 106.5 22 106.5H23C32.9411 106.5 41 98.4411 41 88.5C41 78.5589 32.9411 70.5 23 70.5ZM22 66.5C9.84974 66.5 0 76.3497 0 88.5C0 100.65 9.84974 110.5 22 110.5H23C35.1503 110.5 45 100.65 45 88.5C45 76.3497 35.1503 66.5 23 66.5H22Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M24 133.5H23C13.0589 133.5 5 141.559 5 151.5C5 161.441 13.0589 169.5 23 169.5H24C33.9411 169.5 42 161.441 42 151.5C42 141.559 33.9411 133.5 24 133.5ZM23 129.5C10.8497 129.5 1 139.35 1 151.5C1 163.65 10.8497 173.5 23 173.5H24C36.1503 173.5 46 163.65 46 151.5C46 139.35 36.1503 129.5 24 129.5H23Z" /> <path d="M11 151.5C11 144.32 16.8203 138.5 24 138.5C31.1797 138.5 37 144.32 37 151.5C37 158.68 31.1797 164.5 24 164.5C16.8203 164.5 11 158.68 11 151.5Z" /> <path d="M59 22C59 9.84974 68.8497 0 81 0H255C267.15 0 277 9.84974 277 22C277 34.1503 267.15 44 255 44H81C68.8497 44 59 34.1503 59 22Z" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 4H22C12.0589 4 4 12.0589 4 22C4 31.9411 12.0589 40 22 40H23C32.9411 40 41 31.9411 41 22C41 12.0589 32.9411 4 23 4ZM22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44H23C35.1503 44 45 34.1503 45 22C45 9.84974 35.1503 0 23 0H22Z" /> </svg> <h5>Single Choice</h5> </Option> <Option className={value == "2" ? "active" : ""} onClick={() => onChange("2")} > <svg viewBox="0 0 193 127" xmlns="http://www.w3.org/2000/svg" fill="#E9ECEF" > <path d="M41 63.5C41 54.9396 47.9396 48 56.5 48H177.5C186.06 48 193 54.9396 193 63.5C193 72.0604 186.06 79 177.5 79H56.5C47.9396 79 41 72.0604 41 63.5Z" /> <path d="M41 111.5C41 102.94 47.9396 96 56.5 96H177.5C186.06 96 193 102.94 193 111.5C193 120.06 186.06 127 177.5 127H56.5C47.9396 127 41 120.06 41 111.5Z" /> <path d="M41 15.5C41 6.93959 47.9396 0 56.5 0H177.5C186.06 0 193 6.93959 193 15.5C193 24.0604 186.06 31 177.5 31H56.5C47.9396 31 41 24.0604 41 15.5Z" /> <path d="M27.125 97.9375C27.6389 97.9375 28.1317 98.1416 28.495 98.505C28.8584 98.8683 29.0625 99.3611 29.0625 99.875V123.125C29.0625 123.639 28.8584 124.132 28.495 124.495C28.1317 124.858 27.6389 125.062 27.125 125.062H3.875C3.36114 125.062 2.86833 124.858 2.50498 124.495C2.14163 124.132 1.9375 123.639 1.9375 123.125V99.875C1.9375 99.3611 2.14163 98.8683 2.50498 98.505C2.86833 98.1416 3.36114 97.9375 3.875 97.9375H27.125ZM3.875 96C2.84729 96 1.86166 96.4083 1.13496 97.135C0.408258 97.8617 0 98.8473 0 99.875V123.125C0 124.153 0.408258 125.138 1.13496 125.865C1.86166 126.592 2.84729 127 3.875 127H27.125C28.1527 127 29.1383 126.592 29.865 125.865C30.5917 125.138 31 124.153 31 123.125V99.875C31 98.8473 30.5917 97.8617 29.865 97.135C29.1383 96.4083 28.1527 96 27.125 96H3.875Z" /> <path d="M21.2544 105.629C21.5255 105.361 21.8916 105.209 22.2734 105.208C22.6552 105.207 23.022 105.356 23.2947 105.624C23.5673 105.891 23.7238 106.255 23.7303 106.637C23.7368 107.018 23.5928 107.387 23.3294 107.664L15.5949 117.332C15.462 117.475 15.3016 117.59 15.1232 117.67C14.9449 117.749 14.7523 117.792 14.5569 117.796C14.3616 117.8 14.1675 117.764 13.9863 117.691C13.8052 117.618 13.6406 117.509 13.5024 117.371L8.37775 112.244C8.23498 112.111 8.12047 111.951 8.04105 111.772C7.96163 111.594 7.91892 111.402 7.91548 111.207C7.91204 111.011 7.94793 110.818 8.02101 110.637C8.0941 110.456 8.20288 110.291 8.34086 110.153C8.47885 110.015 8.64322 109.907 8.82415 109.834C9.00509 109.76 9.1989 109.725 9.39401 109.728C9.58912 109.731 9.78154 109.774 9.95979 109.854C10.138 109.933 10.2985 110.047 10.4315 110.19L14.4886 114.245L21.2176 105.672C21.2296 105.657 21.2406 105.643 21.2544 105.629Z" /> <path d="M27.125 1.9375C27.6389 1.9375 28.1317 2.14163 28.495 2.50498C28.8584 2.86833 29.0625 3.36114 29.0625 3.875V27.125C29.0625 27.6389 28.8584 28.1317 28.495 28.495C28.1317 28.8584 27.6389 29.0625 27.125 29.0625H3.875C3.36114 29.0625 2.86833 28.8584 2.50498 28.495C2.14163 28.1317 1.9375 27.6389 1.9375 27.125V3.875C1.9375 3.36114 2.14163 2.86833 2.50498 2.50498C2.86833 2.14163 3.36114 1.9375 3.875 1.9375H27.125ZM3.875 0C2.84729 0 1.86166 0.408258 1.13496 1.13496C0.408258 1.86166 0 2.84729 0 3.875V27.125C0 28.1527 0.408258 29.1383 1.13496 29.865C1.86166 30.5917 2.84729 31 3.875 31H27.125C28.1527 31 29.1383 30.5917 29.865 29.865C30.5917 29.1383 31 28.1527 31 27.125V3.875C31 2.84729 30.5917 1.86166 29.865 1.13496C29.1383 0.408258 28.1527 0 27.125 0H3.875Z" /> <path d="M21.2544 9.62937C21.5255 9.36059 21.8916 9.20932 22.2734 9.20826C22.6552 9.20721 23.022 9.35646 23.2947 9.62374C23.5673 9.89103 23.7238 10.2549 23.7303 10.6366C23.7368 11.0184 23.5928 11.3873 23.3294 11.6637L15.5949 21.3319C15.462 21.4751 15.3016 21.59 15.1232 21.6697C14.9449 21.7495 14.7523 21.7924 14.5569 21.7961C14.3616 21.7997 14.1675 21.7639 13.9863 21.6908C13.8052 21.6177 13.6406 21.5088 13.5024 21.3706L8.37775 16.244C8.23498 16.111 8.12047 15.9505 8.04105 15.7723C7.96163 15.594 7.91892 15.4016 7.91548 15.2065C7.91204 15.0114 7.94793 14.8176 8.02101 14.6367C8.0941 14.4557 8.20288 14.2913 8.34086 14.1534C8.47885 14.0154 8.64322 13.9066 8.82415 13.8335C9.00509 13.7604 9.1989 13.7245 9.39401 13.728C9.58912 13.7314 9.78154 13.7741 9.95979 13.8535C10.138 13.933 10.2985 14.0475 10.4315 14.1902L14.4886 18.2454L21.2176 9.672C21.2296 9.65699 21.2406 9.64275 21.2544 9.62937Z" /> <path d="M27.125 49.9375C27.6389 49.9375 28.1317 50.1416 28.495 50.505C28.8584 50.8683 29.0625 51.3611 29.0625 51.875V75.125C29.0625 75.6389 28.8584 76.1317 28.495 76.495C28.1317 76.8584 27.6389 77.0625 27.125 77.0625H3.875C3.36114 77.0625 2.86833 76.8584 2.50498 76.495C2.14163 76.1317 1.9375 75.6389 1.9375 75.125V51.875C1.9375 51.3611 2.14163 50.8683 2.50498 50.505C2.86833 50.1416 3.36114 49.9375 3.875 49.9375H27.125ZM3.875 48C2.84729 48 1.86166 48.4083 1.13496 49.135C0.408258 49.8617 0 50.8473 0 51.875V75.125C0 76.1527 0.408258 77.1383 1.13496 77.865C1.86166 78.5917 2.84729 79 3.875 79H27.125C28.1527 79 29.1383 78.5917 29.865 77.865C30.5917 77.1383 31 76.1527 31 75.125V51.875C31 50.8473 30.5917 49.8617 29.865 49.135C29.1383 48.4083 28.1527 48 27.125 48H3.875Z" /> </svg> <h5>Multi Choices</h5> </Option> <Option className={value == "3" ? "active" : ""} onClick={() => onChange("3")} > <svg viewBox="0 0 187 127" fill="#E9ECEF" xmlns="http://www.w3.org/2000/svg" > <path d="M0 63.5C0 54.9396 6.93959 48 15.5 48H110.5C119.06 48 126 54.9396 126 63.5C126 72.0604 119.06 79 110.5 79H15.5C6.93959 79 0 72.0604 0 63.5Z" /> <path d="M0 111.5C0 102.94 6.93959 96 15.5 96H143.5C152.06 96 159 102.94 159 111.5C159 120.06 152.06 127 143.5 127H15.5C6.93959 127 0 120.06 0 111.5Z" /> <path d="M0 15.5C0 6.93959 6.93959 0 15.5 0H171.5C180.06 0 187 6.93959 187 15.5C187 24.0604 180.06 31 171.5 31H15.5C6.93959 31 0 24.0604 0 15.5Z" /> </svg> <h5>Text Answer</h5> </Option> </div> <Error className={error ? "show" : ""}>{error}</Error> </Container> );