extendify / src / Assist / tasks / images / AiImageGeneratorMarkup.jsx

AiImageGeneratorMarkup.jsx in Extendify 3.1.1, at src/Assist/tasks/images/AiImageGeneratorMarkup.jsx

207 lines 7.9 KB

Raw Download Zip

1	import { magic } from '@assist/tasks/images/icons';
2	import { Button } from '@wordpress/components';
3	import { __ } from '@wordpress/i18n';
4	import {
5	alignNone,
6	chevronLeft,
7	chevronUpDown,
8	crop,
9	dragHandle,
10	drawerRight,
11	filter,
12	helpFilled,
13	Icon,
14	image,
15	link,
16	listView,
17	moreVertical,
18	pencil,
19	plus,
20	redo,
21	undo,
22	wordpress,
23	} from '@wordpress/icons';
24
25	export const AiImageGeneratorMarkup = (props) => (
26	<div {...props}>
27	<div className="absolute top-1.5 z-0 flex h-20 w-44 flex-wrap gap-3">
28	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
29	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
30	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
31	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
32	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
33	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
34	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
35	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
36	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
37	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
38	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
39	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
40	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
41	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
42	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
43	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
44	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
45	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
46	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
47	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
48	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
49	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
50	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
51	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
52	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
53	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
54	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
55	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
56	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
57	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
58	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
59	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
60	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
61	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
62	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
63	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
64	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
65	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
66	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
67	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
68	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
69	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
70	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
71	</div>
72	<div className="relative z-10 grid w-full grid-cols-12 px-12">
73	<div className="col-span-12 w-full overflow-hidden rounded-t-md border border-gray-300 bg-white shadow-xl">
74	<div className="w-[1160px] origin-top-left scale-[0.4] transform rtl:origin-top-right">
75	<div className="flex justify-between border-b">
76	<div className="flex items-center justify-items-start gap-2">
77	<div className="flex min-h-14 min-w-14 items-center justify-center bg-black fill-current text-white">
78	<Icon icon={wordpress} size={36} className="m-3" />
79	</div>
80	<Button variant="primary" icon={plus} size="compact" />
81	<Icon icon={pencil} />
82	<Icon icon={undo} />
83	<Icon icon={redo} />
84	<Icon icon={listView} />
85	</div>
86	<div className="flex items-center justify-items-end gap-2 pr-2">
87	<Button variant="secondary" size="compact">
88	{__('Save draft', 'extendify-local')}
89	</Button>
90	<Button variant="primary" size="compact">
91	{__('Publish', 'extendify-local')}
92	</Button>
93	<Button
94	isPressed={true}
95	icon={magic}
96	iconSize={18}
97	size="small"
98	/>
99	<Icon icon={drawerRight} />
100	<Button
101	size="compact"
102	className="flex flex-row-reverse pl-3 pr-2"
103	variant="primary"
104	icon={helpFilled}
105	iconSize={18}
106	>
107	{__('Help', 'extendify-local')}
108	</Button>
109	<Icon icon={moreVertical} />
110	</div>
111	</div>
112	<div className="grid grid-cols-12 text-left rtl:text-right">
113	<div className="col-span-9 bg-gray-50 px-40 pb-12 pt-4 rtl:col-span-10">
114	<h2>{__('A Glimpse into the Arctic', 'extendify-local')}</h2>
115	<div className="mb-2.5 text-sm">
116	<div className="flex max-w-fit border border-current bg-white">
117	<div className="border-r border-current px-1">
118	<Button icon={image} />
119	<Button icon={dragHandle} />
120	<Button icon={chevronUpDown} />
121	</div>
122
123	<div className="border-r border-current px-1">
124	<Button icon={alignNone} />
125	<Button icon={filter} />
126	<Button icon={link} />
127	<Button icon={crop} />
128	</div>
129	<div className="flex items-center border-r border-current px-2">
130	<Button variant="primary" icon={magic} className="max-h-7">
131	{__('Ask AI', 'extendify-local')}
132	</Button>
133	</div>
134	<div className="border-r border-current px-1">
135	<Button>{__('Replace', 'extendify-local')}</Button>
136	</div>
137
138	<div>
139	<Button icon={moreVertical} />
140	</div>
141	</div>
142	</div>
143	<img
144	className="h-auto w-full"
145	alt={__('A group of penguins', 'extendify-local')}
146	src="https://images.extendify-cdn.com/assist-tasks/penguins.webp"
147	/>
148	<p>
149	{__(
150	'When you think of the Arctic, images of vast ice sheets, chilling winds, and the majestic polar bear might come to mind.',
151	'extendify-local',
152	)}
153	</p>
154	</div>
155	<div className="col-span-3 border-l border-gray-200 bg-white text-sm rtl:col-span-2">
156	<div className="flex items-center gap-2 border-b border-gray-200 py-2 pl-3 pr-2 font-medium">
157	<div className="flex">
158	<Button icon={chevronLeft} size="small" />
159	</div>
160	{__('AI image generator', 'extendify-local')}
161	</div>
162	<div className="p-4">
163	<span className="text-xs uppercase">
164	{__('Image description', 'extendify-local')}
165	</span>
166	<div className="mb-4 mt-2 border border-current px-3 py-2.5">
167	{__(
168	'An image of a group of penguins on an icy Arctic landscape, surrounded by icebergs and snow under a clear blue sky.',
169	'extendify-local',
170	)}
171	</div>
172	<span className="text-xs uppercase">
173	{__('Aspect Ratio', 'extendify-local')}
174	</span>
175	<div className="w-fill mb-7 mt-2 flex gap-1 border border-current p-1">
176	<div className="flex flex-1 items-center justify-center rounded-xs bg-current p-1">
177	<div className="h-3 w-3 bg-white"></div>
178	</div>
179	<div className="flex flex-1 items-center justify-center p-1">
180	<div className="h-3 w-5 bg-current"></div>
181	</div>
182	<div className="flex flex-1 items-center justify-center p-1">
183	<div className="h-4 w-2.5 bg-current"></div>
184	</div>
185	</div>
186	<Button
187	variant="primary"
188	__next40pxDefaultSize
189	className="w-full justify-center"
190	>
191	{__('Generate Image', 'extendify-local')}
192	</Button>
193	<div className="mt-5 flex items-center justify-items-center gap-2">
194	<Icon icon={image} />
195	<div className="pt-1 leading-none">
196	{__('0 of 10 daily image credits used', 'extendify-local')}
197	</div>
198	</div>
199	</div>
200	</div>
201	</div>
202	</div>
203	</div>
204	</div>
205	</div>
206	);
207