46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { LockClosedIcon } from '@heroicons/react/24/outline';
|
|
import { useSubscription } from '../../hooks/useSubscription';
|
|
|
|
interface FeatureGateProps {
|
|
feature: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export default function FeatureGate({ feature, children }: FeatureGateProps) {
|
|
const { hasFeature, hasPlan } = useSubscription();
|
|
|
|
if (hasFeature(feature)) return <>{children}</>;
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex', flexDirection: 'column',
|
|
alignItems: 'center', justifyContent: 'center',
|
|
minHeight: 320, gap: 16, padding: 40, textAlign: 'center',
|
|
}}>
|
|
<div style={{
|
|
width: 64, height: 64, borderRadius: '50%',
|
|
background: 'oklch(0.97 0.01 256)',
|
|
display: 'grid', placeItems: 'center',
|
|
border: '1px solid var(--border)',
|
|
}}>
|
|
<LockClosedIcon style={{ width: 28, color: 'var(--text-3)' }} />
|
|
</div>
|
|
<div>
|
|
<div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>
|
|
این قابلیت در پنل فعلی شما فعال نیست
|
|
</div>
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13.5, maxWidth: 360, lineHeight: 1.6 }}>
|
|
{hasPlan
|
|
? 'برای استفاده از این قابلیت پنل خود را ارتقاء دهید'
|
|
: 'برای استفاده از این قابلیت یک پنل اشتراکی فعال کنید'}
|
|
</div>
|
|
</div>
|
|
<Link to="/admin/subscription" className="btn primary sm" style={{ textDecoration: 'none' }}>
|
|
{hasPlan ? 'ارتقاء پنل' : 'مشاهده پنلهای اشتراکی'}
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|