From c7a0009d9af861640ca1382f12b2490a7d620de8 Mon Sep 17 00:00:00 2001
From: CanbiZ <47820557+MickLesk@users.noreply.github.com>
Date: Thu, 23 Jan 2025 09:35:24 +0100
Subject: [PATCH] Update index.tsx

---
 frontend/src/app/category-view/index.tsx | 40 +++++++++++-------------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/category-view/index.tsx b/frontend/src/app/category-view/index.tsx
index 90c232c0..611c28a2 100644
--- a/frontend/src/app/category-view/index.tsx
+++ b/frontend/src/app/category-view/index.tsx
@@ -3,7 +3,6 @@
 import React, { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
-import { Grid } from "@mui/material";
 import { fetchCategories } from "@/lib/data";
 import { Category } from "@/lib/types";
 
@@ -33,40 +32,37 @@ const CategoryView = () => {
             Back to Categories
           </Button>
           <h2 className="text-xl font-semibold mb-4">{selectedCategory.name}</h2>
-          <Grid container spacing={3}>
+          <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) => (
-                <Grid item xs={12} sm={6} md={4} key={script.name}>
-                  <Card>
-                    <CardContent>
-                      <h3 className="text-lg font-medium">{script.name}</h3>
-                      <p className="text-sm text-gray-600">{script.date || "N/A"}</p>
-                    </CardContent>
-                  </Card>
-                </Grid>
+                <Card key={script.name}>
+                  <CardContent>
+                    <h3 className="text-lg font-medium">{script.name}</h3>
+                    <p className="text-sm text-gray-600">{script.date || "N/A"}</p>
+                  </CardContent>
+                </Card>
               ))}
-          </Grid>
+          </div>
         </div>
       ) : (
         <div>
           <h1 className="text-2xl font-bold mb-6">Categories</h1>
-          <Grid container spacing={3}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
             {categories.map((category) => (
-              <Grid item xs={12} sm={6} md={4} key={category.name}>
-                <Card
-                  onClick={() => handleCategoryClick(category)}
-                  className="cursor-pointer hover:shadow-lg"
-                >
-                  <CardHeader title={category.name} className="text-lg font-semibold" />
-                </Card>
-              </Grid>
+              <Card
+                key={category.name}
+                onClick={() => handleCategoryClick(category)}
+                className="cursor-pointer hover:shadow-lg"
+              >
+                <CardHeader title={category.name} className="text-lg font-semibold" />
+              </Card>
             ))}
-          </Grid>
+          </div>
         </div>
       )}
     </div>
   );
 };
 
-export default CategoryView;
+export default CategoryView;
\ No newline at end of file