115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '../../ui/button';
|
|
import { X, ShieldCheck, Check, XCircle } from 'lucide-react';
|
|
import { ProductLicense } from '../../../types';
|
|
|
|
interface LicenceDetailsModalProps {
|
|
license: ProductLicense;
|
|
onClose: () => void;
|
|
onAddToCart: () => void;
|
|
}
|
|
|
|
export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
|
|
license,
|
|
onClose,
|
|
onAddToCart,
|
|
}) => {
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div
|
|
className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
></div>
|
|
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-[80vh]">
|
|
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
|
<h3 className="font-bold text-white flex items-center gap-2">
|
|
<ShieldCheck className="w-5 h-5 text-kodo-cyan" /> License Agreement
|
|
</h3>
|
|
<button onClick={onClose}>
|
|
<X className="w-5 h-5 text-gray-400 hover:text-white" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6 flex-1 overflow-y-auto">
|
|
<div className="flex justify-between items-end mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white">
|
|
{license.name} License
|
|
</h2>
|
|
<p className="text-gray-400 text-sm">
|
|
Review usage rights and restrictions.
|
|
</p>
|
|
</div>
|
|
<div className="text-3xl font-mono font-bold text-kodo-cyan">
|
|
${license.price}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-kodo-steel pb-1">
|
|
What You Get
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{license.features.map((feat, i) => (
|
|
<li
|
|
key={i}
|
|
className="flex items-start gap-3 text-sm text-gray-300"
|
|
>
|
|
<div className="mt-0.5 bg-kodo-lime/10 p-0.5 rounded-full">
|
|
<Check className="w-3 h-3 text-kodo-lime" />
|
|
</div>
|
|
{feat}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-kodo-steel pb-1">
|
|
Restrictions
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
<li className="flex items-start gap-3 text-sm text-gray-400">
|
|
<div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
|
|
<XCircle className="w-3 h-3 text-kodo-red" />
|
|
</div>
|
|
Do not resell or redistribute as a sample pack.
|
|
</li>
|
|
<li className="flex items-start gap-3 text-sm text-gray-400">
|
|
<div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
|
|
<XCircle className="w-3 h-3 text-kodo-red" />
|
|
</div>
|
|
Content ID registration is prohibited.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500 italic">
|
|
This is a simplified summary. Please read the full{' '}
|
|
<a href="#" className="text-kodo-cyan hover:underline">
|
|
legal contract
|
|
</a>{' '}
|
|
before purchasing.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
|
|
<Button variant="ghost" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => {
|
|
onAddToCart();
|
|
onClose();
|
|
}}
|
|
>
|
|
Add to Cart
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|