From df6679bbe3152e8ae28d5f3e8b33a0521c453fab Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Thu, 9 Jan 2025 23:42:37 +0800
Subject: [PATCH] :lipstick: Optimize card of product

---
 src/pages/console/index.tsx        |  2 +-
 src/pages/console/matrix/index.tsx | 38 +++++++++++++++++++-----------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/pages/console/index.tsx b/src/pages/console/index.tsx
index 1ef9c78..17713f4 100644
--- a/src/pages/console/index.tsx
+++ b/src/pages/console/index.tsx
@@ -26,7 +26,7 @@ export default function ConsoleLanding() {
           <Typography variant="subtitle1">of the Solar Network</Typography>
         </Box>
 
-        <Grid container columns={{ xs: 2, sm: 2, md: 3, lg: 4 }} spacing={4}>
+        <Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
           <Grid size={1}>
             <NextLink passHref href="/console/matrix">
               <CardActionArea>
diff --git a/src/pages/console/matrix/index.tsx b/src/pages/console/matrix/index.tsx
index 4a37dcf..6b9a861 100644
--- a/src/pages/console/matrix/index.tsx
+++ b/src/pages/console/matrix/index.tsx
@@ -1,7 +1,17 @@
 import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout'
 import { MaProduct } from '@/services/matrix/product'
 import { sni } from '@/services/network'
-import { Typography, Container, Box, Button, Grid2 as Grid, Card, CardActionArea, CardContent } from '@mui/material'
+import {
+  Typography,
+  Container,
+  Box,
+  Button,
+  Grid2 as Grid,
+  Card,
+  CardActionArea,
+  CardContent,
+  CardActions,
+} from '@mui/material'
 import NextLink from 'next/link'
 import { useEffect, useState } from 'react'
 
@@ -36,21 +46,21 @@ export default function MatrixMarketplace() {
           Matrix Marketplace
         </Typography>
 
-        <Grid container columns={{ xs: 2, sm: 2, md: 3, lg: 4 }} spacing={4}>
+        <Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
           {products.map((p) => (
             <Grid size={1} key={p.id}>
-              <NextLink passHref href="/console/matrix">
-                <CardActionArea>
-                  <Card sx={{ width: '100%' }}>
-                    <CardContent>
-                      <Typography variant="h5" gutterBottom>
-                        {p.name}
-                      </Typography>
-                      <Typography variant="body1">{p.description}</Typography>
-                    </CardContent>
-                  </Card>
-                </CardActionArea>
-              </NextLink>
+              <Card sx={{ width: '100%' }}>
+                <CardContent>
+                  <Typography variant="h5" gutterBottom>
+                    {p.name}
+                  </Typography>
+                  <Typography variant="body1">{p.description}</Typography>
+                </CardContent>
+                <CardActions>
+                  <Button size="small">Details</Button>
+                  <Button size="small">Edit</Button>
+                </CardActions>
+              </Card>
             </Grid>
           ))}
         </Grid>