BetaForm.tsx)¶

Overview¶

A beta notification form component that displays beta status information and provides email support contact functionality.

Features¶

Beta status badge
Close button
Email support link
Dark mode support
Responsive design
Custom positioning
Alert role
Accessibility support
Hover effects
Custom styling

Dependencies¶

import React, { useState } from 'react'

Props¶

interface BetaFormInterface {
  isBeta: boolean;
  hideBeta: () => void;
}

Implementation¶

State Management¶

No internal state management - component is controlled through props.

Methods¶

const emailBody = "My custom mail body";
const mailtoLink = `mailto:support@bidscript.co.uk?body=${encodeURIComponent(emailBody)}`;

Unique Functionality¶

Email link generation
Beta badge display
Close button handling
Dark mode theming
Absolute positioning

HTML Structure¶

<div
  id="dropdown-cta"
  className="betaform p-4 mt-6 rounded-lg bg-blue-50 dark:bg-blue-900"
  style={{
    position: 'absolute',
    zIndex: '100',
    width: '230px',
    bottom: '55px',
    left: '1.3%'
  }}
  role="alert"
>
  <div className="flex items-center mb-3">
    <span className="bg-pink-525 text-blue-925 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900">
      Beta
    </span>
    <button
      onClick={hideBeta}
      type="button"
      className="ms-auto -mx-1.5 -my-1.5 bg-blue-50 inline-flex justify-center items-center text-blue-900 rounded-lg focus:ring-2 focus:ring-blue-400 p-1 hover:bg-blue-200 h-6 w-6 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
      data-dismiss-target="#dropdown-cta"
      aria-label="Close"
    >
      <span className="sr-only">Close</span>
      <svg className="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
      </svg>
    </button>
  </div>
  <p className="mb-3 text-sm text-blue-800 dark:text-blue-400">
    This is a beta version. Please contact us for any assistance or if you encountered any problems.
  </p>
  <a
    className="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
    href={mailtoLink}
  >
    Send Email
  </a>
</div>

API Integration¶

No direct API integration required.

Components Used¶

No additional components used.

Notes¶

Uses absolute positioning
Implements dark mode
Provides email support
Handles beta status
Supports accessibility
Uses Tailwind CSS