refact: examples

src/components/examples/ExampleCard.tsx

@@ -1,4 +1,3 @@
-import { ExampleCardProps } from './Examples';
 import {
   Box,
   Card,
@@ -9,14 +8,25 @@ import {
   useTheme
 } from '@mui/material';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import RequiredOptions from './RequiredOptions';
+import ExampleOptions from './ExampleOptions';
+import { GetGroupsType } from '@components/options/ToolOptions';
+
+export interface ExampleCardProps<T> {
+  title: string;
+  description: string;
+  sampleText: string;
+  sampleResult: string;
+  sampleOptions: T;
+  changeInputResult: (newOptions: T) => void;
+  getGroups: GetGroupsType<T>;
+}
 
 export default function ExampleCard<T>({
   title,
   description,
   sampleText,
   sampleResult,
-  requiredOptions,
+  sampleOptions,
   changeInputResult,
   getGroups
 }: ExampleCardProps<T>) {
@@ -25,7 +35,7 @@ export default function ExampleCard<T>({
     <Card
       raised
       onClick={() => {
-        changeInputResult(sampleText, sampleResult);
+        changeInputResult(sampleOptions);
       }}
       sx={{
         bgcolor: theme.palette.background.default,
@@ -108,7 +118,7 @@ export default function ExampleCard<T>({
             />
           </Box>
 
-          <RequiredOptions options={requiredOptions} getGroups={getGroups} />
+          <ExampleOptions options={sampleOptions} getGroups={getGroups} />
         </Stack>
       </CardContent>
     </Card>

src/components/examples/ExampleOptions.tsx

@@ -2,12 +2,18 @@ import ToolOptionGroups from '@components/options/ToolOptionGroups';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import React from 'react';
 
-export default function RequiredOptions<T>({
+export default function ExampleOptions<T>({
   options,
   getGroups
 }: {
   options: T;
   getGroups: GetGroupsType<T>;
 }) {
-  return <ToolOptionGroups groups={getGroups({ values: options })} />;
+  return (
+    <ToolOptionGroups
+      // @ts-ignore
+      groups={getGroups({ values: options })}
+      vertical
+    />
+  );
 }

src/components/examples/Examples.tsx

@@ -1,24 +1,14 @@
 import { Box, Grid, Stack, Typography } from '@mui/material';
-import ExampleCard from './ExampleCard';
+import ExampleCard, { ExampleCardProps } from './ExampleCard';
 import React from 'react';
 import { GetGroupsType } from '@components/options/ToolOptions';
 
-export interface ExampleCardProps<T> {
-  title: string;
-  description: string;
-  sampleText: string;
-  sampleResult: string;
-  requiredOptions: T;
-  changeInputResult: (input: string, result: string) => void;
-  getGroups: GetGroupsType<T>;
-}
-
 interface ExampleProps<T> {
   title: string;
   subtitle: string;
-  exampleCards: ExampleCardProps<T>[];
+  exampleCards: Omit<ExampleCardProps<T>, 'getGroups' | 'changeInputResult'>[];
   getGroups: GetGroupsType<T>;
-  changeInputResult: (input: string, result: string) => void;
+  changeInputResult: (newOptions: T) => void;
 }
 
 export default function Examples<T>({
@@ -48,7 +38,7 @@ export default function Examples<T>({
                 description={card.description}
                 sampleText={card.sampleText}
                 sampleResult={card.sampleResult}
-                requiredOptions={card.requiredOptions}
+                sampleOptions={card.sampleOptions}
                 getGroups={getGroups}
                 changeInputResult={changeInputResult}
               />

src/components/options/ToolOptionGroups.tsx

@@ -8,14 +8,16 @@ export interface ToolOptionGroup {
 }
 
 export default function ToolOptionGroups({
-  groups
+  groups,
+  vertical
 }: {
   groups: ToolOptionGroup[];
+  vertical?: boolean;
 }) {
   return (
     <Grid container spacing={2}>
       {groups.map((group) => (
-        <Grid item xs={12} md={4} key={group.title}>
+        <Grid item xs={12} md={vertical ? 12 : 4} key={group.title}>
           <Typography mb={1} fontSize={22}>
             {group.title}
           </Typography>