-
Notifications
You must be signed in to change notification settings - Fork 904
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add frame for the initial widgets * refactor routes to constant to not repeat paths
- Loading branch information
1 parent
938cc50
commit 488a5dd
Showing
7 changed files
with
170 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import PropTypes from "prop-types"; | ||
import { PageTitle } from "./page-title"; | ||
import { SeoScores } from "./seo-scores"; | ||
|
||
/** | ||
* @typedef {Object} Taxonomy A taxonomy. | ||
* @property {string} name The unique identifier. | ||
* @property {string} label The user-facing label. | ||
* @property {Object} links The links. | ||
* @property {string} [links.search] The search link, might not exist. | ||
*/ | ||
|
||
/** | ||
* @typedef {Object} ContentType A content type. | ||
* @property {string} name The unique identifier. | ||
* @property {string} label The user-facing label. | ||
* @property {Taxonomy|null} taxonomy The (main) taxonomy or null. | ||
*/ | ||
|
||
/** | ||
* @param {ContentType[]} contentTypes The content types. | ||
* @param {string} userName The user name. | ||
* @returns {JSX.Element} The element. | ||
*/ | ||
export const Dashboard = ( { contentTypes, userName } ) => { | ||
return ( | ||
<div className="yst-@container"> | ||
<PageTitle userName={ userName } /> | ||
<div className="yst-flex yst-flex-col @7xl:yst-flex-row yst-gap-6 yst-mt-6"> | ||
<SeoScores contentTypes={ contentTypes } /> | ||
<SeoScores contentTypes={ contentTypes } /> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
Dashboard.propTypes = { | ||
contentTypes: PropTypes.arrayOf( | ||
PropTypes.shape( { | ||
name: PropTypes.string.isRequired, | ||
label: PropTypes.string.isRequired, | ||
taxonomy: PropTypes.shape( { | ||
name: PropTypes.string.isRequired, | ||
label: PropTypes.string.isRequired, | ||
links: PropTypes.shape( { | ||
search: PropTypes.string, | ||
} ).isRequired, | ||
} ), | ||
} ) | ||
).isRequired, | ||
userName: PropTypes.string.isRequired, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { __, sprintf } from "@wordpress/i18n"; | ||
import { Paper, Title } from "@yoast/ui-library"; | ||
import PropTypes from "prop-types"; | ||
|
||
/** | ||
* @param {string} userName The user name. | ||
* @returns {JSX.Element} The element. | ||
*/ | ||
export const PageTitle = ( { userName } ) => ( | ||
<Paper> | ||
<Paper.Content> | ||
<Title as="h1"> | ||
{ sprintf( | ||
__( "Hi %s!", "wordpress-seo" ), | ||
userName | ||
) } | ||
</Title> | ||
<p className="yst-mt-3 yst-text-tiny"> | ||
{ __( "Welcome to your SEO dashboard! Don't forget to check it regularly to see how your site is performing and if there are any important tasks waiting for you.", "wordpress-seo" ) } | ||
</p> | ||
</Paper.Content> | ||
</Paper> | ||
); | ||
|
||
PageTitle.propTypes = { | ||
userName: PropTypes.string.isRequired, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { __ } from "@wordpress/i18n"; | ||
import { AutocompleteField, Paper, Title } from "@yoast/ui-library"; | ||
import PropTypes from "prop-types"; | ||
|
||
/** | ||
* @returns {JSX.Element} The element. | ||
*/ | ||
export const SeoScores = ( { contentTypes } ) => { // eslint-disable-line no-unused-vars | ||
return ( | ||
<Paper className="yst-@container yst-grow yst-max-w-screen-sm yst-p-8"> | ||
<Title as="h2">{ __( "SEO scores", "wordpress-seo" ) }</Title> | ||
<div className="yst-grid yst-grid-cols-1 @md:yst-grid-cols-2 yst-gap-6 yst-mt-4"> | ||
<AutocompleteField /> | ||
<AutocompleteField /> | ||
</div> | ||
<p className="yst-my-6">{ __( "description", "wordpress-seo" ) }</p> | ||
<div className="yst-grid yst-grid-cols-1 @md:yst-grid-cols-3 yst-gap-6"> | ||
<div className="yst-col-span-2">Scores</div> | ||
<div>chart</div> | ||
</div> | ||
</Paper> | ||
); | ||
}; | ||
|
||
SeoScores.propTypes = { | ||
contentTypes: PropTypes.arrayOf( | ||
PropTypes.shape( { | ||
name: PropTypes.string.isRequired, | ||
label: PropTypes.string.isRequired, | ||
taxonomy: PropTypes.shape( { | ||
name: PropTypes.string.isRequired, | ||
label: PropTypes.string.isRequired, | ||
links: PropTypes.shape( { | ||
search: PropTypes.string, | ||
} ).isRequired, | ||
} ), | ||
} ) | ||
).isRequired, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Dashboard } from "./components/dashboard"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,8 @@ | ||
export { FirstTimeConfiguration } from "./first-time-configuration"; | ||
export { AlertCenter } from "./alert-center"; | ||
|
||
export const ROUTES = { | ||
dashboard: "/", | ||
alertCenter: "/alert-center", | ||
firstTimeConfiguration: "/first-time-configuration", | ||
}; |