Replace all classnames with class

This commit is contained in:
2018-11-18 21:05:35 +05:30
parent b583bbc87d
commit 534f920d70
6 changed files with 29 additions and 29 deletions
+1 -1
View File
@@ -35,7 +35,7 @@ class App {
render() { render() {
return ( return (
` `
<div className="App"> <div class="App">
${ ${
Header() Header()
} }
+2 -2
View File
@@ -5,8 +5,8 @@ import './categories.css';
function Categories(props) { function Categories(props) {
return ( return (
` `
<div className="categories-wrapper"> <div class="categories-wrapper">
<div className="categories-inner"> <div class="categories-inner">
${ ${
props.categories.map((category) => ( props.categories.map((category) => (
CategoryCard({ CategoryCard({
+6 -6
View File
@@ -11,17 +11,17 @@ function toTitleCase(str) {
export default function CategoryCard(props) { export default function CategoryCard(props) {
return ( return (
` `
<div className="category-card" > <div class="category-card" >
<div className="category-card-left"> <div class="category-card-left">
<img className="category-card-image" src=${props.category.image} alt=${props.category.name} /> <img class="category-card-image" src=${props.category.image} alt=${props.category.name} />
</div> </div>
<div className="category-card-right"> <div class="category-card-right">
<div className="category-card-title"> <div class="category-card-title">
${ ${
toTitleCase(props.category.name) toTitleCase(props.category.name)
} }
</div> </div>
<div className="category-card-subtitle"> <div class="category-card-subtitle">
${ ${
`${props.category.restaurants} Resturants` `${props.category.restaurants} Resturants`
} }
+3 -3
View File
@@ -10,11 +10,11 @@ export default function Header() {
headerCSS headerCSS
} }
</style> </style>
<div className="header-row"> <div class="header-row">
<div className="header-text"> <div class="header-text">
What would you like to eat? What would you like to eat?
</div> </div>
<span className="header-icon-notification mdi mdi-bell-outline"> <span class="header-icon-notification mdi mdi-bell-outline">
</span> </span>
</div> </div>
` `
+16 -16
View File
@@ -11,48 +11,48 @@ function toTitleCase(str) {
export default function RecipeCard(props) { export default function RecipeCard(props) {
return ( return (
` `
<div className="recipe-card" > <div class="recipe-card" >
<div className="recipe-card-top"> <div class="recipe-card-top">
<img className="recipe-card-image" src=${props.recipe.image} alt=${props.recipe.name} /> <img class="recipe-card-image" src=${props.recipe.image} alt=${props.recipe.name} />
</div> </div>
<div className="recipe-card-bottom"> <div class="recipe-card-bottom">
<div className="recipe-card-desc"> <div class="recipe-card-desc">
<div className="recipe-card-logo-wrapper"> <div class="recipe-card-logo-wrapper">
<img className="recipe-card-logo" src=${props.recipe.icon} alt=${props.recipe.name} /> <img class="recipe-card-logo" src=${props.recipe.icon} alt=${props.recipe.name} />
</div> </div>
<div className="recipe-card-title-container"> <div class="recipe-card-title-container">
<div className="recipe-card-title"> <div class="recipe-card-title">
${ ${
toTitleCase(props.recipe.name) toTitleCase(props.recipe.name)
} }
</div> </div>
<div className="recipe-card-rating"> <div class="recipe-card-rating">
${ ${
new Array(props.recipe.rating).map(_useless => ( new Array(props.recipe.rating).map(_useless => (
` `
<div className="recipe-card-star"> <div class="recipe-card-star">
</div> </div>
` `
)) ))
} }
</div> </div>
</div> </div>
<div className="recipe-card-price"> <div class="recipe-card-price">
<div className="recipe-card-price-number"> <div class="recipe-card-price-number">
${ ${
`$${props.recipe.price}` `$${props.recipe.price}`
} }
</div> </div>
<div className="recipe-card-price-suffix"> <div class="recipe-card-price-suffix">
Min Order Min Order
</div> </div>
</div> </div>
</div> </div>
<div className="recipe-card-tags"> <div class="recipe-card-tags">
${ ${
props.recipe.tags.map(tag => ( props.recipe.tags.map(tag => (
` `
<div className="recipe-card-tag"> <div class="recipe-card-tag">
${ ${
toTitleCase(tag) toTitleCase(tag)
} }
+1 -1
View File
@@ -5,7 +5,7 @@ import './recipes.css';
function Recipes(props) { function Recipes(props) {
return ( return (
` `
<div className="recipes-wrapper"> <div class="recipes-wrapper">
${ ${
props.recipes.map((recipe) => ( props.recipes.map((recipe) => (
RecipeCard({ RecipeCard({