fix: examples

src/components/ToolHeader.tsx

@@ -26,7 +26,7 @@ function ToolLinks() {
 
   return (
     <Grid container spacing={2} mt={1}>
-      <Grid item md={12} lg={4}>
+      <Grid item md={12} lg={6}>
         <StyledButton
           sx={{ backgroundColor: 'white' }}
           fullWidth
@@ -36,16 +36,16 @@ function ToolLinks() {
           Use This Tool
         </StyledButton>
       </Grid>
-      <Grid item md={12} lg={4}>
+      <Grid item md={12} lg={6}>
         <StyledButton fullWidth variant="outlined" href="#examples">
           See Examples
         </StyledButton>
       </Grid>
-      <Grid item md={12} lg={4}>
-        <StyledButton fullWidth variant="outlined" href="#tour">
-          Learn How to Use
-        </StyledButton>
-      </Grid>
+      {/*<Grid item md={12} lg={4}>*/}
+      {/*  <StyledButton fullWidth variant="outlined" href="#tour">*/}
+      {/*    Learn How to Use*/}
+      {/*  </StyledButton>*/}
+      {/*</Grid>*/}
     </Grid>
   );
 }

src/components/examples/ToolExamples.tsx

@@ -2,30 +2,44 @@ import { Box, Grid, Stack, Typography } from '@mui/material';
 import ExampleCard, { ExampleCardProps } from './ExampleCard';
 import React from 'react';
 import { GetGroupsType } from '@components/options/ToolOptions';
+import { FormikProps } from 'formik';
 
-interface ExampleProps<T> {
+export type CardExampleType<T> = Omit<
+  ExampleCardProps<T>,
+  'getGroups' | 'changeInputResult'
+>;
+
+export interface ExampleProps<T> {
   title: string;
-  subtitle: string;
-  exampleCards: Omit<ExampleCardProps<T>, 'getGroups' | 'changeInputResult'>[];
+  subtitle?: string;
+  exampleCards: CardExampleType<T>[];
   getGroups: GetGroupsType<T>;
-  changeInputResult: (newOptions: T) => void;
+  formRef: React.RefObject<FormikProps<T>>;
 }
 
-export default function Examples<T>({
+export default function ToolExamples<T>({
   title,
   subtitle,
   exampleCards,
   getGroups,
-  changeInputResult
+  formRef
 }: ExampleProps<T>) {
+  function changeInputResult(newOptions: T) {
+    formRef.current?.setValues(newOptions);
+    const toolsElement = document.getElementById('tool');
+    if (toolsElement) {
+      toolsElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   return (
     <Box id={'examples'} mt={4}>
       <Box mt={4} display="flex" gap={1} alignItems="center">
         <Typography mb={2} fontSize={30} color={'primary'}>
-          {title}
+          {`${title} Examples`}
         </Typography>
         <Typography mb={2} fontSize={30} color={'secondary'}>
-          {subtitle}
+          {subtitle ?? 'Click to try!'}
         </Typography>
       </Box>