code-snippets / js / components / WelcomeMenu / WelcomeMenu.tsx

WelcomeMenu.tsx in Code Snippets trunk, at js/components/WelcomeMenu/WelcomeMenu.tsx

124 lines 3.4 KB

Raw Download Zip

1	import { __, sprintf } from '@wordpress/i18n'
2	import React, { useState } from 'react'
3	import { ScreenMetaSlot } from '../common/ScreenMetaSlot'
4	import { Toolbar } from '../common/Toolbar'
5	import { Changelog } from './Changelog'
6	import type { ImageLinkSchema } from '../../types/schema/WelcomeSchema'
7
8	const DATA = window.CODE_SNIPPETS_WELCOME
9
10	const HeroImage = () => {
11	const [isImageLoaded, setImageLoaded] = useState(false)
12
13	return (
14	<div className="code-snippets-hero">
15	<div className="code-snippets-header-wrapper">
16	<h2>{DATA?.hero.name}</h2>
17	<a
18	className="button button-primary button-large"
19	href={DATA?.hero.follow_url}
20	target="_blank"
21	rel="noopener noreferrer"
22	>
23	{__('Read more', 'code-snippets')}
24	<span className="screen-reader-text">
25	{__('(opens in a new tab)', 'code-snippets')}
26	</span>
27	</a>
28	</div>
29	<figure>
30	{!isImageLoaded && <div className="code-snippets-loading-spinner" aria-hidden="true"></div>}
31	<img
32	src={DATA?.hero.image_url}
33	alt={__('Latest news image', 'code-snippets')}
34	onLoad={() => setImageLoaded(true)}
35	/>
36	</figure>
37	</div>
38	)
39	}
40
41	interface PartnersProps {
42	partners: ImageLinkSchema[]
43	}
44
45	const Partners: React.FC<PartnersProps> = ({ partners }) =>
46	<>
47	<h2>{__('Exclusive deals from our partners', 'code-snippets')}</h2>
48	<ul className="code-snippets-partners">
49	{partners.map(({ title, follow_url, image_url }) =>
50	<li key={title} className="code-snippets-card">
51	<figure>
52	<img src={image_url} alt={__('Partner image', 'code-snippets')} />
53	</figure>
54	<div className="code-snippets-header-wrapper">
55	<h3>{title}</h3>
56	<a
57	href={follow_url}
58	target="_blank"
59	rel="noopener noreferrer"
60	aria-label={sprintf(
61	/* translators: %s: partner name. */
62	__('Visit %s (opens in a new tab)', 'code-snippets'),
63	title
64	)}
65	>
66	{__('Visit', 'code-snippets')}
67	</a>
68	</div>
69	</li>)}
70	</ul>
71	</>
72
73	interface ArticlesProps {
74	articles: ImageLinkSchema[]
75	}
76
77	const Articles: React.FC<ArticlesProps> = ({ articles }) =>
78	<>
79	<h2>{__('Helpful articles', 'code-snippets')}</h2>
80	<ul className="code-snippets-articles">
81	{articles.map(({ title, follow_url, image_url, description, category }) =>
82	<li key={title} className="code-snippets-card">
83	<figure>
84	<img src={image_url} alt={__('Feature image', 'code-snippets')} />
85	</figure>
86	<div className="code-snippets-header-wrapper">
87	<p className="item-category">{category}</p>
88	<h3>{title}</h3>
89	<p className="item-description">{description}</p>
90	<a href={follow_url} className="button button-secondary" target="_blank" rel="noopener noreferrer">
91	{__('Read more', 'code-snippets')}
92	<span className="screen-reader-text">
93	{__('(opens in a new tab)', 'code-snippets')}
94	</span>
95	</a>
96	</div>
97	</li>)}
98	</ul>
99	</>
100
101	export const WelcomeMenu = () =>
102	<>
103	<Toolbar />
104
105	<ScreenMetaSlot />
106
107	<div className="snippets-page-header">
108	<h1>{__('Resources and Updates', 'code-snippets')}</h1>
109	</div>
110
111	<hr className="wp-header-end" />
112
113	<div className="code-snippets-welcome">
114
115	<div className="code-snippets-updates">
116	<HeroImage />
117	<Changelog />
118	</div>
119
120	{DATA?.features && <Articles articles={DATA.features} />}
121	{DATA?.partners && <Partners partners={DATA.partners} />}
122	</div>
123	</>
124