| 1 |
import { useRouter } from '@draft/hooks/useRouter'; |
| 2 |
import { |
| 3 |
BaseControl, |
| 4 |
Button, |
| 5 |
__experimentalDivider as Divider, |
| 6 |
PanelBody, |
| 7 |
__experimentalSpacer as Spacer, |
| 8 |
} from '@wordpress/components'; |
| 9 |
import { __ } from '@wordpress/i18n'; |
| 10 |
|
| 11 |
export const Home = () => { |
| 12 |
const { navigateTo } = useRouter(); |
| 13 |
return ( |
| 14 |
<PanelBody> |
| 15 |
<BaseControl |
| 16 |
id="extendify-draft-image-gen" |
| 17 |
label={__('AI Image Generator', 'extendify-local')} |
| 18 |
help={__( |
| 19 |
'Use AI to generate custom images based on your description.', |
| 20 |
'extendify-local', |
| 21 |
)} |
| 22 |
> |
| 23 |
<Button |
| 24 |
variant="primary" |
| 25 |
__next40pxDefaultSize |
| 26 |
id="extendify-draft-image-gen-button" |
| 27 |
className="w-full justify-center" |
| 28 |
onClick={() => navigateTo('ai-image')} |
| 29 |
> |
| 30 |
{__('Generate an image', 'extendify-local')} |
| 31 |
</Button> |
| 32 |
</BaseControl> |
| 33 |
<Spacer marginY="5" /> |
| 34 |
<Divider /> |
| 35 |
<BaseControl |
| 36 |
id="extendify-draft-image-stock-photos" |
| 37 |
label={__('Discover Stock Photos', 'extendify-local')} |
| 38 |
help={__( |
| 39 |
'Search and add free stock photos from Unsplash.com', |
| 40 |
'extendify-local', |
| 41 |
)} |
| 42 |
> |
| 43 |
<Button |
| 44 |
variant="primary" |
| 45 |
className="h-auto min-h-10 w-full justify-center whitespace-normal break-words py-2.5" |
| 46 |
onClick={() => navigateTo('unsplash')} |
| 47 |
> |
| 48 |
{__('Search Unsplash', 'extendify-local')} |
| 49 |
</Button> |
| 50 |
</BaseControl> |
| 51 |
</PanelBody> |
| 52 |
); |
| 53 |
}; |
| 54 |
|
| 55 |
export const routes = [ |
| 56 |
{ |
| 57 |
slug: 'home', |
| 58 |
title: __('Home', 'extendify-local'), |
| 59 |
component: Home, |
| 60 |
}, |
| 61 |
]; |
| 62 |
|
