diff --git a/src/features/file-listing/AlbumImage.tsx b/src/features/file-listing/AlbumImage.tsx new file mode 100644 index 0000000..22c8dd2 --- /dev/null +++ b/src/features/file-listing/AlbumImage.tsx @@ -0,0 +1,24 @@ +import { Box, Image } from '@chakra-ui/react'; +import noCoverFallbackImageURL from '~/assets/no-cover.svg'; + +interface AlbumImageProps { + url?: string; + name?: string; +} + +export function AlbumImage({ name, url }: AlbumImageProps) { + const coverAlternativeText = name ? `${name} 的专辑封面` : '专辑封面'; + + return ( + + {coverAlternativeText} + + ); +} diff --git a/src/features/file-listing/FileRow.tsx b/src/features/file-listing/FileRow.tsx index 1355185..c280c8c 100644 --- a/src/features/file-listing/FileRow.tsx +++ b/src/features/file-listing/FileRow.tsx @@ -4,10 +4,8 @@ import { Button, Card, CardBody, - Center, Collapse, GridItem, - Image, Link, Text, useDisclosure, @@ -19,7 +17,7 @@ import { FileRowResponsiveGrid } from './FileRowResponsiveGrid'; import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice'; import { useAppDispatch } from '~/hooks'; import { AnimationDefinition } from 'framer-motion'; -import noCoverFallbackImageURL from '~/assets/no-cover.svg'; +import { AlbumImage } from './AlbumImage'; interface FileRowProps { id: string; @@ -68,13 +66,7 @@ export function FileRow({ id, file }: FileRowProps) { -
- {`${metadata?.album} -
+