diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index ab6197f..eec5c27 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -2,12 +2,13 @@ import { createSignal } from 'solid-js'; import TopBar from './components/TopBar'; import DrawerMenu from './components/DrawerMenu'; +import { RecipeProvider } from './contexts/RecipeContext'; function App(props) { const [menuOpen, setMenuOpen] = createSignal(false); return ( -
+
@@ -17,7 +18,7 @@ function App(props) { -
+ ); } diff --git a/frontend/src/contexts/RecipeContext.jsx b/frontend/src/contexts/RecipeContext.jsx new file mode 100644 index 0000000..01d6723 --- /dev/null +++ b/frontend/src/contexts/RecipeContext.jsx @@ -0,0 +1,23 @@ +import { createContext, useContext } from 'solid-js'; + +import { recipeStore } from '../stores/recipeStore'; + +const RecipeContext = createContext(); + +function RecipeProvider(props) { + return ( + + {props.children} + + ); +} + +function useRecipeContext() { + return useContext(RecipeContext); +} + +export { RecipeProvider, useRecipeContext }; diff --git a/frontend/src/index.css b/frontend/src/index.css index 30016cf..cf7bac1 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -17,12 +17,8 @@ code { margin: 0 auto; } -article { - margin: 2rem; -} - -article .header { - text-align: center; +main.responsive { + padding: 2rem; } article .content { diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 9c97bbc..966bf75 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -6,7 +6,7 @@ import { render } from 'solid-js/web'; import { Router, Route } from '@solidjs/router'; -// NOTE: Ordered so local styles will override global styles. +// Local styles will override global styles. import 'beercss'; import './index.css'; diff --git a/frontend/src/pages/Recipe.jsx b/frontend/src/pages/Recipe.jsx deleted file mode 100644 index 8ecf37d..0000000 --- a/frontend/src/pages/Recipe.jsx +++ /dev/null @@ -1,114 +0,0 @@ -import './Recipe.css'; - -function Recipe() { - const recipe = { - title: 'Chicken Korma', - author: 'Izzah', - description: 'Looking for a Chicken Korma recipe that’s the real deal? This one-pot chicken korma is made in the Pakistani and North Indian way but without the fuss. All the mind-blowing flavor of korma – yet ready in much less time. After making & testing this korma for years, I’ve perfected it to the point that I can confidently call it the BEST chicken korma.', - source_url: 'https://www.teaforturmeric.com/authentic-chicken-korma/', - servings: 6, - prep_time: 15, - cook_time: 45, - ingredients: [ - '1/3 cup neutral oil', - '2 tbsp ghee, or sub more oil', - '2 (~500 g) large onions, sliced*', - '2 lbs bone-in, cut up, skinless chicken (or sub chicken thighs), cleaned and excess skin removed', - '2 bay leaves', - '1 tsp cumin seeds', - '1/8 tsp whole black peppercorns', - '3 green cardamom pods', - '5 whole cloves', - '1 1-inch cinnamon stick', - '8-10 cloves garlic, crushed', - '1 inch piece ginger, crushed', - '2 small tomatoes* (optional), quartered', - '3/4 cup plain, whole-milk yogurt', - '2 tsp coriander powder', - '1 tsp cumin powder', - '1 tsp red chili powder or to taste', - '1/2 tsp turmeric powder', - '1/2 tsp paprika powder or Kashmiri red chili powder, optional – for color', - '2 1/8 tsp salt, or to taste depending on amount of chicken', - '2-3 green chili peppers, chopped', - '1-2 black cardamom pods (optional)', - '1 piece whole mace, or sub pinch ground mace or cinnamon', - '½ tsp garam masala', - 'pinch nutmeg powder', - '1/2 tsp diluted kewra essence, or sub rose water', - '1/4 cup cilantro leaves, chopped, optional – for garnish', - '10-12 blanched almonds, for garnish', - ], - instructions: [ - 'Heat a large, heavy-bottomed pan over high heat. Once hot, add the oil and onions and sauté the onions until they are golden brown (~20-25 minutes depending on quantity). Remove the onions from the pan and transfer them to a food processor. Add tomatoes (if using) and yogurt to the food processor and process until mostly smooth.', - 'In the same pan used to brown onions, heat ghee (or oil) and add the whole spices, garlic, and ginger. Sauté for 30 seconds or until the garlic and ginger begin to darken. Add the chicken and fry it until it changes color (~5 minutes).', - 'Add the yogurt mixture to chicken along with the ground spices, salt, and green chili peppers and sauté until the mixture comes to a light simmer (~2-3 minutes).', - 'Lower the heat to medium-low, cover, and allow it to cook for 15 minutes. Uncover and stir in the black cardamom (if using), mace, garam masala, and nutmeg powder. Cover and cook again for 10 minutes.', - 'Raise the heat to high. Add 1/2 to 3/4 cup of water (depending on how thin you\'d like the curry) and bring to a boil. Lower the heat and allow chicken to simmer for another 2-3 minutes. The oil will have risen to the top. Sprinkle the kewra essence and stir. Turn off the heat and garnish with cilantro and blanched almonds.', - ], - }; - - const closeRecipe = () => { - console.warn('Not implemented yet.') - } - - return ( -
- - -
-
-

{recipe.title}

-

by {recipe.author}

- {recipe.source_url} -
-
-
- schedule - Prep: {recipe.prep_time} mins -
-
- schedule - Cook: {recipe.cook_time} mins -
-
- group - Serves: {recipe.servings} -
-
-
-

{recipe.description}

-
-
-
-
Ingredients
- - - {recipe.ingredients.map((ingredient) => ( - - - - ))} - -
{ingredient}
-
-
-
Instructions
-
    - {recipe.instructions.map((instruction) => ( -
  1. {instruction}
    2. - ))} -
-
-
-
-
- ); -} - -export default Recipe; diff --git a/frontend/src/pages/Recipe.css b/frontend/src/pages/Recipe/Recipe.css similarity index 100% rename from frontend/src/pages/Recipe.css rename to frontend/src/pages/Recipe/Recipe.css diff --git a/frontend/src/pages/Recipe/index.jsx b/frontend/src/pages/Recipe/index.jsx new file mode 100644 index 0000000..5900fb4 --- /dev/null +++ b/frontend/src/pages/Recipe/index.jsx @@ -0,0 +1,72 @@ +import './Recipe.css'; + +import { useRecipeContext } from '../../contexts/RecipeContext'; + +function Recipe() { + const { recipeStore } = useRecipeContext(); + const recipe = recipeStore.recipes[0]; + + const closeRecipe = () => { + console.warn('Not implemented yet.') + } + + return ( +
+ + +
+
+

{recipe.title}

+

by {recipe.author}

+ {recipe.source_url} +
+
+
+ schedule + Prep: {recipe.prep_time} mins +
+
+ schedule + Cook: {recipe.cook_time} mins +
+
+ group + Serves: {recipe.servings} +
+
+
+

{recipe.description}

+
+
+
+
Ingredients
+ + + {recipe.ingredients.map((ingredient) => ( + + + + ))} + +
{ingredient}
+
+
+
Instructions
+
    + {recipe.instructions.map((instruction) => ( +
  1. {instruction}
    2. + ))} +
+
+
+
+
+ ); +} + +export default Recipe; diff --git a/frontend/src/pages/Recipes.jsx b/frontend/src/pages/Recipes.jsx deleted file mode 100644 index 177800e..0000000 --- a/frontend/src/pages/Recipes.jsx +++ /dev/null @@ -1,9 +0,0 @@ -function Recipes() { - return ( -
-

RECIPES

-
- ); -} - -export default Recipes; diff --git a/frontend/src/pages/Recipes/Recipes.css b/frontend/src/pages/Recipes/Recipes.css new file mode 100644 index 0000000..7f8dd1c --- /dev/null +++ b/frontend/src/pages/Recipes/Recipes.css @@ -0,0 +1,16 @@ +.recipe-card p { + /* Multi-line truncate with webkit. + see: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */ + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.recipe-card a { + display: block; + height: 100%; + width: 100%; + text-decoration: none; +} diff --git a/frontend/src/pages/Recipes/index.jsx b/frontend/src/pages/Recipes/index.jsx new file mode 100644 index 0000000..def9a4b --- /dev/null +++ b/frontend/src/pages/Recipes/index.jsx @@ -0,0 +1,40 @@ +import { useRecipeContext } from '../../contexts/RecipeContext'; +import './Recipes.css'; + +function Recipes() { + const { recipeStore } = useRecipeContext(); + const recipes = recipeStore.recipes; + + return ( + <> +
+ search + + +
+ arrow_back + + close +
+ +
+
+ + {(recipe) => ( + + )} + +
+ + ); +} + +export default Recipes; diff --git a/frontend/src/stores/mockData.js b/frontend/src/stores/mockData.js new file mode 100644 index 0000000..111e7b1 --- /dev/null +++ b/frontend/src/stores/mockData.js @@ -0,0 +1,48 @@ +const chicken_korma = { + title: 'Chicken Korma', + author: 'Izzah', + description: 'Looking for a Chicken Korma recipe that’s the real deal? This one-pot chicken korma is made in the Pakistani and North Indian way but without the fuss. All the mind-blowing flavor of korma – yet ready in much less time. After making & testing this korma for years, I’ve perfected it to the point that I can confidently call it the BEST chicken korma.', + source_url: 'https://www.teaforturmeric.com/authentic-chicken-korma/', + servings: 6, + prep_time: 15, + cook_time: 45, + ingredients: [ + '1/3 cup neutral oil', + '2 tbsp ghee, or sub more oil', + '2 (~500 g) large onions, sliced*', + '2 lbs bone-in, cut up, skinless chicken (or sub chicken thighs), cleaned and excess skin removed', + '2 bay leaves', + '1 tsp cumin seeds', + '1/8 tsp whole black peppercorns', + '3 green cardamom pods', + '5 whole cloves', + '1 1-inch cinnamon stick', + '8-10 cloves garlic, crushed', + '1 inch piece ginger, crushed', + '2 small tomatoes* (optional), quartered', + '3/4 cup plain, whole-milk yogurt', + '2 tsp coriander powder', + '1 tsp cumin powder', + '1 tsp red chili powder or to taste', + '1/2 tsp turmeric powder', + '1/2 tsp paprika powder or Kashmiri red chili powder, optional – for color', + '2 1/8 tsp salt, or to taste depending on amount of chicken', + '2-3 green chili peppers, chopped', + '1-2 black cardamom pods (optional)', + '1 piece whole mace, or sub pinch ground mace or cinnamon', + '½ tsp garam masala', + 'pinch nutmeg powder', + '1/2 tsp diluted kewra essence, or sub rose water', + '1/4 cup cilantro leaves, chopped, optional – for garnish', + '10-12 blanched almonds, for garnish', + ], + instructions: [ + 'Heat a large, heavy-bottomed pan over high heat. Once hot, add the oil and onions and sauté the onions until they are golden brown (~20-25 minutes depending on quantity). Remove the onions from the pan and transfer them to a food processor. Add tomatoes (if using) and yogurt to the food processor and process until mostly smooth.', + 'In the same pan used to brown onions, heat ghee (or oil) and add the whole spices, garlic, and ginger. Sauté for 30 seconds or until the garlic and ginger begin to darken. Add the chicken and fry it until it changes color (~5 minutes).', + 'Add the yogurt mixture to chicken along with the ground spices, salt, and green chili peppers and sauté until the mixture comes to a light simmer (~2-3 minutes).', + 'Lower the heat to medium-low, cover, and allow it to cook for 15 minutes. Uncover and stir in the black cardamom (if using), mace, garam masala, and nutmeg powder. Cover and cook again for 10 minutes.', + 'Raise the heat to high. Add 1/2 to 3/4 cup of water (depending on how thin you\'d like the curry) and bring to a boil. Lower the heat and allow chicken to simmer for another 2-3 minutes. The oil will have risen to the top. Sprinkle the kewra essence and stir. Turn off the heat and garnish with cilantro and blanched almonds.', + ], +}; + +export { chicken_korma }; diff --git a/frontend/src/stores/recipeStore.js b/frontend/src/stores/recipeStore.js new file mode 100644 index 0000000..b2e7b10 --- /dev/null +++ b/frontend/src/stores/recipeStore.js @@ -0,0 +1,9 @@ +import { createStore } from 'solid-js/store'; + +import { chicken_korma } from './mockData'; + +const [ recipeStore, setRecipeStore ] = createStore({ + recipes: [...Array(12).keys()].map((id) => ({ ...chicken_korma, id: id + 1 }) ), +}); + +export { recipeStore, setRecipeStore };