💄 Optimize card of product

This commit is contained in:
LittleSheep 2025-01-09 23:42:37 +08:00
parent 945bd5d357
commit df6679bbe3
2 changed files with 25 additions and 15 deletions

View File

@ -26,7 +26,7 @@ export default function ConsoleLanding() {
<Typography variant="subtitle1">of the Solar Network</Typography> <Typography variant="subtitle1">of the Solar Network</Typography>
</Box> </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}> <Grid size={1}>
<NextLink passHref href="/console/matrix"> <NextLink passHref href="/console/matrix">
<CardActionArea> <CardActionArea>

View File

@ -1,7 +1,17 @@
import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout' import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout'
import { MaProduct } from '@/services/matrix/product' import { MaProduct } from '@/services/matrix/product'
import { sni } from '@/services/network' 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 NextLink from 'next/link'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
@ -36,11 +46,9 @@ export default function MatrixMarketplace() {
Matrix Marketplace Matrix Marketplace
</Typography> </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) => ( {products.map((p) => (
<Grid size={1} key={p.id}> <Grid size={1} key={p.id}>
<NextLink passHref href="/console/matrix">
<CardActionArea>
<Card sx={{ width: '100%' }}> <Card sx={{ width: '100%' }}>
<CardContent> <CardContent>
<Typography variant="h5" gutterBottom> <Typography variant="h5" gutterBottom>
@ -48,9 +56,11 @@ export default function MatrixMarketplace() {
</Typography> </Typography>
<Typography variant="body1">{p.description}</Typography> <Typography variant="body1">{p.description}</Typography>
</CardContent> </CardContent>
<CardActions>
<Button size="small">Details</Button>
<Button size="small">Edit</Button>
</CardActions>
</Card> </Card>
</CardActionArea>
</NextLink>
</Grid> </Grid>
))} ))}
</Grid> </Grid>