refactor ui component

src/components/MusicCard.tsx → src/components/ui/MusicCard.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable prettier/prettier */
 import { invoke } from "@tauri-apps/api/tauri"
 import Image from "next/image"
-import { lazy } from "react"
 
 import { appContext } from "@/components/AppContext"
 import { MusicCardInfo } from "@/components/contexts_menu/MusicCardInfo"
@@ -16,20 +15,10 @@ import {
 } from "@/components/ui/context-menu"
 import { b64imageWrap, format_duration } from "@/lib/utils"
 
-import CPlaylistSub from "./contexts_menu/CPlaylistSub"
+import CPlaylistSub from "../contexts_menu/CPlaylistSub"
 
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function delayForDemo(promise: any) {
-    return new Promise(resolve => {
-        setTimeout(resolve, 100);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return
-    }).then(() => promise);
-}
-
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-return
-export const MusicCardWrap = lazy(() => delayForDemo(import("./MusicCard")))
 
 export default function MusicCard({
     audio,

src/components/MusicsGrid.tsx → src/components/ui/MusicsGrid.tsx

@@ -2,10 +2,10 @@
 import Flicking from "@egjs/react-flicking"
 import { useContext, useRef } from "react"
 
-import MusicCard from "@/components/MusicCard"
 import { Audio } from "@/components/types/audio"
+import MusicCard from "@/components/ui/MusicCard"
 
-import { AppContext } from "./AppContext"
+import { AppContext } from "../AppContext"
 import { CarouselControls } from "./CarouselControls"
 
 const itemsPerCol = 3

src/components/PlaylistCarousel.tsx → src/components/ui/PlaylistCarousel.tsx

@@ -8,8 +8,8 @@ import { useRef } from "react"
 
 import { b64imageWrap } from "@/lib/utils"
 
+import { Playlist } from "../types/playlist"
 import { CarouselControls } from "./CarouselControls"
-import { Playlist } from "./types/playlist"
 
 export const PlaylistCarousel = ({
   playlists,
@@ -79,8 +79,8 @@ export function PlaylistCard({
         src={b64imageWrap(playlist.cover)}
         //style={{ filter: "hue-rotate(100deg)" }}
         className={`aspect-square rounded-lg ${playlist.cover.length === 0
-            ? "dark:invert dark:relative mix-blend-mode-overlay"
-            : ""
+          ? "dark:invert dark:relative mix-blend-mode-overlay"
+          : ""
           }`}
         height={208}
         width={208}

src/pages/index.tsx

@@ -5,9 +5,9 @@ import { useEffect, useState } from "react"
 import { useContext } from "react"
 
 import { AppContext } from "@/components/AppContext"
-import { MusicsGrid } from "@/components/MusicsGrid"
-import { PlaylistCarousel } from "@/components/PlaylistCarousel"
 import { Audio } from "@/components/types/audio"
+import { MusicsGrid } from "@/components/ui/MusicsGrid"
+import { PlaylistCarousel } from "@/components/ui/PlaylistCarousel"
 
 const Home: NextPage = () => {
   const [history, setHistory] = useState<Audio[]>([])

src/pages/music.tsx

@@ -12,9 +12,9 @@ import {
   fetchPlaylistCheckedState,
   setAudiosFromPlaylist,
 } from "@/components/contexts_menu/CPlaylistSub"
-import MusicCard from "@/components/MusicCard"
 import { shuffle } from "@/components/player/Player"
 import { Button } from "@/components/ui/button"
+import MusicCard from "@/components/ui/MusicCard"
 import { b64imageWrap, cn, isObjectEmpty } from "@/lib/utils"
 
 export default function Music({ name }: { name: string }) {