| 1 |
import { Spinner } from '@wordpress/components' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { usePagesList } from '@assist/hooks/usePagesList' |
| 4 |
import { maybeHttps } from '@assist/lib/util' |
| 5 |
|
| 6 |
export const PagesList = () => { |
| 7 |
const { pages, loading, error } = usePagesList() |
| 8 |
|
| 9 |
if (loading || error) { |
| 10 |
return ( |
| 11 |
<div className="my-4 w-full flex items-center max-w-3/4 mx-auto bg-gray-100 p-12"> |
| 12 |
<Spinner /> |
| 13 |
</div> |
| 14 |
) |
| 15 |
} |
| 16 |
|
| 17 |
if (pages.length === 0) { |
| 18 |
return ( |
| 19 |
<div className="my-4 max-w-3/4 w-full mx-auto bg-gray-100 p-12"> |
| 20 |
{__('No pages found...', 'extendify')} |
| 21 |
</div> |
| 22 |
) |
| 23 |
} |
| 24 |
|
| 25 |
return ( |
| 26 |
<div className="my-4 text-base max-w-3/4 w-full mx-auto"> |
| 27 |
<h2 className="text-lg mb-3">{__('Pages', 'extendify')}:</h2> |
| 28 |
<div className="grid grid-cols-2 gap-4"> |
| 29 |
{pages.map((page) => ( |
| 30 |
<div |
| 31 |
key={page.ID} |
| 32 |
className="p-3 flex items-center justify-between border border-solid border-gray-400"> |
| 33 |
<div className="flex items-center"> |
| 34 |
<span className="dashicons dashicons-saved" /> |
| 35 |
<span className="pl-1 font-semibold"> |
| 36 |
{page.post_title || __('Untitled', 'extendify')} |
| 37 |
</span> |
| 38 |
</div> |
| 39 |
<div className="flex text-sm"> |
| 40 |
<span> |
| 41 |
<a |
| 42 |
target="_blank" |
| 43 |
rel="noreferrer" |
| 44 |
href={maybeHttps(page.url)}> |
| 45 |
{__('View', 'extendify')} |
| 46 |
</a> |
| 47 |
</span> |
| 48 |
<span className="mr-2 pl-2"> |
| 49 |
<a |
| 50 |
target="_blank" |
| 51 |
rel="noreferrer" |
| 52 |
href={`${window.extAssistData.adminUrl}post.php?post=${page.ID}&action=edit`}> |
| 53 |
{__('Edit', 'extendify')} |
| 54 |
</a> |
| 55 |
</span> |
| 56 |
</div> |
| 57 |
</div> |
| 58 |
))} |
| 59 |
</div> |
| 60 |
</div> |
| 61 |
) |
| 62 |
} |
| 63 |
|
