| 1 |
import Toggle from "react-toggle"; |
| 2 |
import { Demos, Docs } from "../icons/ui"; |
| 3 |
import ProBadge from "../badges/ProBadge"; |
| 4 |
|
| 5 |
// Blocks settings page block on/off card component. |
| 6 |
const Card = ({ blockName, attributes, blockShowHideHandler, blocksSettings, type = "" }) => { |
| 7 |
const findBlockData = blocksSettings?.find((item) => blockName === item.block_name); |
| 8 |
|
| 9 |
if (!findBlockData) { |
| 10 |
return; |
| 11 |
} |
| 12 |
|
| 13 |
const { show } = findBlockData; |
| 14 |
|
| 15 |
const Icon = attributes?.Icon || null; |
| 16 |
const demoLink = attributes?.demoLink || null; |
| 17 |
const docLink = attributes?.docLink || null; |
| 18 |
const title = attributes?.title || null; |
| 19 |
const pro = attributes?.pro || null; |
| 20 |
|
| 21 |
return ( |
| 22 |
<div className={`sp-pcp-blocks-settings-card${pro ? " sp-pcp-pro-card" : ""}`}> |
| 23 |
<div className="sp-pcp-blocks-settings-card-info"> |
| 24 |
{pro && <ProBadge />} |
| 25 |
<div className="sp-pcp-blocks-settings-card-icon"> |
| 26 |
<Icon /> |
| 27 |
</div> |
| 28 |
<div className="sp-pcp-blocks-settings-card-docs"> |
| 29 |
<div className="sp-pcp-blocks-settings-card-title"> |
| 30 |
<h4>{title}</h4> |
| 31 |
{/* {("setup-wizard" !== type && pro) && <ProBadge />} */} |
| 32 |
</div> |
| 33 |
{"setup-wizard" !== type && <ul> |
| 34 |
{"quick-start" !== type && <li> |
| 35 |
<a target="_blank" href={docLink} rel="noreferrer"> |
| 36 |
<Docs /> Docs |
| 37 |
</a> |
| 38 |
</li>} |
| 39 |
<li> |
| 40 |
{/* <a target="_blank" href={ demoLink }> */} |
| 41 |
{demoLink && ( |
| 42 |
<a target="_blank" href={demoLink || null} rel="noreferrer"> |
| 43 |
<Demos /> {"quick-start" === type ? "Live Demo" : "Demo"} |
| 44 |
</a> |
| 45 |
)} |
| 46 |
</li> |
| 47 |
</ul>} |
| 48 |
</div> |
| 49 |
</div> |
| 50 |
|
| 51 |
<div className="sp-pcp-blocks-settings-toggle-btn"> |
| 52 |
<Toggle |
| 53 |
defaultChecked={pro ? false : show} |
| 54 |
icons={false} |
| 55 |
onChange={() => { |
| 56 |
if (!pro) { |
| 57 |
blockShowHideHandler(blockName); |
| 58 |
} |
| 59 |
}} |
| 60 |
disabled={pro} |
| 61 |
/> |
| 62 |
</div> |
| 63 |
</div> |
| 64 |
); |
| 65 |
}; |
| 66 |
|
| 67 |
export default Card; |
| 68 |
|
