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
-}

src/components/sounds/SoundCard.tsx

@@ -0,0 +1,47 @@
+import { Card, CardContent } from '@/components/ui/card'
+import { Play, Clock, Weight } from 'lucide-react'
+import { type Sound } from '@/lib/api/services/sounds'
+import { cn } from '@/lib/utils'
+import { formatDuration } from '@/utils/format-duration'
+import { formatSize } from '@/utils/format-size'
+import NumberFlow from '@number-flow/react'
+
+interface SoundCardProps {
+  sound: Sound
+  playSound: (sound: Sound) => void
+  colorClasses: string
+}
+
+export function SoundCard({ sound, playSound, colorClasses }: SoundCardProps) {
+  const handlePlaySound = () => {
+    playSound(sound)
+  }
+
+  return (
+    <Card
+      onClick={handlePlaySound}
+      className={cn(
+        'py-2 transition-all duration-100 shadow-sm cursor-pointer active:scale-95',
+        colorClasses,
+      )}
+    >
+      <CardContent className="grid grid-cols-1 pl-3 pr-3 gap-1">
+        <h3 className="font-medium text-s truncate">{sound.name}</h3>
+        <div className="grid grid-cols-3 gap-1 text-xs text-muted-foreground">
+          <div className="flex">
+            <Clock className="h-3.5 w-3.5 mr-0.5" />
+            <span>{formatDuration(sound.duration)}</span>
+          </div>
+          <div className="flex justify-center">
+            <Weight className="h-3.5 w-3.5 mr-0.5" />
+            <span>{formatSize(sound.size)}</span>
+          </div>
+          <div className="flex justify-end items-center">
+            <Play className="h-3.5 w-3.5 mr-0.5" />
+            <NumberFlow value={sound.play_count} />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}