Make feature group item alternate reversed

Author: Folyd

theme/components/Landingpage/features.json

@@ -1,17 +1,88 @@
 {
-  "features": [
+  "ai": [
     {
-      "title": "AI Native",
+      "title": "Prompt",
       "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
       "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
       "filename": "main.ai"
     },
     {
-      "title": "Type Safe",
+      "title": "AI Function",
       "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
       "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
-      "filename": "main.ai",
-      "isReversed": true
+      "filename": "main.ai"
+    },
+    {
+      "title": "Agent",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    }
+  ],
+  "web": [
+    {
+      "title": "Route DSL",
+      "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Validator",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "OpenAPI",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Effortless Social Login",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    }
+  ],
+  "language": [
+    {
+      "title": "Enum",
+      "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Pipe Operator",
+      "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Error handling",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    }
+  ],
+  "std-library": [
+    {
+      "title": "Database",
+      "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Redis",
+      "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Builtin functions",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
     }
   ]
 }

theme/components/Landingpage/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.scss';
 
 import { useCallback } from 'react';
 import { useNavigate } from 'rspress/runtime';
-import { features } from './features.json';
+import featureData from './features.json';
 
 const LandingPage = () => {
     const navigate = useNavigate();
@@ -23,7 +23,15 @@ const LandingPage = () => {
                 githubURL="https://github.com/aiscriptdev/aiscript"
                 onClickGetStarted={onClickGetStarted}
             />
-            <FeatureGroup features={features} />
+            {
+                Object.entries(featureData).map(([key, features], index) => {
+                    const featureList = features.map((feature) => ({
+                        ...feature,
+                        isReversed: index % 2 === 0,
+                    }));
+                    return <FeatureGroup key={key} features={featureList} />;
+                })
+            }
         </div>
     );
 };

theme/components/feature-group/index.tsx

@@ -16,7 +16,7 @@ interface FeatureGroupProps {
 
 const FeatureGroup: FC<FeatureGroupProps> = ({ features }) => {
   const [activeIndex, setActiveIndex] = useState(0);
-
+  const feature = features[activeIndex];
   return (
     <div className={styles.featureGroup}>
       <div className={styles.tabs}>
@@ -31,11 +31,11 @@ const FeatureGroup: FC<FeatureGroupProps> = ({ features }) => {
         ))}
       </div>
       <FeatureDemo
-        title={features[activeIndex].title}
-        description={features[activeIndex].description}
-        code={features[activeIndex].code}
-        filename={features[activeIndex].filename}
-        isReversed={features[activeIndex].isReversed}
+        title={feature.title}
+        description={feature.description}
+        code={feature.code}
+        filename={feature.filename}
+        isReversed={feature.isReversed}
       />
     </div>
   );