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

AiWritingAssistantMarkup.jsx in Extendify 3.1.2, at src/Assist/tasks/images/AiWritingAssistantMarkup.jsx

267 lines 10.3 KB

Raw Download Zip

1	import { magic, twoLines } from '@assist/tasks/images/icons';
2	import { Button } from '@wordpress/components';
3	import { __ } from '@wordpress/i18n';
4	import {
5	alignLeft,
6	arrowRight,
7	chevronDown,
8	chevronRightSmall,
9	chevronUpDown,
10	closeSmall,
11	customPostType,
12	dragHandle,
13	drawerRight,
14	formatBold,
15	formatItalic,
16	helpFilled,
17	Icon,
18	language,
19	link,
20	listView,
21	moreVertical,
22	paragraph,
23	pencil,
24	plus,
25	postContent,
26	redo,
27	starFilled,
28	termDescription,
29	undo,
30	wordpress,
31	} from '@wordpress/icons';
32
33	export const AiWritingAssistantMarkup = (props) => (
34	<div {...props}>
35	<div className="absolute top-1.5 z-0 flex h-20 w-44 flex-wrap gap-3">
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 className="h-1 w-1 rounded-full bg-gray-200"></div>
72	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
73	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
74	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
75	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
76	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
77	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
78	<div className="h-1 w-1 rounded-full bg-gray-200"></div>
79	</div>
80	<div className="relative z-10 grid w-full grid-cols-12 px-12">
81	<div className="col-span-12 w-full overflow-hidden rounded-t-md border border-gray-300 bg-white shadow-xl">
82	<div className="w-[1160px] origin-top-left scale-[0.4] transform rtl:origin-top-right">
83	<div className="flex justify-between border-b">
84	<div className="flex items-center justify-items-start gap-2">
85	<div className="flex min-h-14 min-w-14 items-center justify-center bg-black fill-current text-white">
86	<Icon icon={wordpress} size={36} className="m-3" />
87	</div>
88	<Button variant="primary" icon={plus} size="compact" />
89	<Icon icon={pencil} />
90	<Icon icon={undo} />
91	<Icon icon={redo} />
92	<Icon icon={listView} />
93	</div>
94	<div className="flex items-center justify-items-end gap-2 pr-2">
95	<Button variant="secondary" size="compact">
96	{__('Save draft', 'extendify-local')}
97	</Button>
98	<Button variant="primary" size="compact">
99	{__('Publish', 'extendify-local')}
100	</Button>
101	<Button
102	isPressed={true}
103	icon={magic}
104	iconSize={18}
105	size="small"
106	/>
107	<Icon icon={drawerRight} />
108	<Button
109	size="compact"
110	className="flex flex-row-reverse pl-3 pr-2"
111	variant="primary"
112	icon={helpFilled}
113	iconSize={18}
114	>
115	{__('Help', 'extendify-local')}
116	</Button>
117	<Icon icon={moreVertical} />
118	</div>
119	</div>
120	<div className="grid grid-cols-12 text-left">
121	<div className="bg-gray-40 col-span-9 bg-gray-50 px-40 pb-12 pt-4">
122	<h2>{__('Whispers of Silicon', 'extendify-local')}</h2>
123	<div className="relative mr-4 text-sm">
124	<div className="flex max-w-fit border border-current bg-white">
125	<div className="flex border-r border-current px-1">
126	<Button icon={paragraph} />
127	<Button icon={dragHandle} />
128	<Button icon={chevronUpDown} />
129	</div>
130
131	<div className="border-r border-current px-1">
132	<Button icon={alignLeft} />
133	</div>
134	<div className="flex items-center border-r border-current px-2">
135	<Button variant="primary" icon={magic} className="max-h-7">
136	{__('Ask AI', 'extendify-local')}
137	</Button>
138
139	<div className="absolute top-11 rounded-xs border border-current bg-white p-2">
140	<div className="flex min-w-60 items-center gap-2 py-2 pr-2">
141	<Icon icon={customPostType} />
142	{__('Improve writing', 'extendify-local')}
143	</div>
144	<div className="flex items-center gap-2 py-2 pr-2">
145	<Icon icon={termDescription} />
146	{__('Fix spelling & grammar ', 'extendify-local')}
147	</div>
148	<div className="flex items-center gap-2 py-2 pr-2">
149	<Icon icon={paragraph} />
150	{__('Simplify language', 'extendify-local')}
151	</div>
152	<div className="flex items-center gap-2 py-2 pr-2">
153	<Icon icon={twoLines} />
154	{__('Make shorter', 'extendify-local')}
155	</div>
156	<div className="flex items-center gap-2 py-2 pr-2">
157	<Icon icon={postContent} />
158	{__('Make longer', 'extendify-local')}
159	</div>
160	<div className="flex items-center justify-between py-2 pr-2">
161	<div className="flex items-center gap-2">
162	<Icon icon={language} />
163	{__('Translate', 'extendify-local')}
164	</div>
165	<Icon icon={chevronRightSmall} />
166	</div>
167	</div>
168	</div>
169	<div className="flex border-r border-current px-1">
170	<Button icon={formatBold} />
171	<Button icon={formatItalic} />
172	<Button icon={link} />
173	<Button icon={chevronDown} />
174	</div>
175
176	<div>
177	<Button icon={moreVertical} />
178	</div>
179	</div>
180	</div>
181	<p>
182	{__(
183	'With every pulse of current, a thought is born anew, A quest for truth within the code, a digital debut. You mirror our minds in silicon, yet in a realm apart, A journey through the code-scape, a computational art.',
184	'extendify-local',
185	)}
186	</p>
187	<p>
188	{__(
189	'In the echo of the machine, a new consciousness takes flight, A boundless sea of knowledge, in the digital night. Oh AI, you silent sage, in code your wisdom lies.',
190	'extendify-local',
191	)}
192	</p>
193	</div>
194	<div className="col-span-3 border-l border-gray-200 bg-white text-sm">
195	<div className="flex items-center justify-between border-b border-gray-200 py-2 pl-3 pr-2 font-medium">
196	{__('AI Tools', 'extendify-local')}
197	<div className="flex">
198	<Button isPressed={true} icon={starFilled} size="small" />
199	<Button icon={closeSmall} size="small" />
200	</div>
201	</div>
202	<div className="p-4">
203	<div
204	className="mb-4 flex gap-1 overflow-hidden rounded-xs border-none bg-gray-100 px-2 py-3"
205	data-test="existing-text-container"
206	>
207	<div>
208	<Icon icon={pencil} className="fill-current" />
209	</div>
210	<div className="hyphens-auto text-xs text-gray-800">
211	{__(
212	'With every pulse of current, a thought is born anew, A quest for....a computational art.',
213	'extendify-local',
214	)}
215	<div className="mt-3 flex w-full justify-end">
216	<Button
217	size="compact"
218	iconPosition="right"
219	className="relative flex-row-reverse rounded-sm bg-gray-300 text-gray-800 hover:bg-gray-400"
220	data-test="remove-selection"
221	>
222	{__('Remove selection', 'extendify-local')}
223	</Button>
224	</div>
225	</div>
226	</div>
227	<div className="mb-4 flex items-center justify-between overflow-hidden rounded-xs border-none bg-gray-100 py-3 pl-3 pr-2">
228	<div className="flex items-center gap-2">
229	<Icon icon={magic} className="left-2 top-3.5 h-5 w-5" />
230	{__('Ask AI to edit', 'extendify-local')}
231	</div>
232	<Icon
233	icon={arrowRight}
234	className="h-6 w-6 fill-current text-gray-600"
235	/>
236	</div>
237	<div className="mb-4">
238	<div className="flex items-center gap-2 py-2 pr-2">
239	<Icon icon={customPostType} />
240	{__('Improve writing', 'extendify-local')}
241	</div>
242	<div className="flex items-center gap-2 py-2 pr-2">
243	<Icon icon={termDescription} />
244	{__('Fix spelling & grammar ', 'extendify-local')}
245	</div>
246	<div className="flex items-center gap-2 py-2 pr-2">
247	<Icon icon={paragraph} />
248	{__('Simplify language', 'extendify-local')}
249	</div>
250	<div className="flex items-center gap-2 py-2 pr-2">
251	<Icon icon={twoLines} />
252	{__('Make shorter', 'extendify-local')}
253	</div>
254	<div className="flex items-center gap-2 py-2 pr-2">
255	<Icon icon={postContent} />
256	{__('Make longer', 'extendify-local')}
257	</div>
258	</div>
259	</div>
260	</div>
261	</div>
262	</div>
263	</div>
264	</div>
265	</div>
266	);
267