feat: implement ThemeProvider and SoundCard components; add utility functions for formatting duration and size

src/components/ThemeProvider.tsx

@@ -1,6 +1,5 @@
-import { createContext, useContext, useEffect, useState } from 'react'
-
-type Theme = 'dark' | 'light' | 'system'
+import { useEffect, useState } from 'react'
+import { ThemeProviderContext, type Theme } from '@/contexts/ThemeContext'
 
 type ThemeProviderProps = {
   children: React.ReactNode
@@ -8,22 +7,10 @@ type ThemeProviderProps = {
   storageKey?: string
 }
 
-type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-}
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
-
 export function ThemeProvider({
   children,
   defaultTheme = 'system',
-  storageKey = 'vite-ui-theme',
+  storageKey = 'theme',
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
@@ -62,12 +49,3 @@ export function ThemeProvider({
     </ThemeProviderContext.Provider>
   )
 }
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext)
-
-  if (context === undefined)
-    throw new Error('useTheme must be used within a ThemeProvider')
-
-  return context
-}