From f08687cd7590e52c8acef8e22874ef8b2911438d Mon Sep 17 00:00:00 2001 From: Nat Alison <1278991+tesseralis@users.noreply.github.com> Date: Fri, 3 Jul 2020 00:35:43 -0700 Subject: [PATCH] refactor(www): Make easy-to-convert class components into function components (#25489) * Convert class components to function components * Convert class components to function components * Convert class components to function components * fix * fix --- www/src/components/plugin-searchbar-body.js | 200 ++++++----- www/src/components/stub-list.js | 90 +++-- www/src/pages/creators/agencies.js | 11 +- www/src/pages/creators/companies.js | 11 +- www/src/pages/creators/index.js | 9 +- www/src/pages/creators/people.js | 11 +- www/src/pages/ecosystem.js | 73 ++-- www/src/pages/features.js | 63 ++-- www/src/pages/plugins.js | 216 ++++++------ www/src/pages/showcase.js | 13 +- www/src/pages/starters.js | 13 +- www/src/templates/template-blog-list.js | 138 ++++---- www/src/templates/template-blog-post.js | 295 ++++++++-------- www/src/templates/template-creator-details.js | 315 +++++++++--------- .../templates/template-feature-comparison.js | 101 +++--- www/src/views/creators/creators-header.js | 114 +++---- 16 files changed, 782 insertions(+), 891 deletions(-) diff --git a/www/src/components/plugin-searchbar-body.js b/www/src/components/plugin-searchbar-body.js index 3618a1f99efb8..1d321dd78defb 100644 --- a/www/src/components/plugin-searchbar-body.js +++ b/www/src/components/plugin-searchbar-body.js @@ -197,128 +197,122 @@ const searchBoxStyles = t => css` /* stylelint-enable */ // Search shows a list of "hits", and is a child of the PluginSearchBar component -class Search extends Component { - render() { - return ( -
+function Search({ pathname, query }) { + return ( +
+
+ + +
+ + + items.map(({ count, ...item }) => { + return { + ...item, + count: count || 0, + } + }) + } + defaultRefinement={[`gatsby-component`, `gatsby-plugin`]} + /> + +
+
- - -
- - - items.map(({ count, ...item }) => { - return { - ...item, - count: count || 0, - } - }) - } - defaultRefinement={[`gatsby-component`, `gatsby-plugin`]} - /> - -
- -
- - -
-
- -
-
- `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`, - overflowY: `scroll`, + - ( - - )} - /> -
+ /> +
+
+
+ `calc(100vh - ${t.sizes.headerHeight} - ${t.sizes.bannerHeight} - ${searchInputHeight} - ${searchInputWrapperMargin} - ${searchMetaHeight})`, + overflowY: `scroll`, + }, }} > - ( + + )} + /> +
+
+ +
+ - Algolia - -
+ }, + }} + > + Algolia +
- ) - } +
+ ) } // the result component is fed into the InfiniteHits component diff --git a/www/src/components/stub-list.js b/www/src/components/stub-list.js index 915b5e3b4f5ad..fa5a24f4f45ed 100644 --- a/www/src/components/stub-list.js +++ b/www/src/components/stub-list.js @@ -17,58 +17,54 @@ const flatten = pages => [] ) -class StubList extends React.Component { - render() { - const stubs = findStubs( - flatten([...itemListContributing.items, ...itemListDocs.items]) - ) - - let groupedStubs = {} +export default function StubList() { + const stubs = findStubs( + flatten([...itemListContributing.items, ...itemListDocs.items]) + ) - stubs.forEach(stub => { - let categoryTitle = stub.parentTitle || `Top Level Documentation Pages` + let groupedStubs = {} - if (groupedStubs[categoryTitle] === undefined) { - groupedStubs[categoryTitle] = [] - } - groupedStubs[categoryTitle].push(stub) - }) + stubs.forEach(stub => { + let categoryTitle = stub.parentTitle || `Top Level Documentation Pages` - let sortedCategories = Object.keys(groupedStubs).sort((a, b) => - a.localeCompare(b) - ) + if (groupedStubs[categoryTitle] === undefined) { + groupedStubs[categoryTitle] = [] + } + groupedStubs[categoryTitle].push(stub) + }) - // Put top level at the front of the array if it isn't empty - sortedCategories.splice( - sortedCategories.indexOf(`Top Level Documentation Pages`), - 1 - ) + let sortedCategories = Object.keys(groupedStubs).sort((a, b) => + a.localeCompare(b) + ) - if (groupedStubs[`Top Level Documentation Pages`]) { - sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories] - } + // Put top level at the front of the array if it isn't empty + sortedCategories.splice( + sortedCategories.indexOf(`Top Level Documentation Pages`), + 1 + ) - return ( -
- {sortedCategories.map(category => { - let categoryTitle = - category.slice(-1) === `*` ? category.slice(0, -1) : category - return ( - -

{categoryTitle}

- - - ) - })} -
- ) + if (groupedStubs[`Top Level Documentation Pages`]) { + sortedCategories = [`Top Level Documentation Pages`, ...sortedCategories] } -} -export default StubList + return ( +
+ {sortedCategories.map(category => { + let categoryTitle = + category.slice(-1) === `*` ? category.slice(0, -1) : category + return ( + +

{categoryTitle}

+ + + ) + })} +
+ ) +} diff --git a/www/src/pages/creators/agencies.js b/www/src/pages/creators/agencies.js index 931a383928990..4301e47d0cc74 100644 --- a/www/src/pages/creators/agencies.js +++ b/www/src/pages/creators/agencies.js @@ -1,16 +1,11 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import CreatorsView from "../../views/creators" -class AgenciesPage extends Component { - render() { - const { location, data } = this.props - return - } +export default function AgenciesPage({ location, data }) { + return } -export default AgenciesPage - export const pageQuery = graphql` query { allCreatorsYaml(filter: { type: { eq: "agency" } }) { diff --git a/www/src/pages/creators/companies.js b/www/src/pages/creators/companies.js index bf14e24e145cb..8a9ac530018d8 100644 --- a/www/src/pages/creators/companies.js +++ b/www/src/pages/creators/companies.js @@ -1,16 +1,11 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import CreatorsView from "../../views/creators" -class CompaniesPage extends Component { - render() { - const { location, data } = this.props - return - } +export default function CompaniesPage({ location, data }) { + return } -export default CompaniesPage - export const pageQuery = graphql` query { allCreatorsYaml(filter: { type: { eq: "company" } }) { diff --git a/www/src/pages/creators/index.js b/www/src/pages/creators/index.js index d74f8f1be64bc..7734cdff77d16 100644 --- a/www/src/pages/creators/index.js +++ b/www/src/pages/creators/index.js @@ -1,12 +1,9 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import CreatorsView from "../../views/creators" -class CreatorsPage extends Component { - render() { - const { location, data } = this.props - return - } +export function CreatorsPage({ location, data }) { + return } export default CreatorsPage diff --git a/www/src/pages/creators/people.js b/www/src/pages/creators/people.js index 6138eaaefd6a2..5cc973e81be6d 100644 --- a/www/src/pages/creators/people.js +++ b/www/src/pages/creators/people.js @@ -1,16 +1,11 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import CreatorsView from "../../views/creators" -class PeoplePage extends Component { - render() { - const { location, data } = this.props - return - } +export default function PeoplePage({ location, data }) { + return } -export default PeoplePage - export const pageQuery = graphql` query { allCreatorsYaml(filter: { type: { eq: "individual" } }) { diff --git a/www/src/pages/ecosystem.js b/www/src/pages/ecosystem.js index c5b5e816386e4..7b9df49828800 100644 --- a/www/src/pages/ecosystem.js +++ b/www/src/pages/ecosystem.js @@ -1,4 +1,4 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout/layout-with-heading" @@ -8,57 +8,40 @@ import FooterLinks from "../components/shared/footer-links" import { EcosystemIcon } from "../assets/icons" -class EcosystemPage extends Component { - render() { - const { - location, - data: { - allStartersYaml: { nodes: startersData }, - allNpmPackage: { nodes: pluginsData }, - }, - } = this.props +export default function EcosystemPage({ location, data }) { + const startersData = data.allStartersYaml.nodes + const pluginsData = data.allNpmPackage.nodes - const starters = startersData.map(item => { - const { - fields: { - starterShowcase: { slug, name, description, stars }, - }, - childScreenshot: { - screenshotFile: { - childImageSharp: { fixed: thumbnail }, - }, - }, - } = item + const starters = startersData.map(item => { + const { slug, name, description, stars } = item.fields.starterShowcase + const thumbnail = item.childScreenshot.screenshotFile.childImageSharp.fixed - return { - slug: `/starters${slug}`, - name, - description, - stars, - thumbnail, - } - }) + return { + slug: `/starters${slug}`, + name, + description, + stars, + thumbnail, + } + }) - const plugins = pluginsData + const plugins = pluginsData - const pageTitle = `Ecosystem` + const pageTitle = `Ecosystem` - return ( - } - > - - - - - ) - } + return ( + } + > + + + + + ) } -export default EcosystemPage - export const ecosystemQuery = graphql` query EcosystemQuery { allStartersYaml( diff --git a/www/src/pages/features.js b/www/src/pages/features.js index a3f814949cf14..5156778e10137 100644 --- a/www/src/pages/features.js +++ b/www/src/pages/features.js @@ -1,6 +1,5 @@ /** @jsx jsx */ import { jsx } from "theme-ui" -import { Component } from "react" import { graphql } from "gatsby" import Button from "../components/button" @@ -101,41 +100,37 @@ const FeaturesHeader = () => ( ) -class FeaturesPage extends Component { - render() { - return ( - - - -
- - - -
- - - - ) - } +export default function FeaturesPage({ location, data }) { + return ( + + + +
+ + + +
+ + + + ) } -export default FeaturesPage - export const pageQuery = graphql` query { allGatsbyFeaturesSpecsCsv { diff --git a/www/src/pages/plugins.js b/www/src/pages/plugins.js index 942fdd8ed5af1..0fee414d22af3 100644 --- a/www/src/pages/plugins.js +++ b/www/src/pages/plugins.js @@ -1,6 +1,5 @@ /** @jsx jsx */ import { jsx } from "theme-ui" -import React, { Component } from "react" import Container from "../components/container" import Rotator from "../components/rotator" @@ -11,121 +10,116 @@ import FooterLinks from "../components/shared/footer-links" import PageMetadata from "../components/page-metadata" import PageWithPluginSearchBar from "../components/page-with-plugin-searchbar" -class Plugins extends Component { - render() { - const { location } = this.props - return ( - - - + + +
-
t.space[12], + width: t => t.space[12], + mx: `auto`, + }} + alt="" + /> +

- t.space[12], - width: t => t.space[12], - mx: `auto`, - }} - alt="" - /> -

- Welcome to the Gatsby Plugin Library! -

- + Welcome to the Gatsby Plugin Library! + + -

- Please use the search bar to find plugins that will make your - blazing fast site even more awesome. If you - {`'`}d like to create your own plugin, see the - {` `} - Plugin Authoring page in - the docs! To learn more about Gatsby plugins, visit the - {` `} - plugins doc page. -

-
- - - - ) - } +

+ Please use the search bar to find plugins that will make your + blazing fast site even more awesome. If you + {`'`}d like to create your own plugin, see the + {` `} + Plugin Authoring page in + the docs! To learn more about Gatsby plugins, visit the + {` `} + plugins doc page. +

+
+ + + + ) } - -export default Plugins diff --git a/www/src/pages/showcase.js b/www/src/pages/showcase.js index ed6d8e021306f..3a314df8c6da2 100644 --- a/www/src/pages/showcase.js +++ b/www/src/pages/showcase.js @@ -1,19 +1,12 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import ShowcaseView from "../views/showcase" -class ShowcasePage extends Component { - render() { - const data = this.props.data - const location = this.props.location - - return - } +export default function ShowcasePage({ data, location }) { + return } -export default ShowcasePage - export const showcaseQuery = graphql` query { featured: allSitesYaml( diff --git a/www/src/pages/starters.js b/www/src/pages/starters.js index 68ee7e4dd885a..a359f7f6d4bf1 100644 --- a/www/src/pages/starters.js +++ b/www/src/pages/starters.js @@ -1,19 +1,12 @@ -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import StarterLibraryView from "../views/starter-library" -class StarterLibraryWrapper extends Component { - render() { - const data = this.props.data - const location = this.props.location - - return - } +export default function StarterLibraryWrapper({ data, location }) { + return } -export default StarterLibraryWrapper - export const showcaseQuery = graphql` query SiteShowcaseQuery { allStartersYaml(filter: { fields: { hasScreenshot: { eq: true } } }) { diff --git a/www/src/templates/template-blog-list.js b/www/src/templates/template-blog-list.js index 4cde11fe984f8..71fec5cf754c9 100644 --- a/www/src/templates/template-blog-list.js +++ b/www/src/templates/template-blog-list.js @@ -1,6 +1,5 @@ /** @jsx jsx */ import { jsx } from "theme-ui" -import React from "react" import { graphql } from "gatsby" import { TiTags as TagsIcon } from "react-icons/ti" @@ -15,86 +14,79 @@ import PageMetadata from "../components/page-metadata" import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org" import { pullIntoGutter, breakpointGutter } from "../utils/styles" -class BlogPostsIndex extends React.Component { - render() { - const { allMdx } = this.props.data - - return ( -
- - -
+ + +
`1px solid ${t.colors.ui.border}`, + mb: 6, + pb: 6, + [breakpointGutter]: { + pb: 0, + border: 0, + }, + }} + > +

Blog

+ +
+ {posts.map((node, index) => ( + `1px solid ${t.colors.ui.border}`, - mb: 6, - pb: 6, [breakpointGutter]: { - pb: 0, + p: 9, + boxShadow: `raised`, + bg: `card.background`, + borderRadius: 2, border: 0, - }, - }} - > -

Blog

- -
- {allMdx.nodes.map((node, index) => ( - - `transform ${t.transition.default}, box-shadow ${t.transition.default}, padding ${t.transition.default}`, - "&:hover": { - transform: t => `translateY(-${t.space[1]})`, - boxShadow: `overlay`, - }, - "&:active": { - boxShadow: `cardActive`, - transform: `translateY(0)`, - }, + mb: 6, + mx: 0, + transition: t => + `transform ${t.transition.default}, box-shadow ${t.transition.default}, padding ${t.transition.default}`, + "&:hover": { + transform: t => `translateY(-${t.space[1]})`, + boxShadow: `overlay`, }, - [mediaQueries.md]: { - mx: -9, + "&:active": { + boxShadow: `cardActive`, + transform: `translateY(0)`, }, - }} - /> - ))} - - - - -
- ) - } + }, + [mediaQueries.md]: { + mx: -9, + }, + }} + /> + ))} + + + + + + ) } -export default BlogPostsIndex - export const pageQuery = graphql` query blogListQuery($skip: Int!, $limit: Int!) { allMdx( diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js index 6cee9670dca4f..8af40df08905a 100644 --- a/www/src/templates/template-blog-post.js +++ b/www/src/templates/template-blog-post.js @@ -15,170 +15,161 @@ import Avatar from "../components/avatar" import PrevAndNext from "../components/prev-and-next" import FooterLinks from "../components/shared/footer-links" -class BlogPostTemplate extends React.Component { - render() { - const { - pageContext: { prev, next }, - data: { mdx: post }, - } = this.props - const BioLine = ({ children }) => ( -

- {children} -

- ) +export default function BlogPostTemplate({ pageContext, data }) { + const { prev, next } = pageContext + const post = data.mdx + const BioLine = ({ children }) => ( +

+ {children} +

+ ) - return ( - <> - - { - // TODO - // - settle on `docSearch-content` as selector to identify - // Algolia DocSearch content - // - make use of components/docsearch-content in place of
- // - // `post` and `post-body` are only in use as selectors in the - // docsearch config for gatsbyjs.org for individual blog posts: - // https://github.com/algolia/docsearch-configs/blob/89706210b62e2f384e52ca1b104f92bc0e225fff/configs/gatsbyjs.json#L71-L76 - } -
- -
-
-
- + + { + // TODO + // - settle on `docSearch-content` as selector to identify + // Algolia DocSearch content + // - make use of components/docsearch-content in place of
+ // + // `post` and `post-body` are only in use as selectors in the + // docsearch config for gatsbyjs.org for individual blog posts: + // https://github.com/algolia/docsearch-configs/blob/89706210b62e2f384e52ca1b104f92bc0e225fff/configs/gatsbyjs.json#L71-L76 + } +
+ +
+
+
+ + + +
+
+ +

- - -

-
- -

`1px solid ${t.colors.link.border}`, + transition: t => + `all ${t.transition.speed.fast} ${t.transition.curve.default}`, + "&:hover": { borderColor: `link.hoverBorder` }, }} > - - `1px solid ${t.colors.link.border}`, - transition: t => - `all ${t.transition.speed.fast} ${t.transition.curve.default}`, - "&:hover": { borderColor: `link.hoverBorder` }, - }} - > - {post.frontmatter.author.id} - -

- - {post.frontmatter.author.bio} - - {post.timeToRead} min read · {post.frontmatter.date} - {post.frontmatter.canonicalLink && ( - - {` `} - (originally published at + {post.frontmatter.author.id} + + + + {post.frontmatter.author.bio} + + {post.timeToRead} min read · {post.frontmatter.date} + {post.frontmatter.canonicalLink && ( + + {` `} + (originally published at + {` `} + + {post.fields.publishedAt} + + ) + + )} + +
+
+

+ {post.frontmatter.title} +

+ {post.frontmatter.image && + post.frontmatter.showImageInArticle !== false && ( +
+ + {post.frontmatter.imageAuthor && + post.frontmatter.imageAuthorLink && ( + + Image by {` `} - - {post.fields.publishedAt} + + {post.frontmatter.imageAuthor} - ) - + )} -
-
-

- {post.frontmatter.title} -

- {post.frontmatter.image && - post.frontmatter.showImageInArticle !== false && ( -
- - {post.frontmatter.imageAuthor && - post.frontmatter.imageAuthorLink && ( - - Image by - {` `} - - {post.frontmatter.imageAuthor} - - - )} -
- )} -
-
- {post.body} -
- - -
+ )} + +
+ {post.body} +
+ + +
+ +
`1px solid ${t.colors.ui.border}`, + mt: 9, + [mediaQueries.md]: { pt: 5 }, + [mediaQueries.lg]: { pt: 7 }, + }} + > + + -
`1px solid ${t.colors.ui.border}`, - mt: 9, - [mediaQueries.md]: { pt: 5 }, - [mediaQueries.lg]: { pt: 7 }, - }} - > - - - - -
- - ) - } + +
+ + ) } -export default BlogPostTemplate - export const pageQuery = graphql` query($slug: String!) { mdx(fields: { slug: { eq: $slug } }) { diff --git a/www/src/templates/template-creator-details.js b/www/src/templates/template-creator-details.js index c83ade33dc707..dea78b37a7aa2 100644 --- a/www/src/templates/template-creator-details.js +++ b/www/src/templates/template-creator-details.js @@ -1,6 +1,6 @@ /** @jsx jsx */ import { jsx } from "theme-ui" -import React, { Component } from "react" +import React from "react" import { graphql } from "gatsby" import Link from "../components/localized-link" import Img from "gatsby-image" @@ -58,188 +58,179 @@ const MetaSection = ({ children, background, last, first }) => ( ) -class CreatorTemplate extends Component { - render() { - const { data } = this.props - const creator = data.creatorsYaml - const isAgencyOrCompany = - creator.type === `agency` || creator.type === `company` +export default function CreatorTemplate({ data }) { + const creator = data.creatorsYaml + const isAgencyOrCompany = + creator.type === `agency` || creator.type === `company` - const sites = data.allSitesYaml.nodes + const sites = data.allSitesYaml.nodes - return ( - - - -
+ + +
+
+ {`${creator.name}`} +
+
+

{creator.name}

- {`${creator.name}`} -
-
-

{creator.name}

-
- {isAgencyOrCompany && ( - - {creator.type.charAt(0).toUpperCase() + creator.type.slice(1)} - - )} + {isAgencyOrCompany && ( + + {creator.type.charAt(0).toUpperCase() + creator.type.slice(1)} + + )} - {creator.for_hire || creator.hiring ? ( -
- - {creator.for_hire ? `Open for work` : `Hiring`} - -
- ) : null} - {creator.github && ( - + - - - )} -
-
{creator.description}
- - Get in touch + {creator.for_hire ? `Open for work` : `Hiring`} + +
+ ) : null} + {creator.github && ( - {removeProtocol(creator.website)} + - - - From -

{creator.location}

- - {creator.portfolio === true && sites.length > 0 && ( - - Worked On -
- {sites.map(site => ( - - {`${site.title}`} - - ))} -
- )}
-
- - - ) - } +
{creator.description}
+ + Get in touch + + {removeProtocol(creator.website)} + + + + From +

{creator.location}

+ + {creator.portfolio === true && sites.length > 0 && ( + + Worked On +
+ {sites.map(site => ( + + {`${site.title}`} + + ))} +
+ + )} + +
+ + + ) } -export default CreatorTemplate - export const pageQuery = graphql` query($slug: String!, $name: String!) { creatorsYaml(fields: { slug: { eq: $slug } }) { diff --git a/www/src/templates/template-feature-comparison.js b/www/src/templates/template-feature-comparison.js index f0f26aff786fc..f0975929cb079 100644 --- a/www/src/templates/template-feature-comparison.js +++ b/www/src/templates/template-feature-comparison.js @@ -1,6 +1,5 @@ /** @jsx jsx */ import { jsx } from "theme-ui" -import { Component } from "react" import { css } from "@emotion/core" import PageWithSidebar from "../components/page-with-sidebar" import PageMetadata from "../components/page-metadata" @@ -16,66 +15,58 @@ import { getFeaturesData } from "../utils/get-csv-features-data" import { graphql } from "gatsby" -class FeatureComparison extends Component { - render() { - const { - pageContext: { options, featureType }, - location, - data, - } = this.props - const optionsDisplay = options.map(o => o.display) - const titleString = `Comparison of Gatsby vs ${optionsDisplay.join(` vs `)}` +export default function FeatureComparison({ pageContext, location, data }) { + const { options, featureType } = pageContext + const optionsDisplay = options.map(o => o.display) + const titleString = `Comparison of Gatsby vs ${optionsDisplay.join(` vs `)}` - const { sections, sectionHeaders } = - featureType === `cms` - ? getFeaturesData(data.allGatsbyCmsSpecsCsv.nodes) - : getFeaturesData(data.allGatsbyJamstackSpecsCsv.nodes) + const { sections, sectionHeaders } = + featureType === `cms` + ? getFeaturesData(data.allGatsbyCmsSpecsCsv.nodes) + : getFeaturesData(data.allGatsbyJamstackSpecsCsv.nodes) - return ( - - - -
- -

{titleString}

- {options.map(o => ( -
-

+ + +
+ +

{titleString}

+ {options.map(o => ( +
+

+ - - {o.display} -

- {o.description} -
- ))} - - -
- - - - - ) - } + /> + {o.display} +

+ {o.description} +
+ ))} + + +
+ + + + + ) } -export default FeatureComparison - export const pageQuery = graphql` query { allGatsbyCmsSpecsCsv { diff --git a/www/src/views/creators/creators-header.js b/www/src/views/creators/creators-header.js index 938e962df98c9..69374ab856e0e 100644 --- a/www/src/views/creators/creators-header.js +++ b/www/src/views/creators/creators-header.js @@ -1,79 +1,75 @@ /** @jsx jsx */ import { jsx } from "theme-ui" -import { Component } from "react" import Link from "../../components/localized-link" import Button from "../../components/button" import { MdArrowForward as ArrowForwardIcon } from "react-icons/md" -class CreatorsHeader extends Component { - render() { - const { /*forHire, hiring,*/ submissionText } = this.props - return ( -
`1px solid ${t.colors.ui.border}`, +export default function CreatorsHeader({ + /*forHire, hiring, */ submissionText, +}) { + return ( +
`1px solid ${t.colors.ui.border}`, + display: `flex`, + flexDirection: `row`, + fontFamily: `heading`, + height: `headerHeight`, + px: 6, + zIndex: `2`, + }} + > +

-

- - Creators - -

+ Creators + + +
-
} > - -
+ {submissionText} +
- ) - } +
+ ) } - -export default CreatorsHeader