# give/4.18.0/src/Campaigns/Blocks/CampaignGrid/app/index.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 63 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Campaigns/Blocks/CampaignGrid/app/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Campaigns/Blocks/CampaignGrid/app/index.tsx
- Modified: 2025-06-11T18:57:06+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/give/4.18.0/code/src/Campaigns/Blocks/CampaignGrid/app/index.tsx#L10-L20`.

```tsx
import {useState} from '@wordpress/element';
import useCampaigns from '../../shared/hooks/useCampaigns';
import Pagination from '../../shared/components/Pagination';
import CampaignCard from '../../shared/components/CampaignCard';
import {CampaignGridType} from '../types';

import './styles.scss';
import {Spinner as GiveSpinner} from '@givewp/components';

const getGridSettings = (layout: string) => {
    switch (layout) {
        case 'double':
            return 2;
        case 'triple':
            return 3;
        default:
            return 1;
    }
}

export default ({attributes}: { attributes: CampaignGridType }) => {
    const [page, setPage] = useState(1);

    const {campaigns, hasResolved, totalPages} = useCampaigns({
        ids: attributes?.filterBy?.map((item: { value: string }) => Number(item.value)),
        per_page: attributes?.perPage,
        sortBy: attributes?.sortBy,
        orderBy: attributes?.orderBy,
        page,
    });

    if (!hasResolved) {
        return <div className="givewp-campaign-grid__loading">
            <GiveSpinner />
        </div>;
    }

    return (
        <>
            <div
                className="givewp-campaign-grid"
                style={{gridTemplateColumns: `repeat(${getGridSettings(attributes.layout)}, 1fr)`}}
            >
                {campaigns?.map((campaign) => (
                    <CampaignCard
                        key={campaign.id}
                        campaign={campaign}
                        showImage={attributes.showImage}
                        showDescription={attributes.showDescription}
                        showGoal={attributes.showGoal}
                    />
                ))}
            </div>

            {attributes.showPagination && totalPages >= page && (
                <div className="givewp-campaign-grid__pagination">
                    <Pagination currentPage={page} totalPages={totalPages} setPage={(number) => setPage(number)} />
                </div>
            )}
        </>
    )
}

```