mirror of
https://github.com/bendtherules/food-app.git
synced 2026-08-18 13:52:09 +00:00
Replace all classnames with class
This commit is contained in:
+1
-1
@@ -35,7 +35,7 @@ class App {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
`
|
`
|
||||||
<div className="App">
|
<div class="App">
|
||||||
${
|
${
|
||||||
Header()
|
Header()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
@@ -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`
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
`
|
`
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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({
|
||||||
|
|||||||
Reference in New Issue
Block a user