https://song-slide-0f2881b6.base44.app/assets/BackgroundThumbnail-B0YjhgOZ.js

1const e=`import React, { useState, useEffect, useRef } from 'react';
2import { ImageOff } from 'lucide-react';
3
4export default function BackgroundThumbnail({ bgUrl, size = 'card', className = '' }) {
5  const hasBackground = bgUrl && bgUrl.trim() !== '';
6
7  const sizeStyles = {
8    card: { minHeight: '120px' },
9    list: { minHeight: '64px' },
10    set: { minHeight: '36px' }
11  };
12
13  const sizeClasses = {
14    card: 'w-full aspect-video mb-2 rounded-md overflow-hidden relative',
15    list: 'w-28 h-16 rounded-sm overflow-hidden relative flex-shrink-0',
16    set: 'w-16 h-9 rounded-sm overflow-hidden relative'
17  };
18
19  if (!hasBackground) {
20    return (
21      <div
22        className={\`\${sizeClasses[size]} bg-slate-800 flex items-center justify-center flex-col \${className}\`}
23        style={sizeStyles[size]}
24      >
25        <ImageOff className={\`text-slate-600 mb-1 \${size === 'card' ? 'w-6 h-6' : 'w-4 h-4'}\`} />
26        {size === 'card' && <span className="text-xs text-slate-500">No background</span>}
27      </div>
28    );
29  }
30
31  return (
32    <div
33      className={\`\${sizeClasses[size]} \${className}\`}
34      style={{
35        backgroundImage: \`url(\${bgUrl})\`,
36        backgroundSize: 'cover',
37        backgroundPosition: 'center',
38        backgroundRepeat: 'no-repeat',
39        backgroundColor: '#1e293b',
40        ...sizeStyles[size]
41      }}
42    >
43      {/* Overlay gradient for card view */}
44      {size === 'card' && (
45        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
46      )}
47      
48      {/* Yellow star badge */}
49      {size === 'card' && (
50        <div className="absolute top-1 right-1 bg-black/50 rounded-full p-0.5">
51          <span className="text-yellow-400 text-xs">⭐</span>
52        </div>
53      )}
54      {size === 'list' && hasBackground && (
55        <span className="absolute top-0.5 right-0.5 text-yellow-400 text-xs leading-none">⭐</span>
56      )}
57    </div>
58  );
59}`;export{e as default};