alert修改
This commit is contained in:
mtvpls
+233
-208
@@ -5,6 +5,7 @@ import { AlertCircle, Copy, ExternalLink, Loader2, RefreshCw } from 'lucide-reac
|
|||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import Toast, { ToastProps } from '@/components/Toast';
|
||||||
import { PansouLink, PansouSearchResult } from '@/lib/pansou.client';
|
import { PansouLink, PansouSearchResult } from '@/lib/pansou.client';
|
||||||
|
|
||||||
interface PansouSearchProps {
|
interface PansouSearchProps {
|
||||||
@@ -60,6 +61,7 @@ export default function PansouSearch({
|
|||||||
const [selectedType, setSelectedType] = useState<string>('all'); // 'all' 表示显示全部
|
const [selectedType, setSelectedType] = useState<string>('all'); // 'all' 表示显示全部
|
||||||
const [transferingUrl, setTransferingUrl] = useState<string | null>(null);
|
const [transferingUrl, setTransferingUrl] = useState<string | null>(null);
|
||||||
const [playingUrl, setPlayingUrl] = useState<string | null>(null);
|
const [playingUrl, setPlayingUrl] = useState<string | null>(null);
|
||||||
|
const [toast, setToast] = useState<ToastProps | null>(null);
|
||||||
|
|
||||||
// 提取搜索函数，以便在重试时调用
|
// 提取搜索函数，以便在重试时调用
|
||||||
const searchPansou = useCallback(async () => {
|
const searchPansou = useCallback(async () => {
|
||||||
@@ -141,9 +143,17 @@ export default function PansouSearch({
|
|||||||
throw new Error(data.error || '转存失败');
|
throw new Error(data.error || '转存失败');
|
||||||
}
|
}
|
||||||
|
|
||||||
window.alert(`转存成功，已保存到：${data.targetPath}`);
|
setToast({
|
||||||
|
message: `转存成功，已保存到：${data.targetPath}`,
|
||||||
|
type: 'success',
|
||||||
|
onClose: () => setToast(null),
|
||||||
|
});
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
window.alert(err?.message || '转存失败');
|
setToast({
|
||||||
|
message: err?.message || '转存失败',
|
||||||
|
type: 'error',
|
||||||
|
onClose: () => setToast(null),
|
||||||
|
});
|
||||||
} finally {
|
} finally {
|
||||||
setTransferingUrl(null);
|
setTransferingUrl(null);
|
||||||
}
|
}
|
||||||
@@ -173,230 +183,245 @@ export default function PansouSearch({
|
|||||||
`/play?source=quark-temp&id=${encodeURIComponent(data.id)}&title=${encodeURIComponent(data.title || keyword)}`
|
`/play?source=quark-temp&id=${encodeURIComponent(data.id)}&title=${encodeURIComponent(data.title || keyword)}`
|
||||||
);
|
);
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
window.alert(err?.message || '立即播放失败');
|
setToast({
|
||||||
|
message: err?.message || '立即播放失败',
|
||||||
|
type: 'error',
|
||||||
|
onClose: () => setToast(null),
|
||||||
|
});
|
||||||
} finally {
|
} finally {
|
||||||
setPlayingUrl(null);
|
setPlayingUrl(null);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (loading) {
|
const renderBody = () => {
|
||||||
return (
|
if (loading) {
|
||||||
<div className='flex items-center justify-center py-12'>
|
return (
|
||||||
<div className='text-center'>
|
<div className='flex items-center justify-center py-12'>
|
||||||
<Loader2 className='mx-auto h-8 w-8 animate-spin text-green-600 dark:text-green-400' />
|
<div className='text-center'>
|
||||||
<p className='mt-4 text-sm text-gray-600 dark:text-gray-400'>
|
<Loader2 className='mx-auto h-8 w-8 animate-spin text-green-600 dark:text-green-400' />
|
||||||
正在搜索网盘资源...
|
<p className='mt-4 text-sm text-gray-600 dark:text-gray-400'>
|
||||||
</p>
|
正在搜索网盘资源...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
}
|
||||||
}
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className='flex items-center justify-center py-12'>
|
||||||
|
<div className='text-center'>
|
||||||
|
<AlertCircle className='mx-auto h-12 w-12 text-red-500 dark:text-red-400' />
|
||||||
|
<p className='mt-4 text-sm text-red-600 dark:text-red-400'>{error}</p>
|
||||||
|
<button
|
||||||
|
onClick={searchPansou}
|
||||||
|
className='mt-4 inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors'
|
||||||
|
>
|
||||||
|
<RefreshCw className='h-4 w-4' />
|
||||||
|
重试
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!results || results.total === 0 || !results.merged_by_type) {
|
||||||
|
return (
|
||||||
|
<div className='flex items-center justify-center py-12'>
|
||||||
|
<div className='text-center'>
|
||||||
|
<AlertCircle className='mx-auto h-12 w-12 text-gray-400 dark:text-gray-600' />
|
||||||
|
<p className='mt-4 text-sm text-gray-600 dark:text-gray-400'>
|
||||||
|
未找到相关资源
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const cloudTypes = Object.keys(results.merged_by_type || {});
|
||||||
|
|
||||||
|
// 过滤显示的网盘类型
|
||||||
|
const filteredCloudTypes = selectedType === 'all'
|
||||||
|
? cloudTypes
|
||||||
|
: cloudTypes.filter(type => type === selectedType);
|
||||||
|
|
||||||
|
// 计算每种网盘类型的数量
|
||||||
|
const typeStats = cloudTypes.map(type => ({
|
||||||
|
type,
|
||||||
|
count: results.merged_by_type?.[type]?.length || 0,
|
||||||
|
}));
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
return (
|
||||||
<div className='flex items-center justify-center py-12'>
|
<>
|
||||||
<div className='text-center'>
|
{/* 搜索结果统计 */}
|
||||||
<AlertCircle className='mx-auto h-12 w-12 text-red-500 dark:text-red-400' />
|
<div className='text-sm text-gray-600 dark:text-gray-400'>
|
||||||
<p className='mt-4 text-sm text-red-600 dark:text-red-400'>{error}</p>
|
找到 <span className='font-semibold text-green-600 dark:text-green-400'>{results.total}</span> 个资源
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 网盘类型过滤器 */}
|
||||||
|
<div className='flex flex-wrap gap-2'>
|
||||||
<button
|
<button
|
||||||
onClick={searchPansou}
|
onClick={() => setSelectedType('all')}
|
||||||
className='mt-4 inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors'
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
selectedType === 'all'
|
||||||
|
? 'bg-green-600 text-white dark:bg-green-600'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<RefreshCw className='h-4 w-4' />
|
全部 ({results.total})
|
||||||
重试
|
|
||||||
</button>
|
</button>
|
||||||
|
{typeStats.map(({ type, count }) => {
|
||||||
|
const typeName = CLOUD_TYPE_NAMES[type] || type;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={type}
|
||||||
|
onClick={() => setSelectedType(type)}
|
||||||
|
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
selectedType === type
|
||||||
|
? 'bg-green-600 text-white dark:bg-green-600'
|
||||||
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{typeName} ({count})
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!results || results.total === 0 || !results.merged_by_type) {
|
{/* 按网盘类型分类显示 */}
|
||||||
return (
|
{filteredCloudTypes.map((cloudType) => {
|
||||||
<div className='flex items-center justify-center py-12'>
|
const links = results.merged_by_type?.[cloudType];
|
||||||
<div className='text-center'>
|
if (!links || links.length === 0) return null;
|
||||||
<AlertCircle className='mx-auto h-12 w-12 text-gray-400 dark:text-gray-600' />
|
|
||||||
<p className='mt-4 text-sm text-gray-600 dark:text-gray-400'>
|
|
||||||
未找到相关资源
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const cloudTypes = Object.keys(results.merged_by_type || {});
|
const typeName = CLOUD_TYPE_NAMES[cloudType] || cloudType;
|
||||||
|
const typeColor = CLOUD_TYPE_COLORS[cloudType] || CLOUD_TYPE_COLORS.others;
|
||||||
// 过滤显示的网盘类型
|
|
||||||
const filteredCloudTypes = selectedType === 'all'
|
|
||||||
? cloudTypes
|
|
||||||
: cloudTypes.filter(type => type === selectedType);
|
|
||||||
|
|
||||||
// 计算每种网盘类型的数量
|
|
||||||
const typeStats = cloudTypes.map(type => ({
|
|
||||||
type,
|
|
||||||
count: results.merged_by_type?.[type]?.length || 0,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='space-y-6'>
|
|
||||||
{/* 搜索结果统计 */}
|
|
||||||
<div className='text-sm text-gray-600 dark:text-gray-400'>
|
|
||||||
找到 <span className='font-semibold text-green-600 dark:text-green-400'>{results.total}</span> 个资源
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 网盘类型过滤器 */}
|
|
||||||
<div className='flex flex-wrap gap-2'>
|
|
||||||
<button
|
|
||||||
onClick={() => setSelectedType('all')}
|
|
||||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
||||||
selectedType === 'all'
|
|
||||||
? 'bg-green-600 text-white dark:bg-green-600'
|
|
||||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
全部 ({results.total})
|
|
||||||
</button>
|
|
||||||
{typeStats.map(({ type, count }) => {
|
|
||||||
const typeName = CLOUD_TYPE_NAMES[type] || type;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<div key={cloudType} className='space-y-3'>
|
||||||
key={type}
|
{/* 网盘类型标题 */}
|
||||||
onClick={() => setSelectedType(type)}
|
<div className='flex items-center gap-2'>
|
||||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${typeColor}`}>
|
||||||
selectedType === type
|
{typeName}
|
||||||
? 'bg-green-600 text-white dark:bg-green-600'
|
</span>
|
||||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
|
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
||||||
}`}
|
{links.length} 个链接
|
||||||
>
|
</span>
|
||||||
{typeName} ({count})
|
</div>
|
||||||
</button>
|
|
||||||
|
{/* 链接列表 */}
|
||||||
|
<div className='space-y-2'>
|
||||||
|
{links.map((link: PansouLink, index: number) => (
|
||||||
|
<div
|
||||||
|
key={`${cloudType}-${index}`}
|
||||||
|
className='p-4 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 transition-colors'
|
||||||
|
>
|
||||||
|
{/* 资源标题 */}
|
||||||
|
{link.note && (
|
||||||
|
<div className='mb-2 text-sm font-medium text-gray-900 dark:text-gray-100'>
|
||||||
|
{link.note}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 链接和密码 */}
|
||||||
|
<div className='flex items-center gap-2 mb-2'>
|
||||||
|
<div className='flex-1 min-w-0'>
|
||||||
|
<div className='text-xs text-gray-600 dark:text-gray-400 truncate'>
|
||||||
|
{link.url}
|
||||||
|
</div>
|
||||||
|
{link.password && (
|
||||||
|
<div className='text-xs text-gray-600 dark:text-gray-400 mt-1'>
|
||||||
|
提取码: <span className='font-mono font-semibold'>{link.password}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 操作按钮 */}
|
||||||
|
<div className='flex items-center gap-1 flex-shrink-0'>
|
||||||
|
{cloudType === 'quark' && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => handleQuarkInstantPlay(link)}
|
||||||
|
disabled={playingUrl === link.url}
|
||||||
|
className='px-2 py-1 rounded-md bg-green-600 hover:bg-green-700 text-white text-xs transition-colors disabled:opacity-60'
|
||||||
|
title='立即播放'
|
||||||
|
>
|
||||||
|
{playingUrl === link.url ? '处理中...' : '立即播放'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleQuarkTransfer(link)}
|
||||||
|
disabled={transferingUrl === link.url}
|
||||||
|
className='px-2 py-1 rounded-md bg-purple-600 hover:bg-purple-700 text-white text-xs transition-colors disabled:opacity-60'
|
||||||
|
title='转存到配置目录'
|
||||||
|
>
|
||||||
|
{transferingUrl === link.url ? '转存中...' : '转存'}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => handleCopy(
|
||||||
|
link.password ? `${link.url}\n提取码: ${link.password}` : link.url,
|
||||||
|
link.url
|
||||||
|
)}
|
||||||
|
className='p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors'
|
||||||
|
title='复制链接'
|
||||||
|
>
|
||||||
|
{copiedUrl === link.url ? (
|
||||||
|
<span className='text-xs text-green-600 dark:text-green-400'>已复制</span>
|
||||||
|
) : (
|
||||||
|
<Copy className='h-4 w-4 text-gray-600 dark:text-gray-400' />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleOpenLink(link.url)}
|
||||||
|
className='p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors'
|
||||||
|
title='打开链接'
|
||||||
|
>
|
||||||
|
<ExternalLink className='h-4 w-4 text-gray-600 dark:text-gray-400' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 来源和时间 */}
|
||||||
|
<div className='flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400'>
|
||||||
|
{link.source && (
|
||||||
|
<span>来源: {link.source}</span>
|
||||||
|
)}
|
||||||
|
{link.datetime && (
|
||||||
|
<span>{new Date(link.datetime).toLocaleDateString()}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 图片预览 */}
|
||||||
|
{link.images && link.images.length > 0 && (
|
||||||
|
<div className='mt-3 flex gap-2 overflow-x-auto'>
|
||||||
|
{link.images.map((img, imgIndex) => (
|
||||||
|
<img
|
||||||
|
key={imgIndex}
|
||||||
|
src={img}
|
||||||
|
alt=''
|
||||||
|
className='h-20 w-auto rounded object-cover'
|
||||||
|
loading='lazy'
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='space-y-6'>
|
||||||
|
{renderBody()}
|
||||||
</div>
|
</div>
|
||||||
|
{toast && <Toast {...toast} />}
|
||||||
{/* 按网盘类型分类显示 */}
|
</>
|
||||||
{filteredCloudTypes.map((cloudType) => {
|
|
||||||
const links = results.merged_by_type?.[cloudType];
|
|
||||||
if (!links || links.length === 0) return null;
|
|
||||||
|
|
||||||
const typeName = CLOUD_TYPE_NAMES[cloudType] || cloudType;
|
|
||||||
const typeColor = CLOUD_TYPE_COLORS[cloudType] || CLOUD_TYPE_COLORS.others;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={cloudType} className='space-y-3'>
|
|
||||||
{/* 网盘类型标题 */}
|
|
||||||
<div className='flex items-center gap-2'>
|
|
||||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${typeColor}`}>
|
|
||||||
{typeName}
|
|
||||||
</span>
|
|
||||||
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
|
||||||
{links.length} 个链接
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 链接列表 */}
|
|
||||||
<div className='space-y-2'>
|
|
||||||
{links.map((link: PansouLink, index: number) => (
|
|
||||||
<div
|
|
||||||
key={`${cloudType}-${index}`}
|
|
||||||
className='p-4 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-600 transition-colors'
|
|
||||||
>
|
|
||||||
{/* 资源标题 */}
|
|
||||||
{link.note && (
|
|
||||||
<div className='mb-2 text-sm font-medium text-gray-900 dark:text-gray-100'>
|
|
||||||
{link.note}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 链接和密码 */}
|
|
||||||
<div className='flex items-center gap-2 mb-2'>
|
|
||||||
<div className='flex-1 min-w-0'>
|
|
||||||
<div className='text-xs text-gray-600 dark:text-gray-400 truncate'>
|
|
||||||
{link.url}
|
|
||||||
</div>
|
|
||||||
{link.password && (
|
|
||||||
<div className='text-xs text-gray-600 dark:text-gray-400 mt-1'>
|
|
||||||
提取码: <span className='font-mono font-semibold'>{link.password}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 操作按钮 */}
|
|
||||||
<div className='flex items-center gap-1 flex-shrink-0'>
|
|
||||||
{cloudType === 'quark' && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
onClick={() => handleQuarkInstantPlay(link)}
|
|
||||||
disabled={playingUrl === link.url}
|
|
||||||
className='px-2 py-1 rounded-md bg-green-600 hover:bg-green-700 text-white text-xs transition-colors disabled:opacity-60'
|
|
||||||
title='立即播放'
|
|
||||||
>
|
|
||||||
{playingUrl === link.url ? '处理中...' : '立即播放'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleQuarkTransfer(link)}
|
|
||||||
disabled={transferingUrl === link.url}
|
|
||||||
className='px-2 py-1 rounded-md bg-purple-600 hover:bg-purple-700 text-white text-xs transition-colors disabled:opacity-60'
|
|
||||||
title='转存到配置目录'
|
|
||||||
>
|
|
||||||
{transferingUrl === link.url ? '转存中...' : '转存'}
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={() => handleCopy(
|
|
||||||
link.password ? `${link.url}\n提取码: ${link.password}` : link.url,
|
|
||||||
link.url
|
|
||||||
)}
|
|
||||||
className='p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors'
|
|
||||||
title='复制链接'
|
|
||||||
>
|
|
||||||
{copiedUrl === link.url ? (
|
|
||||||
<span className='text-xs text-green-600 dark:text-green-400'>已复制</span>
|
|
||||||
) : (
|
|
||||||
<Copy className='h-4 w-4 text-gray-600 dark:text-gray-400' />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => handleOpenLink(link.url)}
|
|
||||||
className='p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors'
|
|
||||||
title='打开链接'
|
|
||||||
>
|
|
||||||
<ExternalLink className='h-4 w-4 text-gray-600 dark:text-gray-400' />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 来源和时间 */}
|
|
||||||
<div className='flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400'>
|
|
||||||
{link.source && (
|
|
||||||
<span>来源: {link.source}</span>
|
|
||||||
)}
|
|
||||||
{link.datetime && (
|
|
||||||
<span>{new Date(link.datetime).toLocaleDateString()}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 图片预览 */}
|
|
||||||
{link.images && link.images.length > 0 && (
|
|
||||||
<div className='mt-3 flex gap-2 overflow-x-auto'>
|
|
||||||
{link.images.map((img, imgIndex) => (
|
|
||||||
<img
|
|
||||||
key={imgIndex}
|
|
||||||
src={img}
|
|
||||||
alt=''
|
|
||||||
className='h-20 w-auto rounded object-cover'
|
|
||||||
loading='lazy'
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user