chore(docs): use frameworks constants (#1949)

Co-authored-by: MJ☔ <[email protected]>

Author: 0618

docs/src/components/Layout/FrameworkChooser.tsx

@@ -6,6 +6,7 @@ import {
 } from '@aws-amplify/ui-react';
 
 import { useCustomRouter } from '@/components/useCustomRouter';
+import { FRAMEWORKS } from '@/data/frameworks';
 
 export const FrameworkChooser = ({ platform }) => {
   const { replace, pathname } = useCustomRouter();
@@ -43,62 +44,23 @@ export const FrameworkChooser = ({ platform }) => {
       isExclusive
       isSelectionRequired
     >
-      <ToggleButton
-        value="react"
-        size="small"
-        title="React"
-        padding={{ base: '4px', medium: undefined }}
-      >
-        <VisuallyHidden>React</VisuallyHidden>
-        <Image
-          alt=""
-          height={{ base: '1.5rem', medium: '1rem' }}
-          display="block"
-          src="/svg/integrations/react.svg"
-        />
-      </ToggleButton>
-      <ToggleButton
-        value="angular"
-        size="small"
-        title="Angular"
-        padding={{ base: '4px', medium: undefined }}
-      >
-        <VisuallyHidden>Angular</VisuallyHidden>
-        <Image
-          alt=""
-          height={{ base: '1.5rem', medium: '1rem' }}
-          display="block"
-          src="/svg/integrations/angular.svg"
-        />
-      </ToggleButton>
-      <ToggleButton
-        value="vue"
-        size="small"
-        title="Vue"
-        padding={{ base: '4px', medium: undefined }}
-      >
-        <VisuallyHidden>Vue</VisuallyHidden>
-        <Image
-          alt=""
-          height={{ base: '1.5rem', medium: '1rem' }}
-          display="block"
-          src="/svg/integrations/vue.svg"
-        />
-      </ToggleButton>
-      <ToggleButton
-        value="flutter"
-        size="small"
-        title="Flutter"
-        padding={{ base: '4px', medium: undefined }}
-      >
-        <VisuallyHidden>Flutter</VisuallyHidden>
-        <Image
-          alt=""
-          height={{ base: '1.5rem', medium: '1rem' }}
-          display="block"
-          src="/svg/integrations/flutter.svg"
-        />
-      </ToggleButton>
+      {FRAMEWORKS.map((framework) => (
+        <ToggleButton
+          key={framework}
+          value={framework}
+          size="small"
+          title={framework}
+          padding={{ base: '4px', medium: undefined }}
+        >
+          <VisuallyHidden>{framework}</VisuallyHidden>
+          <Image
+            alt=""
+            height={{ base: '1.5rem', medium: '1rem' }}
+            display="block"
+            src={`/svg/integrations/${framework}.svg`}
+          />
+        </ToggleButton>
+      ))}
     </ToggleButtonGroup>
   );
 };

docs/src/pages/[platform]/index.page.tsx

@@ -28,6 +28,7 @@ import type { SandpackThemeProp } from '@codesandbox/sandpack-react';
 import { theme } from '../../theme';
 import { ThemeButton } from '../ThemeButton';
 import { useCustomRouter } from '@/components/useCustomRouter';
+import { FRAMEWORKS } from '@/data/frameworks';
 
 const code = `import { AmplifyProvider, Button, Card, Text, Heading, Flex, Badge, Image, StepperField, useTheme } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
@@ -202,26 +203,14 @@ const HomePage = ({ colorMode }) => {
               flex="1"
               display={{ base: 'none', large: 'initial' }}
             >
-              <Image
-                alt="React logo"
-                className="docs-home-react"
-                src="/svg/integrations/react.svg"
-              />
-              <Image
-                alt="Angular logo"
-                className="docs-home-angular"
-                src="/svg/integrations/angular.svg"
-              />
-              <Image
-                alt="Vue logo"
-                className="docs-home-vue"
-                src="/svg/integrations/vue.svg"
-              />
-              <Image
-                alt="Flutter logo"
-                className="docs-home-flutter"
-                src="/svg/integrations/flutter.svg"
-              />
+              {FRAMEWORKS.map((framework) => (
+                <Image
+                  key={framework}
+                  alt={`${framework} logo`}
+                  className={`docs-home-${framework}`}
+                  src={`/svg/integrations/${framework}.svg`}
+                />
+              ))}
             </Flex>
           </Flex>
         </View>