SmsPriceLookup.mdx

export const SmsPriceLookup = ({ priceDataJson }) => {

const countries = Object.keys(priceDataJson).sort();

const toggleVisibility = () => { const targetDiv = document.getElementById('hidden-content-simple'); if (targetDiv) { const isOpen = targetDiv.getAttribute('data-open') === 'true'; targetDiv.setAttribute('data-open', !isOpen); } }

const selectCountry = (country) => { const selectElement = document.getElementById('sms-country-select-simple'); const buttonElement = document.getElementById('country-toggle-button'); const targetDiv = document.getElementById('hidden-content-simple'); const priceDisplayElement = document.getElementById('sms-price-display');

if (selectElement) { selectElement.value = country; } if (buttonElement) { buttonElement.textContent = country; } if (priceDisplayElement && priceDataJson[country]) {

const price = priceDataJson[country];

priceDisplayElement.textContent = ${price}¢; } if (targetDiv) { targetDiv.setAttribute('data-open', 'false'); } }

return (

Select Your Country To View Pricing

Select Country

Cost

0.000¢

</div>

<div
  id="hidden-content-simple"
  data-open="false"
  style={{
    top: "calc(100% + 0px)",
  }}
  className="text-base bg-background-light dark:bg-background-dark absolute z-50 max-h-96 max-w-[var(--radix-dropdown-menu-content-available-width)] min-w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto rounded-xl border-standard text-gray-950/70 dark:text-white/70 p-1 gap-2"
>
  <div>
    {countries.map((country) => (
      <div
        key={country}
        style={{ padding: "0.5rem", cursor: "pointer" }}
        className="hover:bg-gray-100 rounded-md hover:dark:bg-gray-800"
        onClick={() => selectCountry(country)}
      >
        {country}
      </div>
    ))}
  </div>
</div>

); };