# post-carousel/4.0.8/src/admin/pages/integrations/card.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.8. 57 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/admin/pages/integrations/card.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.8/raw/src/admin/pages/integrations/card.js
- Modified: 2026-09-02T10:51:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/admin/pages/integrations/card.js#L10-L20`.

```javascript
import Toggle from "react-toggle";
import { __ } from "@wordpress/i18n";
import { Demos, Docs } from "../../components/icons/ui";

const IntegrateCard = ({ data, isDisabled = false, value, integrationName, blockShowHideHandler }) => {

    const { Icon, title, text, docsLink, demoLink, upcoming } = data || {};
    const disabledClass = isDisabled ? " sp-disabled" : "";

    return (
        <>
            <div className={`sp-pcp-blocks-settings-card${disabledClass}`}>
                <div className="sp-pcp-blocks-settings-card-info">
                    <div className="sp-pcp-blocks-settings-card-icon">
                        <Icon />
                    </div>

                    <div className="sp-pcp-blocks-settings-card-docs">
                        <h4>{title} 
                            {upcoming && <span className="sp-smart-upcoming">upcoming</span>}
                        </h4>
                        <span>{text}</span>

                        <ul>
                            {docsLink && (
                                <li>
                                    <a target="_blank" href={docsLink} rel="noreferrer">
                                        <Docs /> Docs
                                    </a>
                                </li>
                            )}

                            {demoLink && (
                                <li>
                                    <a target="_blank" href={demoLink} rel="noreferrer">
                                        <Demos /> Demo
                                    </a>
                                </li>
                            )}
                        </ul>
                    </div>
                </div>

                <div className="sp-pcp-blocks-settings-toggle-btn">
                    <Toggle
                        defaultChecked={value}
                        icons={false}
                        onChange={() => blockShowHideHandler(integrationName, "integration-option")}
                    />
                </div>
            </div>
        </>
    );
};

export default IntegrateCard;

```