Fix the textfield exampls

src/components/allTools/AllTools.tsx

@@ -20,8 +20,8 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
       </Typography>
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         <Grid container spacing={2}>
-          {toolCards.map((card) => (
-            <Grid item xs={4} key={card.title}>
+          {toolCards.map((card, index) => (
+            <Grid item xs={4} key={index}>
               <ToolCard
                 title={card.title}
                 description={card.description}

src/components/examples/ExampleCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExampleCardProps } from './Examples';
 import {
   Box,
@@ -16,16 +15,9 @@ export default function ExampleCard({
   description,
   sampleText,
   sampleResult,
-  requiredOptions
+  requiredOptions,
+  changeInputResult
 }: ExampleCardProps) {
-  const handleSampleTextClick = () => {
-    console.log('TextField clicked');
-  };
-
-  const handleSampleResultClick = () => {
-    console.log('TextField clicked');
-  };
-
   return (
     <Card
       raised
@@ -52,7 +44,7 @@ export default function ExampleCard({
           </Typography>
 
           <Box
-            onClick={handleSampleTextClick}
+            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -83,7 +75,7 @@ export default function ExampleCard({
 
           <ArrowDownwardIcon />
           <Box
-            onClick={handleSampleResultClick}
+            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',

src/components/examples/Examples.tsx

@@ -7,6 +7,7 @@ export interface ExampleCardProps {
   sampleText: string;
   sampleResult: string;
   requiredOptions: RequiredOptionsProps;
+  changeInputResult: (input: string, result: string) => void;
 }
 
 export interface RequiredOptionsProps {
@@ -39,14 +40,15 @@ export default function Examples({
 
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         <Grid container spacing={2}>
-          {exampleCards.map((card) => (
-            <Grid item xs={4} key={card.title}>
+          {exampleCards.map((card, index) => (
+            <Grid item xs={4} key={index}>
               <ExampleCard
                 title={card.title}
                 description={card.description}
                 sampleText={card.sampleText}
                 sampleResult={card.sampleResult}
                 requiredOptions={card.requiredOptions}
+                changeInputResult={card.changeInputResult}
               />
             </Grid>
           ))}

src/components/examples/RequiredOptions.tsx

@@ -14,7 +14,6 @@ export default function RequiredOptions({
     if (toolsElement) {
       toolsElement.scrollIntoView({ behavior: 'smooth' });
     }
-    console.log('tool clicked');
   };
 
   return (

src/components/options/CheckboxWithDesc.tsx

@@ -23,7 +23,6 @@ const CheckboxWithDesc = ({
       <FormControlLabel
         control={
           <Checkbox
-            defaultChecked
             checked={checked}
             onChange={handleChange}
             disabled={disabled}