chore: show tooloptions in example

src/components/examples/ExampleCard.tsx

@@ -11,24 +11,29 @@ import {
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import RequiredOptions from './RequiredOptions';
 
-export default function ExampleCard({
+export default function ExampleCard<T>({
   title,
   description,
   sampleText,
   sampleResult,
   requiredOptions,
-  changeInputResult
-}: ExampleCardProps) {
+  changeInputResult,
+  getGroups
+}: ExampleCardProps<T>) {
   const theme = useTheme();
   return (
     <Card
       raised
+      onClick={() => {
+        changeInputResult(sampleText, sampleResult);
+      }}
       sx={{
         bgcolor: theme.palette.background.default,
         height: '100%',
         overflow: 'hidden',
         borderRadius: 2,
         transition: 'background-color 0.3s ease',
+        cursor: 'pointer',
         '&:hover': {
           boxShadow: '12px 9px 11px 2px #b8b9be, -6px -6px 12px #fff'
         }
@@ -46,7 +51,6 @@ export default function ExampleCard({
           </Typography>
 
           <Box
-            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -55,7 +59,6 @@ export default function ExampleCard({
               bgcolor: 'transparent',
               padding: '5px 10px',
               borderRadius: '5px',
-              cursor: 'pointer',
               boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
             }}
           >
@@ -77,7 +80,6 @@ export default function ExampleCard({
 
           <ArrowDownwardIcon />
           <Box
-            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -106,7 +108,7 @@ export default function ExampleCard({
             />
           </Box>
 
-          <RequiredOptions options={requiredOptions} />
+          <RequiredOptions options={requiredOptions} getGroups={getGroups} />
         </Stack>
       </CardContent>
     </Card>