remove and rename

frontend/src/app/category-view/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Category, Script } from "@/lib/types";
+
+const CategoryView = () => {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await fetch("/json/metadata.json"); // JSON-Datei direkt laden
+        if (!response.ok) {
+          throw new Error("Failed to fetch categories");
+        }
+        const metadata = await response.json();
+        const categories = metadata.categories.map((category: Category) => {
+          category.scripts = metadata.scripts.filter((script: Script) =>
+            script.categories.includes(category.id)
+          );
+          return category;
+        });
+        setCategories(categories);
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+      }
+    };
+
+    fetchCategories();
+  }, []);
+
+  const handleCategoryClick = (category: Category) => {
+    setSelectedCategory(category);
+  };
+
+  const handleBackClick = () => {
+    setSelectedCategory(null);
+  };
+
+  return (
+    <div className="p-4">
+      {selectedCategory ? (
+        <div>
+          <Button variant="default" onClick={handleBackClick} className="mb-4">
+            Back to Categories
+          </Button>
+          <h2 className="text-xl font-semibold mb-4">{selectedCategory.name}</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {selectedCategory.scripts
+              .sort((a, b) => a.name.localeCompare(b.name))
+              .map((script: Script) => (
+                <Card key={script.name}>
+                  <CardContent>
+                    <h3 className="text-lg font-medium">{script.name}</h3>
+                    <p className="text-sm text-gray-600">
+                      {script.date_created || "No date available"}
+                    </p>
+                  </CardContent>
+                </Card>
+              ))}
+          </div>
+        </div>
+      ) : (
+        <div>
+          <h1 className="text-2xl font-bold mb-6">Categories</h1>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {categories.map((category) => (
+              <Card
+                key={category.name}
+                onClick={() => handleCategoryClick(category)}
+                className="cursor-pointer hover:shadow-lg"
+              >
+                <CardHeader title={category.name} className="text-lg font-semibold" />
+              </Card>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CategoryView;