From dd035d04a01a00a02570b3b51de7cacea30591fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=A0=91=E4=BA=BA?= <lu.shuren@um-react.app>
Date: Sun, 21 May 2023 15:38:07 +0100
Subject: [PATCH] chore: move file row's grid layout to its own file

---
 src/features/file-listing/FileRow.tsx         | 32 +++----------------
 .../file-listing/FileRowResponsiveGrid.tsx    | 27 ++++++++++++++++
 2 files changed, 32 insertions(+), 27 deletions(-)
 create mode 100644 src/features/file-listing/FileRowResponsiveGrid.tsx

diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx
index 9b2be79..7e4fe72 100644
--- a/src/features/file-listing/FileRow.tsx
+++ b/src/features/file-listing/FileRow.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import {
   Box,
   Button,
@@ -5,7 +6,6 @@ import {
   CardBody,
   Center,
   Collapse,
-  Grid,
   GridItem,
   Image,
   Link,
@@ -15,8 +15,8 @@ import {
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
+import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
 import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
-import { useCallback, useRef } from 'react';
 import { useAppDispatch } from '~/hooks';
 import noCoverFallbackImageURL from '~/assets/no-cover.svg';
 
@@ -59,29 +59,7 @@ export function FileRow({ id, file }: FileRowProps) {
     <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%', padding: '0.25rem' }}>
       <Card w="full" data-testid="file-row">
         <CardBody>
-          <Grid
-            templateAreas={{
-              base: `
-              "cover"
-              "title"
-              "meta"
-              "action"
-            `,
-              md: `
-              "cover title title"
-              "cover meta  action"
-            `,
-            }}
-            gridTemplateRows={{
-              base: 'repeat(auto-fill)',
-              md: 'min-content 1fr',
-            }}
-            gridTemplateColumns={{
-              base: '1fr',
-              md: '160px 1fr',
-            }}
-            gap="1"
-          >
+          <FileRowResponsiveGrid>
             <GridItem area="cover">
               <Center w="160px" h="160px" m="auto">
                 <Image
@@ -111,7 +89,7 @@ export function FileRow({ id, file }: FileRowProps) {
                 </Box>
               )}
             </GridItem>
-            <GridItem area="action">
+            <GridItem area="action" alignSelf="center">
               <VStack>
                 {file.decrypted && <audio controls autoPlay={false} src={file.decrypted} ref={audioPlayerRef} />}
 
@@ -138,7 +116,7 @@ export function FileRow({ id, file }: FileRowProps) {
                 </Wrap>
               </VStack>
             </GridItem>
-          </Grid>
+          </FileRowResponsiveGrid>
         </CardBody>
       </Card>
     </Collapse>
diff --git a/src/features/file-listing/FileRowResponsiveGrid.tsx b/src/features/file-listing/FileRowResponsiveGrid.tsx
new file mode 100644
index 0000000..24e2783
--- /dev/null
+++ b/src/features/file-listing/FileRowResponsiveGrid.tsx
@@ -0,0 +1,27 @@
+import { Grid, chakra } from '@chakra-ui/react';
+
+export const FileRowResponsiveGrid = chakra(Grid, {
+  baseStyle: {
+    gridTemplateAreas: {
+      base: `
+        "cover"
+        "title"
+        "meta"
+        "action"
+      `,
+      md: `
+        "cover title action"
+        "cover meta  action"
+      `,
+    },
+    gridTemplateRows: {
+      base: 'repeat(auto-fill)',
+      md: 'min-content 1fr',
+    },
+    gridTemplateColumns: {
+      base: '1fr',
+      md: '160px 1fr',
+    },
+    gap: 3,
+  },
+});