Skip to content

Commit

Permalink
GH-50 starting work on recipe
Browse files Browse the repository at this point in the history
  • Loading branch information
@ciampo
ciampo committed Apr 21, 2020
1 parent 45511c6 commit 08b5b4c
Showing 1 changed file with 107 additions and 54 deletions.
161 changes: 107 additions & 54 deletions components/recipe/Recipe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,72 +16,125 @@ import { SanityRecipe } from '../../typings';

const RecipeMethodStep: React.FC = ({ children }) => <li>{children}</li>;

const RecipeSectionTitle: React.FC<{ text: string }> = ({ text }) => (
<h3 className="mt-6 md:mt-8 font-bold text-xl lg:text-2xl">{text}</h3>
);

type RecipeProps = {
recipe: SanityRecipe & {
_key: string;
};
};
const Recipe: React.FC<RecipeProps> = ({ recipe, ...props }) => (
<article {...props}>
<h2 className="font-bold text-2xl mt-6 lg:text-3xl">{recipe.title}</h2>
<p>{recipe.description}</p>

<dl>
<dt className="font-bold mt-2">{recipePrepTimeLabel}</dt>
<dl>
{recipe.preparationTime} {recipeTimeUnitLabel}
</dl>

<dt className="font-bold mt-2">{recipeCookTimeLabel}</dt>
<dl>
{recipe.cookingTime} {recipeTimeUnitLabel}
</dl>
<article className="oba-overflow-full-bleed-x py-16 md:py-20 xl:py-24 bg-gray-200" {...props}>
<div className="oba-content-width">
{/* Header (title / rating) */}
<header className="flex flex-col-reverse">
<h2 className="font-bold text-2xl text-center xl:text-3xl">{recipe.title}</h2>
{/* TODO: non-interactive star rating */}
</header>

<dt className="font-bold mt-2">{recipeServingsLabel}</dt>
<dt>
{recipe.servings.quantity} {recipe.servings.unit}
</dt>
</dl>
{/* Sharing */}
<div className="text-right mt-6 md:mt-8">TODO: share this recipe on [...]</div>

<h3 className="font-bold text-xl mt-4 lg:text-2xl">{recipeIngredientsSectionTitle}</h3>
<ul>
{recipe.ingredients.map((ingredient) => (
<li key={ingredient._key}>{stringifyRecipeIngredient(ingredient)}</li>
))}
</ul>
{/* Info panel (serving / prep + cooking times) */}
<section className="mt-8 md:mt-10">
<h3 className="sr-only">Recipe information (TODO: move to sanity)</h3>
<dl className="flex flex-wrap mx-auto border-gray-200 bg-white rounded-sm ">
{[
{
title: recipeServingsLabel,
quantity: recipe.servings.quantity,
unit: recipe.servings.unit,
},
{
title: recipePrepTimeLabel,
quantity: recipe.preparationTime,
unit: recipeTimeUnitLabel,
},
{
title: recipeCookTimeLabel,
quantity: recipe.cookingTime,
unit: recipeTimeUnitLabel,
},
].map(({ title, quantity, unit }, index, array) => (
<>
<dt
className={[
'pt-4 px-2 2xsm:pt-6 xsm:pt-8 xsm:px-4 md:pt-6 font-medium uppercase text-center',
index === array.length - 1 && '2xsm:border-l-2',
index > 0 && 'border-t-2 md:border-t-0 md:border-l-2',
index > 0
? // Side by side on 2xsm screen
`w-full 2xsm:w-1/2 2xsm:order-${index + 2} md:w-1/3 md:order-${index + 1}`
: // Full bleed on 2xsm screen
`w-full 2xsm:order-${index + 1} md:w-1/3 md:w-1/3 md:order-${index + 1}`,
]
.filter(Boolean)
.join(' ')}
>
{title}
</dt>
<dd
className={[
'flex items-end justify-center md:flex-col md:items-center',
'pt-1 px-2 pb-4 2xsm:pt-2 2xsm:pb-6 xsm:pt-3 xsm:px-4 xsm:pb-8 md:pt-4 md:pb-6',
index === array.length - 1 && '2xsm:border-l-2',
index > 0 && 'sm:border-l-2',
index > 0
? // Side by side on 2xsm screen
`w-full 2xsm:w-1/2 2xsm:order-${index + 2 + array.length} md:w-1/3 md:order-${
index + 1 + array.length
}`
: // Full bleed on 2xsm screen
`w-full 2xsm:order-${index + 2} md:w-1/3 md:order-${
index + 1 + array.length
}`,
]
.filter(Boolean)
.join(' ')}
>
<span className="text-3xl leading-none">{quantity}</span>
<span className="text-sm text-center ml-2 md:ml-0">{unit}</span>
</dd>
</>
))}
</dl>
</section>

<h3 className="font-bold text-xl mt-4 lg:text-2xl">{recipeMethodSectionTitle}</h3>
{/* Title and method */}
{/* {recipe.method.map(({ content, title }) => (
<>
<h4>{title}</h4>
<SimplePortableText blocks={content} />
</>
))} */}
{/* Description */}
<section className="mt-6 md:mt-8">
<RecipeSectionTitle text="Description (TODO: move to sanity)" />
<p>{recipe.description}</p>
</section>

{/* Hidden title and method */}
{/* {recipe.method.map(({ content, title }) => (
<>
<h4 className="sr-only">{title}</h4>
<SimplePortableText blocks={content} />
</>
))} */}
{/* Ingredients */}
<section className="mt-6 md:mt-8">
<RecipeSectionTitle text={recipeIngredientsSectionTitle} />
<ul>
{recipe.ingredients.map((ingredient) => (
<li key={ingredient._key}>{stringifyRecipeIngredient(ingredient)}</li>
))}
</ul>
</section>

{/* All method steps into same block */}
{/* <SimplePortableText
blocks={recipe.method.reduce((array: SanityBlock[], step) => [...array, ...step.content], [])}
/> */}
{/* Method */}
<section className="mt-6 md:mt-8">
<RecipeSectionTitle text={recipeMethodSectionTitle} />
<ol>
{recipe.method.map(({ content }) => (
<>
<SimplePortableText
customSerializers={{ container: RecipeMethodStep }}
blocks={content}
/>
</>
))}
</ol>
</section>

<ol>
{recipe.method.map(({ content }) => (
<>
<SimplePortableText
customSerializers={{ container: RecipeMethodStep }}
blocks={content}
/>
</>
))}
</ol>
{/* TODO: Rating */}
</div>
</article>
);

Expand Down

0 comments on commit 08b5b4c

Please sign in to comment.