109 lines
5.1 KiB
TypeScript
109 lines
5.1 KiB
TypeScript
'use client';
|
|
|
|
import { PackageName } from '@/types/package';
|
|
import { useState, useEffect } from 'react';
|
|
import { packagesApi } from '@/lib/api/packages';
|
|
import { CubeIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface PackageSelectorProps {
|
|
token: string;
|
|
selectedPackage: string | null;
|
|
onPackageChange: (packageName: string) => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function PackageSelector({ token, selectedPackage, onPackageChange, isLoading }: PackageSelectorProps) {
|
|
const [packages, setPackages] = useState<PackageName[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadPackages();
|
|
}, [token]);
|
|
|
|
const loadPackages = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await packagesApi.getAllPackages(token);
|
|
setPackages(data);
|
|
|
|
if (data.length > 0 && !selectedPackage) {
|
|
onPackageChange(data[0].name!);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load packages:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
|
|
<div className="animate-pulse flex items-center gap-3">
|
|
<div className="h-10 w-10 bg-gray-200 dark:bg-gray-800 rounded-xl" />
|
|
<div className="flex-1">
|
|
<div className="h-3 w-24 bg-gray-200 dark:bg-gray-800 rounded mb-2" />
|
|
<div className="h-4 w-48 bg-gray-200 dark:bg-gray-800 rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
پکیج را انتخاب کنید
|
|
</label>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{packages.map((pkg) => {
|
|
const isSelected = selectedPackage === pkg.name;
|
|
return (
|
|
<button
|
|
key={pkg.id}
|
|
onClick={() => onPackageChange(pkg.name!)}
|
|
disabled={isLoading}
|
|
className={`flex items-center gap-3 p-4 rounded-2xl text-right transition-all duration-150 ${
|
|
isSelected
|
|
? 'bg-indigo-50 dark:bg-indigo-500/10 ring-2 ring-indigo-600 dark:ring-indigo-400 shadow-sm'
|
|
: 'bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 hover:ring-gray-300 dark:hover:ring-gray-700 hover:shadow-sm'
|
|
} disabled:opacity-50`}
|
|
>
|
|
{pkg.image && typeof pkg.image === 'string' ? (
|
|
<img src={pkg.image} alt={pkg.title || ''} className="h-10 w-10 rounded-xl object-cover flex-shrink-0" />
|
|
) : (
|
|
<div className={`h-10 w-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
|
|
isSelected
|
|
? 'bg-indigo-100 dark:bg-indigo-500/15'
|
|
: 'bg-gray-100 dark:bg-gray-800'
|
|
}`}>
|
|
<CubeIcon className={`h-5 w-5 ${isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500'}`} />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<p className={`text-sm font-semibold truncate ${
|
|
isSelected ? 'text-indigo-700 dark:text-indigo-400' : 'text-gray-900 dark:text-gray-100'
|
|
}`}>
|
|
{pkg.title || 'بدون عنوان'}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">
|
|
{pkg.name}
|
|
</p>
|
|
</div>
|
|
{isSelected && (
|
|
<div className="mr-auto flex-shrink-0">
|
|
<div className="h-5 w-5 rounded-full bg-indigo-600 dark:bg-indigo-400 flex items-center justify-center">
|
|
<svg className="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|