restructure files onto electron-vite boilerplate

src/renderer/components/virtual-grid/grid-card/default-card.tsx

@@ -1,14 +1,15 @@
 import { Center, Stack } from '@mantine/core';
-import { RiAlbumFill, RiUserVoiceFill, RiPlayListFill } from 'react-icons/ri';
+import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
 import { generatePath, useNavigate } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
+
 import { Album, AlbumArtist, Artist, LibraryItem, Playlist, Song } from '/@/renderer/api/types';
 import { CardRows } from '/@/renderer/components/card';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
-import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types';
+import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
 
 interface BaseGridCardProps {
     columnIndex: number;
@@ -131,11 +132,11 @@ const DetailContainer = styled.div`
 `;
 
 export const DefaultCard = ({
-    listChildProps,
-    data,
     columnIndex,
     controls,
+    data,
     isHidden,
+    listChildProps,
 }: BaseGridCardProps) => {
     const navigate = useNavigate();
 
@@ -156,10 +157,10 @@ export const DefaultCard = ({
             case LibraryItem.ALBUM:
                 Placeholder = RiAlbumFill;
                 break;
-            case LibraryItem.ARTIST:
+            case LibraryItem.ALBUM_ARTIST:
                 Placeholder = RiUserVoiceFill;
                 break;
-            case LibraryItem.ALBUM_ARTIST:
+            case LibraryItem.ARTIST:
                 Placeholder = RiUserVoiceFill;
                 break;
             case LibraryItem.PLAYLIST:
@@ -172,8 +173,8 @@ export const DefaultCard = ({
 
         return (
             <DefaultCardContainer
-                key={`card-${columnIndex}-${listChildProps.index}`}
                 $itemGap={controls.itemGap}
+                key={`card-${columnIndex}-${listChildProps.index}`}
                 onClick={() => navigate(path)}
             >
                 <InnerCardContainer>
@@ -221,25 +222,25 @@ export const DefaultCard = ({
 
     return (
         <DefaultCardContainer
-            key={`card-${columnIndex}-${listChildProps.index}`}
             $isHidden={isHidden}
             $itemGap={controls.itemGap}
+            key={`card-${columnIndex}-${listChildProps.index}`}
         >
             <InnerCardContainer>
                 <ImageContainer>
                     <Skeleton
-                        visible
                         radius="sm"
+                        visible
                     />
                 </ImageContainer>
                 <DetailContainer>
                     <Stack spacing="sm">
                         {(controls?.cardRows || []).map((row, index) => (
                             <Skeleton
-                                key={`${index}-${columnIndex}-${row.arrayProperty}`}
-                                visible
                                 height={14}
+                                key={`${index}-${columnIndex}-${row.arrayProperty}`}
                                 radius="sm"
+                                visible
                             />
                         ))}
                     </Stack>