Merge pull request #26 from iib0011/examples

Examples
iib0011 · Feb 27, 2025 · f855d33 · f855d33
2 parents a03df0a + a713690
commit f855d33
Show file tree

Hide file tree

Showing 12 changed files with 364 additions and 330 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/src/components/ToolHeader.tsx b/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>
   );
 }

diff --git a/src/components/examples/ExampleCard.tsx b/src/components/examples/ExampleCard.tsx
@@ -1,4 +1,3 @@
-import { ExampleCardProps } from './Examples';
 import {
   Box,
   Card,
@@ -9,26 +8,42 @@ 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 default function ExampleCard({
+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,
-  changeInputResult
-}: ExampleCardProps) {
+  sampleOptions,
+  changeInputResult,
+  getGroups
+}: ExampleCardProps<T>) {
   const theme = useTheme();
   return (
     <Card
       raised
+      onClick={() => {
+        changeInputResult(sampleOptions);
+      }}
       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 +61,6 @@ export default function ExampleCard({
           </Typography>
 
           <Box
-            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -55,7 +69,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 +90,6 @@ export default function ExampleCard({
 
           <ArrowDownwardIcon />
           <Box
-            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -106,7 +118,7 @@ export default function ExampleCard({
             />
           </Box>
 
-          <RequiredOptions options={requiredOptions} />
+          <ExampleOptions options={sampleOptions} getGroups={getGroups} />
         </Stack>
       </CardContent>
     </Card>

diff --git a/src/components/examples/ExampleOptions.tsx b/src/components/examples/ExampleOptions.tsx
@@ -0,0 +1,19 @@
+import ToolOptionGroups from '@components/options/ToolOptionGroups';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import React from 'react';
+
+export default function ExampleOptions<T>({
+  options,
+  getGroups
+}: {
+  options: T;
+  getGroups: GetGroupsType<T>;
+}) {
+  return (
+    <ToolOptionGroups
+      // @ts-ignore
+      groups={getGroups({ values: options })}
+      vertical
+    />
+  );
+}
diff --git a/src/components/examples/Examples.tsx b/src/components/examples/Examples.tsx