add MdproDeckBlock

src/api/mdproDeck/schema.ts

@@ -17,4 +17,5 @@ export interface MdproDeck {
   deckUpdateDate?: string;
   /* Content of the deck. */
   deckYdk: string;
+  deckCase: number;
 }

src/ui/BuildDeck/DeckDatabase/DeckResults/index.module.scss

 .container {
+  width: 100%;
+}
+
+.search-decks {
+  --deck-width: 10rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--deck-width), 1fr));
+  padding: 0.75rem;
+  gap: 0.625rem;
+}
+
+.mdpro-deck {
+  img {
+      width: 6rem;
+  }
 }
 
 .empty {

src/ui/BuildDeck/DeckDatabase/DeckResults/index.tsx

 import { message, Pagination } from "antd";
 import React, { memo, useEffect } from "react";
-import { proxy, useSnapshot } from "valtio";
+import { type INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
 
 import { pullDecks } from "@/api";
 import { MdproDeck } from "@/api/mdproDeck/schema";
+import { useConfig } from "@/config";
 import { IconFont } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 
+const { assetsPath } = useConfig();
+
 interface Props {
   query: string;
   page: number;
@@ -16,7 +19,7 @@ interface Props {
 }
 
 // TODO: useConfig
-const PAGE_SIZE = 20;
+const PAGE_SIZE = 30;
 const SORT_LIKE = true;
 
 const store = proxy<Props>({ query: "", page: 1, decks: [], total: 0 });
@@ -53,8 +56,6 @@ export const DeckResults: React.FC = memo(() => {
       sortLike: SORT_LIKE,
     });
 
-    console.log(resp);
-
     if (resp?.data) {
       const { current, total, records } = resp.data;
       store.page = current;
@@ -69,6 +70,11 @@ export const DeckResults: React.FC = memo(() => {
     <>
       {snap.decks.length ? (
         <div className={styles.container}>
+          <div className={styles["search-decks"]}>
+            {snap.decks.map((deck) => (
+              <MdproDeckBlock key={deck.deckId} {...deck} />
+            ))}
+          </div>
           <div style={{ textAlign: "center", padding: "0.625rem 0 1.25rem" }}>
             <Pagination
               current={snap.page}
@@ -90,4 +96,14 @@ export const DeckResults: React.FC = memo(() => {
   );
 });
 
+const MdproDeckBlock: React.FC<Snapshot<MdproDeck>> = (deck) => (
+  <div className={styles["mdpro-deck"]}>
+    <img
+      src={`${assetsPath}/deck-cases/DeckCase${deck.deckCase
+        .toString()
+        .slice(-4)}_L.png`}
+    />
+  </div>
+);
+
 export const freshMdrpoDecks = (query: string) => (store.query = query);