Update div tags to main tags (reactplay#579)

Co-authored-by: Koustov <[email protected]>
samvardhan777 · Oct 14, 2022 · 4a931fb · 4a931fb
1 parent 94efb67
commit 4a931fb
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 95 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,10 +3,10 @@ import { Outlet } from "react-router-dom";
 
 function App() {
  return (
- <div className="app-body">
+ <main className="app-body">
  <Outlet />
- </div>
- );
+ </main>
+ )
 }
 
 export default App;
diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
@@ -54,36 +54,25 @@ const Home = () => {
  const tweetLoadHandler = () => setTweetsLoading(false);
 
  return (
- <div>
+ <main>
  <section className="app-home-body">
  <div className="home-bg-graphics">
  <Flower className="home-bg-graphics-sm" />
  <Flower className="home-bg-graphics-rg" />
  <Flower className="home-bg-graphics-lg" />
  </div>
- <div className="app-home-body-content">
- {!process.env.REACT_APP_ACTIVITIES_ON ? (
- <DefaultBanner />
- ) : (
- <HackathonBanner />
- )}
- </div>
+ <div className="app-home-body-content">{!process.env.REACT_APP_ACTIVITIES_ON ? <DefaultBanner /> : <HackathonBanner />}</div>
  </section>
  <section className="home-features">
  <ul className="list-home-features">
  <li className="home-features-item">
  <div className="item-icon">
- <RiSlideshow4Line
- className="icon"
- color="var(--color-neutral-90)"
- />
+ <RiSlideshow4Line className="icon" color="var(--color-neutral-90)" />
  </div>
  <h3 className="item-title">Learn </h3>
  <p className="item-desc">
- Learn how to "Think in React" and build applications inspired by
- several plays(source code & demos). Get to the source code of it,
- find related article, or even a YouTube video. Learn from the
- expert code reviews.
+ Learn how to "Think in React" and build applications inspired by several plays(source code & demos). Get to the source code of
+ it, find related article, or even a YouTube video. Learn from the expert code reviews.
  </p>
  </li>
  <li className="home-features-item">
@@ -92,10 +81,8 @@ const Home = () => {
  </div>
  <h3 className="item-title">Create </h3>
  <p className="item-desc">
- Create your own plays and own them by following a few simple
- steps. Learned something new? Perfect to present as a play. You
- can also contribute to the existing plays. Your play will be
- reviewed by the experts before being made public.
+ Create your own plays and own them by following a few simple steps. Learned something new? Perfect to present as a play. You
+ can also contribute to the existing plays. Your play will be reviewed by the experts before being made public.
  </p>
  </li>
  <li className="home-features-item">
@@ -104,19 +91,13 @@ const Home = () => {
  </div>
  <h3 className="item-title">Socialize </h3>
  <p className="item-desc">
- Share your plays with the community. The best way of building in
- public is by sharing the learning. You can share your plays on
- social media platforms like Facebook, Twitter, LinkedIn, to name a
- few, just with a single click.
+ Share your plays with the community. The best way of building in public is by sharing the learning. You can share your plays
+ on social media platforms like Facebook, Twitter, LinkedIn, to name a few, just with a single click.
  </p>
  </li>
  </ul>
  <div className="home-ideas">
- <FaLightbulb
- className="icon"
- color="var(--color-brand-primary)"
- size="48px"
- />
+ <FaLightbulb className="icon" color="var(--color-brand-primary)" size="48px" />
  <p className="ideas-lead">Not sure how to get started?</p>
  <p className="ideas-title">We have got lot of ideas</p>
  <Link to="/ideas" className="home-anchor">
@@ -134,30 +115,25 @@ const Home = () => {
  </section>
  <section className="home-tweets">
  <h3 className="title-primary">
- What Our{" "}
+ What Our{' '}
  <strong>
  <span>Community</span>
- </strong>{" "}
+ </strong>{' '}
  Says!
  </h3>
 
  {isTweetsLoading && <Spinner />}
- <div
- className={
- isTweetsLoading ? "tweets-container" : "tweets-container active"
- }
- data-testid="tweet-container"
- >
- {tweetIdArray.map((id) => (
+ <div className={isTweetsLoading ? 'tweets-container' : 'tweets-container active'} data-testid="tweet-container">
+ {tweetIdArray.map(id => (
  <Tweet
  key={id}
  tweetId={id}
  onLoad={tweetLoadHandler}
  options={{
- width: "410",
- conversation: "none",
- cards: "hidden",
- align: "center",
+ width: '410',
+ conversation: 'none',
+ cards: 'hidden',
+ align: 'center',
  }}
  />
  ))}
@@ -167,8 +143,8 @@ const Home = () => {
  <Contributors />
  </section>
  <ExtendedFooter />
- </div>
- );
+ </main>
+ )
 };
 
 export default Home;
diff --git a/src/common/playideas/PlayIdeas.jsx b/src/common/playideas/PlayIdeas.jsx
@@ -55,7 +55,7 @@ const PlayIdeas = () => {
  };
 
  return (
- <div className="app-body app-body-overflow-hidden">
+ <main className="app-body app-body-overflow-hidden">
  <div className="playideas-container">
  <div className="playideas-header">
  <div>
@@ -64,8 +64,8 @@ const PlayIdeas = () => {
  <span className="header-title-badge">{filteredIdeas.length}</span>
  </h3>
  <p className="header-desc">
- Looking for project ideas to practice React? Great, you have
- landed on the right place. Here are some ideas to get you started.
+ Looking for project ideas to practice React? Great, you have landed on the right place. Here are some ideas to get you
+ started.
  </p>
  </div>
  <div className="playideas-levels-pills">
@@ -84,14 +84,7 @@ const PlayIdeas = () => {
  </label>
  </div>
  <div className="level-pill">
- <input
- type="radio"
- name="level"
- value="Beginner"
- id="beginner-id"
- className="level-pill-control"
- onChange={onValueChange}
- />
+ <input type="radio" name="level" value="Beginner" id="beginner-id" className="level-pill-control" onChange={onValueChange} />
  <label htmlFor="beginner-id" className="level-pill-label">
  BEGINNER
  </label>
@@ -110,14 +103,7 @@ const PlayIdeas = () => {
  </label>
  </div>
  <div className="level-pill">
- <input
- type="radio"
- name="level"
- value="Advanced"
- id="advanced-id"
- className="level-pill-control"
- onChange={onValueChange}
- />
+ <input type="radio" name="level" value="Advanced" id="advanced-id" className="level-pill-control" onChange={onValueChange} />
  <label htmlFor="advanced-id" className="level-pill-label">
  ADVANCED
  </label>
@@ -126,23 +112,19 @@ const PlayIdeas = () => {
  </div>
  <div className="playideas-body">
  <ul className="list-playideas">
- {filteredIdeas.map((idea) => (
+ {filteredIdeas.map(idea => (
  <li className="list-playideas-item" key={idea.id}>
  <h4 className="idea-title">{idea.title}</h4>
  <p className="idea-desc">{idea.description}</p>
  <p className="idea-level">
  <LevelBadge level={idea.level} />
  </p>
  <div className="idea-actions">
- {process.env.NODE_ENV === "development" ? (
- <a
- href="/plays/create"
- rel="noopener noreferrer"
- className="btn-primary action-btn"
- >
+ {process.env.NODE_ENV === 'development' ? (
+ <a href="/plays/create" rel="noopener noreferrer" className="btn-primary action-btn">
  <IoAddSharp className="icon" />
-  <span className="btn-label">Create</span>
-  <span className="create-button-badge">beta</span>
+ <span className="btn-label">Create</span>
+ <span className="create-button-badge">beta</span>
  </a>
  ) : (
  <a
@@ -170,8 +152,8 @@ const PlayIdeas = () => {
  </ul>
  </div>
  </div>
- </div>
- );
+ </main>
+ )
 };
 
 export default PlayIdeas;
diff --git a/src/common/techstack/TechStacks.jsx b/src/common/techstack/TechStacks.jsx
@@ -2,28 +2,20 @@ import { TechStackInfo } from "./TechStackInfo";
 
 const TechStack = () => {
  return (
- <div className="app-body">
- <h2 className="section-title text-center pt-8 mt-48">
- ReactPlay is proudly powered by
- </h2>
+ <main className="app-body">
+ <h2 className="section-title text-center pt-8 mt-48">ReactPlay is proudly powered by</h2>
  <div className="list-brand-tech-stack">
  {/* <div className='md:w-[800px] 2xl:w-[1000px] w-full flex flex-wrap m-8'> */}
  {TechStackInfo.map((Item, idx) => {
- if (Item.type === "icon") {
+ if (Item.type === 'icon') {
  return (
- <a
- key={idx}
- target="_blank"
- rel="noreferrer"
- href={Item.link}
- className="brand-tech-stack"
- >
+ <a key={idx} target="_blank" rel="noreferrer" href={Item.link} className="brand-tech-stack">
  {/* eslint-disable-next-line react/jsx-pascal-case */}
  <Item.comp size="80" className="icon" />
  <p>{Item.text}</p>
  </a>
- );
- } else if (Item.type === "image") {
+ )
+ } else if (Item.type === 'image') {
  return (
  <a
  key={idx}
@@ -35,14 +27,14 @@ const TechStack = () => {
  <img src={Item.comp} alt={Item.comp} className="image"/>
  <p className="text-center">{Item.text}</p>
  </a>
- );
+ )
  } else {
- return null;
+ return null
  }
  })}
  </div>
- </div>
- );
+ </main>
+ )
 };
 
 export default TechStack;