Throw error when BlockSwitcher only has a single block

src/components/BlockSwitcher/BlockSwitcher.tsx

@@ -2,29 +2,35 @@ import { Children } from 'react';
 import { View, Tabs } from '@aws-amplify/ui-react';
 import { BlockProps } from './Block';
 
-interface BlockSwitcher {
-  children: BlockProps | BlockProps[];
+interface BlockSwitcherProps {
+  children: React.ReactElement<BlockProps>[];
 }
 
-export const BlockSwitcher = ({ children }) => {
+export const BlockSwitcherErrorMessage =
+  'BlockSwitcher requires more than one block element';
+
+export const BlockSwitcher = ({ children }: BlockSwitcherProps) => {
+  if (!children.length || children.length <= 1) {
+    throw new Error(BlockSwitcherErrorMessage);
+  }
   return (
     <View className="block-switcher">
-      <Tabs.Container defaultValue={children[0]?.props?.name}>
+      <Tabs.Container defaultValue={children[0].props.name}>
         <Tabs.List>
           {Children.map(children, (child, index) => {
             return (
-              child?.props?.name && (
-                <Tabs.Item value={child?.props?.name} key={index}>
-                  {child?.props?.name}
+              child.props.name && (
+                <Tabs.Item value={child.props.name} key={index}>
+                  {child.props.name}
                 </Tabs.Item>
               )
             );
           })}
         </Tabs.List>
         {Children.map(children, (child, index) => {
           return (
-            child?.props?.name && (
-              <Tabs.Panel value={child?.props?.name} key={index}>
+            child.props.name && (
+              <Tabs.Panel value={child.props.name} key={index}>
                 {child}
               </Tabs.Panel>
             )

src/components/BlockSwitcher/__tests__/BlockSwitcher.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { BlockSwitcherErrorMessage } from '../BlockSwitcher';
 import { BlockSwitcher } from '../index';
 import { Block } from '../index';
 
@@ -82,4 +83,13 @@ describe('BlockSwitcher', () => {
       expect(panels[2]).toHaveClass('amplify-tabs__panel--active');
     });
   });
+
+  it('should throw an error if only a single block exists', () => {
+    const singleBlock = (
+      <BlockSwitcher>
+        <Block name="JavaScript">{blockAContent}</Block>
+      </BlockSwitcher>
+    );
+    expect(() => render(singleBlock)).toThrow(BlockSwitcherErrorMessage);
+  });
 });

src/fragments/lib/geo/ios/getting_started/30_install_lib.mdx

@@ -1,8 +1,6 @@
 The Geo plugin is dependent on Cognito Auth.
 
-<BlockSwitcher>
-
-<Block name="Swift Package Manager">
+#### Swift Package Manager
 
 1. To install Amplify Geo and Authentication to your application, open your project in Xcode and select **File > Add Packages...**.
 
@@ -11,7 +9,3 @@ The Geo plugin is dependent on Cognito Auth.
 1. Choose the dependency rule **Up to Next Major Version**, as it will use the latest compatible version of the dependency, then click **Add Package**.
 
 1. Lastly, choose **AWSLocationGeoPlugin**, **AWSCognitoAuthPlugin**, and **Amplify**. Then click Finish.
-
-</Block>
-
-</BlockSwitcher>

src/fragments/lib/graphqlapi/ios/optimistic-ui.mdx

@@ -66,9 +66,6 @@ By providing these methods through an actor object, the underlying list will be
 
 To create an actor object that allows optimistic UI updates, create a new file and add the following code. 
 
-<BlockSwitcher>
-<Block name="Swift">
-
 ```swift
 import Amplify
 import SwiftUI
@@ -98,14 +95,8 @@ actor RealEstatePropertyList {
 }
 ``` 
 
-</Block>
-</BlockSwitcher>
-
 Calling the `listProperties()` method will perform a query with GraphQL API and store the results in the `properties` property. When this property is set, the list is sent back to the subscribers. In your UI, create a view model and subscribe to updates:
 
-<BlockSwitcher>
-<Block name="Swift">
-
 ```swift
 class RealEstatePropertyContainerViewModel: ObservableObject {
     @Published var properties: [RealEstateProperty] = []
@@ -140,16 +131,10 @@ struct RealEstatePropertyContainerView: View {
 }
 ``` 
 
-</Block>
-</BlockSwitcher>
-
 ## Optimistically rendering a newly created record
 
 To optimistically render a newly created record returned from the GraphQL API, add a method to the `actor RealEstatePropertyList`:
 
-<BlockSwitcher>
-<Block name="Swift">
-
 ```swift
 func createProperty(name: String, address: String? = nil) {
     let property = RealEstateProperty(name: name, address: address)
@@ -179,16 +164,10 @@ func createProperty(name: String, address: String? = nil) {
 }
 ``` 
 
-</Block>
-</BlockSwitcher>
-
 ## Optimistically rendering a record update
 
 To optimistically render updates on a single item, use the code snippet like below:
 
-<BlockSwitcher>
-<Block name="Swift">
-
 ```swift
 func updateProperty(_ property: RealEstateProperty) async {
     guard let index = properties.firstIndex(where: { $0?.id == property.id }) else {
@@ -215,17 +194,10 @@ func updateProperty(_ property: RealEstateProperty) async {
 }
 ``` 
 
-</Block>
-
-</BlockSwitcher>
-
 ## Optimistically render deleting a record
 
 To optimistically render a GraphQL API delete, use the code snippet like below:
 
-<BlockSwitcher>
-<Block name="Swift">
-
 ```swift
 func deleteProperty(_ property: RealEstateProperty) async {
   guard let index = properties.firstIndex(where: { $0?.id == property.id }) else {
@@ -258,10 +230,6 @@ func deleteProperty(_ property: RealEstateProperty) async {
 }
 ``` 
 
-</Block>
-
-</BlockSwitcher>
-
 ## Complete example
 
 <BlockSwitcher>