React components for a filterable bar menu. See an example.
Install with npm and then use the component, which renders a menu based on the configuration. Assumes that you are using theme-ui, which is where you style the page by selecting font, color, etc.
import { BarMenu } from 'bar-menu'
<BarMenu
title={'name'}
sections={sections}
cocktails={cocktails}
welcome={'welcome text'}
/>Where cocktails is an array of recipes schematized as in the following example:
{
name: 'Americano',
family: 'highball',
keywords: ['vermouth', 'campari', 'seltzer'],
ingredients: [
{
value: 'Carpano Antica Formula vermouth',
amount: { value: 1, units: 'oz' },
},
{
value: 'Campari',
amount: { value: 1, units: 'oz' },
},
{
value: 'Topo Chico',
amount: { value: 4, units: 'oz' },
},
],
recipe:
'Stir once with three ice cubes in a tall glass. Place an orange wedge in the drink.',
glass: 'tall glass',
origin: ['Classic']
}And sections is a list of named menu sections each including a list of drinks
[
{
name: 'Spritzes',
description: 'Light and refreshing',
contents: [
'Americano',
...
],
},
]See a full example.
This component assume that you are using theme-ui, which is where you style the page by selecting font, color, etc. Here are a couple examples of differently styled pages.
