| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import PluginIcon from './PluginIcon'; |
| 3 |
import StatusBadge from './StatusBadge'; |
| 4 |
|
| 5 |
function PluginCard({ plugin }) { |
| 6 |
// eslint-disable-next-line no-undef |
| 7 |
const isPro = DISCO_COMPATIBLE_PLUGINS.is_pro_active; |
| 8 |
|
| 9 |
const handleClick = () => { |
| 10 |
window.open( |
| 11 |
'https://discoplugin.com/?utm_source=Compatible_page&utm_medium=button&utm_campaign=free-pro&utm_id=1#pricing', |
| 12 |
'_blank', |
| 13 |
'noopener,noreferrer' |
| 14 |
); |
| 15 |
}; |
| 16 |
|
| 17 |
return ( |
| 18 |
<div className="disco-bg-white disco-border disco-border-[#10c88a] disco-rounded-[14px] disco-overflow-hidden disco-flex disco-flex-col disco-shadow-[0px_0px_0px_3px_rgba(245,158,11,0.07)]"> |
| 19 |
{/* Top accent bar */} |
| 20 |
<div |
| 21 |
className="disco-h-[3px] disco-shrink-0" |
| 22 |
style={{ |
| 23 |
backgroundImage: |
| 24 |
'linear-gradient(90deg, rgb(16, 200, 138) 0%, rgb(16, 200, 138) 100%)', |
| 25 |
}} |
| 26 |
/> |
| 27 |
|
| 28 |
{/* Card body */} |
| 29 |
<div className="disco-flex disco-flex-col disco-flex-1 disco-p-[18px]"> |
| 30 |
{/* Icon + status */} |
| 31 |
<div className="disco-flex disco-items-start disco-justify-between disco-mb-5"> |
| 32 |
<div className="disco-w-[48px] disco-overflow-hidden disco-shrink-0"> |
| 33 |
<PluginIcon plugin={plugin} /> |
| 34 |
</div> |
| 35 |
<StatusBadge status={plugin.status} /> |
| 36 |
</div> |
| 37 |
|
| 38 |
{/* Name + category + description */} |
| 39 |
<div className="disco-flex disco-flex-col disco-gap-2 disco-mb-3"> |
| 40 |
<h3 className="disco-text-[14px] disco-font-extrabold disco-text-[#0f172a] disco-leading-[18.2px]"> |
| 41 |
{plugin.name} |
| 42 |
</h3> |
| 43 |
<p className="disco-text-[10.5px] disco-font-semibold disco-text-[#94a3b8] disco-uppercase disco-tracking-[0.42px] disco-leading-none"> |
| 44 |
{plugin.category} |
| 45 |
</p> |
| 46 |
<p className="disco-text-[12.5px] disco-font-normal disco-text-[#475569] disco-leading-[19.38px]"> |
| 47 |
{plugin.description} |
| 48 |
</p> |
| 49 |
</div> |
| 50 |
|
| 51 |
{/* Feature tags */} |
| 52 |
{plugin.tags && plugin.tags.length > 0 && ( |
| 53 |
<div className="disco-flex disco-flex-wrap disco-gap-[5px] disco-mt-auto disco-mb-3"> |
| 54 |
{plugin.tags.map((tag) => ( |
| 55 |
<span |
| 56 |
key={tag} |
| 57 |
className="disco-bg-[#f0fdf4] disco-border disco-border-[#dcfce7] disco-text-[#15803d] disco-text-[10.5px] disco-font-semibold disco-rounded-full disco-px-2 disco-py-[4.5px] disco-leading-none" |
| 58 |
> |
| 59 |
{tag} |
| 60 |
</span> |
| 61 |
))} |
| 62 |
</div> |
| 63 |
)} |
| 64 |
</div> |
| 65 |
|
| 66 |
{/* Bottom action bar */} |
| 67 |
<div className="disco-border-t disco-border-[#f1f5f9] disco-px-[18px] disco-h-14 disco-flex disco-items-center disco-justify-between disco-gap-3 disco-shrink-0"> |
| 68 |
{!isPro ? ( |
| 69 |
<> |
| 70 |
<button |
| 71 |
className="disco-flex disco-items-center disco-gap-1.5 disco-h-[31px] disco-px-[14px] disco-rounded-[10px] disco-text-[12px] disco-font-bold disco-text-black disco-shrink-0 hover:disco-scale-105" |
| 72 |
style={{ |
| 73 |
backgroundImage: |
| 74 |
'linear-gradient(to bottom, #ffe55b, #ffbe5c)', |
| 75 |
}} |
| 76 |
onClick={handleClick} |
| 77 |
> |
| 78 |
<svg |
| 79 |
width="10" |
| 80 |
height="12" |
| 81 |
viewBox="0 0 10 12" |
| 82 |
fill="none" |
| 83 |
xmlns="http://www.w3.org/2000/svg" |
| 84 |
className="disco-shrink-0" |
| 85 |
> |
| 86 |
<path |
| 87 |
d="M8.5 5.5H1.5C0.948 5.5 0.5 5.948 0.5 6.5V10.5C0.5 11.052 0.948 11.5 1.5 11.5H8.5C9.052 11.5 9.5 11.052 9.5 10.5V6.5C9.5 5.948 9.052 5.5 8.5 5.5Z" |
| 88 |
stroke="#573712" |
| 89 |
strokeWidth="1" |
| 90 |
strokeLinecap="round" |
| 91 |
strokeLinejoin="round" |
| 92 |
/> |
| 93 |
<path |
| 94 |
d="M3 5.5V3.5C3 2.837 3.263 2.201 3.732 1.732C4.201 1.263 4.837 1 5.5 1C6.163 1 6.799 1.263 7.268 1.732C7.737 2.201 8 2.837 8 3.5V5.5" |
| 95 |
stroke="#573712" |
| 96 |
strokeWidth="1" |
| 97 |
strokeLinecap="round" |
| 98 |
strokeLinejoin="round" |
| 99 |
/> |
| 100 |
</svg> |
| 101 |
{__('Unlock Pro', 'disco')} |
| 102 |
</button> |
| 103 |
<a |
| 104 |
href={plugin.learnMoreUrl || '#'} |
| 105 |
target="_blank" |
| 106 |
rel="noopener noreferrer" |
| 107 |
className="disco-text-[11.5px] disco-font-semibold disco-text-[#2563eb] disco-no-underline hover:disco-underline" |
| 108 |
> |
| 109 |
{__('How it works →', 'disco')} |
| 110 |
</a> |
| 111 |
</> |
| 112 |
) : ( |
| 113 |
<a |
| 114 |
href={plugin.learnMoreUrl || '#'} |
| 115 |
target="_blank" |
| 116 |
rel="noopener noreferrer" |
| 117 |
className="disco-w-full disco-text-xs disco-font-bold disco-text-primary-dark disco-no-underline disco-bg-primary-light disco-rounded-lg disco-px-5 disco-py-2 hover:disco-scale-105 hover:disco-text-primary-dark disco-transition-all disco-duration-300 disco-text-center" |
| 118 |
> |
| 119 |
{__('📄 View Docs →', 'disco')} |
| 120 |
</a> |
| 121 |
)} |
| 122 |
</div> |
| 123 |
</div> |
| 124 |
); |
| 125 |
} |
| 126 |
|
| 127 |
export default PluginCard; |
| 128 |
|
