✨ Able to set product icon and previews

src/components/matrix/MaProductForm.tsx

@@ -1,6 +1,6 @@
 import { Collapse, Alert, TextField, Button, Box } from '@mui/material'
 import { useRouter } from 'next-nprogress-bar'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { MaProduct } from 'solar-js-sdk'
 
@@ -11,6 +11,9 @@ export interface MatrixProductForm {
   alias: string
   description: string
   introduction: string
+  icon: string
+  previews: string[]
+  tags: string[]
 }
 
 export default function MaProductForm({
@@ -28,11 +31,24 @@ export default function MaProductForm({
       alias: defaultValue?.alias ?? '',
       description: defaultValue?.description ?? '',
       introduction: defaultValue?.meta?.introduction ?? '',
+      icon: defaultValue?.icon ?? '',
     },
   })
 
   const router = useRouter()
 
+  const [previews, setPreviews] = useState<string[]>([])
+  const [tags, setTags] = useState<string[]>([])
+
+  useEffect(() => {
+    if (defaultValue?.previews) {
+      setPreviews(defaultValue.previews)
+    }
+    if (defaultValue?.tags) {
+      setTags(defaultValue.tags)
+    }
+  }, [])
+
   const [error, setError] = useState<string | null>(null)
   const [busy, setBusy] = useState<boolean>(false)
 
@@ -47,7 +63,11 @@ export default function MaProductForm({
   async function submit(data: MatrixProductForm) {
     try {
       setBusy(true)
-      await onSubmit(data)
+      await onSubmit({
+        ...data,
+        previews,
+        tags,
+      })
       callback()
     } catch (err: any) {
       setError(err.toString())
@@ -65,10 +85,26 @@ export default function MaProductForm({
           </Alert>
         </Collapse>
 
+        <TextField label="Icon" placeholder="Image URL or Attachment RID" {...register('icon')} />
+
+        <TextField
+          label="Previews"
+          placeholder="Comma separated, Image URL or Attachment RID, the first one will be used as the banner"
+          value={previews.join(',')}
+          onChange={(val) => setPreviews(val.target.value.split(',').map((v) => v.trim()))}
+        />
+
         <TextField label="Name" {...register('name')} />
 
         <TextField label="Alias" {...register('alias')} />
 
+        <TextField
+          label="Tags"
+          placeholder="Comma separated"
+          value={tags.join(',')}
+          onChange={(val) => setTags(val.target.value.split(',').map((v) => v.trim()))}
+        />
+
         <TextField minRows={3} maxRows={3} multiline label="Description" {...register('description')} />
 
         <TextField minRows={5} multiline label="Introduction" {...register('introduction')} />

src/pages/console/matrix/products/[id]/index.tsx

@@ -1,9 +1,10 @@
 import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout'
 import { Box, Button, Container, Typography, Grid2 as Grid, Card, CardContent, CardActions } from '@mui/material'
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
-import { sni, MaProduct, MaRelease } from 'solar-js-sdk'
+import { sni, MaProduct, MaRelease, getAttachmentUrl } from 'solar-js-sdk'
 import { useEffect, useState } from 'react'
 import NextLink from 'next/link'
+import Image from 'next/image'
 
 export const getServerSideProps: GetServerSideProps = (async (context) => {
   const id = context.params!.id
@@ -45,7 +46,17 @@ export default function ProductDetails({ product }: InferGetServerSidePropsType<
 
   return (
     <ConsoleLayout>
-      <Container sx={{ py: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <>
+        {product.previews && (
+          <img
+            src={getAttachmentUrl(product.previews[0])}
+            alt={product.name}
+            style={{ objectFit: 'cover', aspectRatio: 16 / 5 }}
+            className='border-b border-1'
+          />
+        )}
+
+        <Container sx={{ pt: (product.previews ? 8 : 16), pb: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
           <Box maxWidth="sm">
             <Typography variant="h3" component="h1">
               {product.name}
@@ -91,6 +102,7 @@ export default function ProductDetails({ product }: InferGetServerSidePropsType<
             </Grid>
           </Box>
         </Container>
+      </>
     </ConsoleLayout>
   )
 }