# Nutrition library A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Salon & fitness](https://beamline.io/components/apps/salon-fitness) app. Live demo: https://beamline.io/components/nutrition-library A nutrition practice's library. Recipes: ingredients with grams and servings, nutrients per serving summed (energy, protein, carbohydrate, fat, fibre), a food without nutrient data marked and left out of the totals with a sentence; Save recipe and Log for a date are two named results; a log keeps the nutrients the recipe had when logged, so editing the recipe never rewrites it, and a log that fails after the recipe saved is retried alone (no second recipe). Handouts: each file says in positive words whether clients can view and download it, both off said as "only you see this file", a file that can't show in the app said as download only, the order set with move up and down, and what a client sees following every rule; each client has their own copy, the copies saying whose version they are and whether the client edited them, updating the original never changes a copy, and replacing an edited copy first lists the edits it would lose. ## Use it for - A nutritionist's or dietitian's recipes, logged into a client's journal by date. - Handouts shared with clients as their own copies, with who can view and download each file. ## Not for - A client's own journal of meals and goals ([client-journal](https://beamline.io/components/client-journal)). - A protocol of foods and supplements ([protocol-builder](https://beamline.io/components/protocol-builder)). - General file storage ([file-manager](https://beamline.io/components/file-manager)). ## Anatomy - header: the product's mark and title; tabs Recipes and Handouts - recipes: the recipes; the open recipe as a card: its name (changed in place) and servings, each ingredient's food (changed from a pencil), grams (read as text, changed in place) and its energy per serving as a bar split by protein, carbohydrate and fat (no data hatched), remove, Add an ingredient, Save recipe while changed; beside it a serving's nutrients (energy large, the energy split, each macronutrient with its share) with what was left out; logging in the client's journal: meal, date, servings eaten, Log for this date (or Save the recipe and log it, or Try logging again), the entries logged with their numbers as they were - handouts: each file with its format and version, Clients can view, Clients can download, move up and down, download only said, only you said; the open file's client copies with their version, edits and Replace; what a client sees ## States - recipe: changed, saving, saved (entries keep their numbers), refused (kept); a food without data - log: logging, logged, refused, refused after the recipe saved (retry logs only) - file: viewable and downloadable, download only (can't show inline), view only, only you; a rule refused (put back) - copy: up to date, behind, edited by the client; replacing (edits listed first), replaced, refused - phone: one column; the ingredients keep their grams and energy figures, the bars drop - right to left: mirrors ## Keyboard - Tab through the tabs, the recipes, each ingredient's food, grams and remove, Save, the log's fields and Log; each file's switches and moves, each copy's Replace; the replace dialog starts on Keep their copy ## Motion None of its own. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `recipes` (required) | `Recipe[]` | — | | | `foods` (required) | `Food[]` | — | | | `logs` | `RecipeLog[]` | — | | | `client` (required) | `string` | — | The client entries are logged for. | | `today` (required) | `string` | — | Today as an ISO date: the log's starting date. | | `handouts` | `Handout[]` | — | | | `copies` | `HandoutCopy[]` | — | | | `onSaveRecipe` | `((recipe: Recipe) => Promise)` | — | | | `onLog` | `((log: Omit) => Promise)` | — | | | `onReplaceCopy` | `((copyId: string) => Promise)` | — | | | `onRulesChange` | `((handouts: Handout[]) => Promise)` | — | | | `defaultTab` | `"handouts" \| "recipes"` | — | | | `defaultRecipe` | `string` | — | | | `defaultHandout` | `string` | — | | | `product` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert Dialog](https://beamline.io/components/alert-dialog.md) - [Avatar](https://beamline.io/components/avatar.md) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Calendar](https://beamline.io/components/calendar.md) - [Combobox](https://beamline.io/components/combobox.md) - [Date picker](https://beamline.io/components/date-picker.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Inline edit](https://beamline.io/components/inline-edit.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Tabs](https://beamline.io/components/tabs.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { NutritionLibrary } from "@beamline/nutrition-library"; ``` ## Get it Nutrition library is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Salon & fitness - [Workout planner](https://beamline.io/components/workout-planner): A training plan a person lives in: the program's next session with its estimate and Start, an exercise replaced for this session only or for every later… - [Workout logger](https://beamline.io/components/workout-logger): A live training session: every exercise's sets as target-table rows with a done column; marking a set done fills its shape and starts the rest by itself… - [Training progress](https://beamline.io/components/training-progress): A person's training history: the headline counts (weeks in a row, days since the last workout, workouts this month), a month calendar that names each… - [Program setup](https://beamline.io/components/program-setup): A training program's setup and living settings: the intake (one question per step, the week drawn as you answer, a failed generation keeping every… - [Protocol builder](https://beamline.io/components/protocol-builder): A practitioner's reusable protocol and the client copies made from it. Foods and habits each carry a written intent (Include, Reduce, Exclude) in its… - [Packages & memberships](https://beamline.io/components/packages-memberships): Prepaid packages and series, built: the packages down the side (version and how many sold, or not on sale yet), the open one beside them. Its price is a… - [Client forms](https://beamline.io/components/client-forms): A salon's or spa's client forms and who they ask: the forms down the side with where each stands (on, set up and off, not set up yet), the open one… - [Instructor finder](https://beamline.io/components/instructor-finder): Finding a flight instructor. Search by name or airfield, filter by what you want to learn (each subject with how many teach it nearby), by distance, and… - [Flight logbook](https://beamline.io/components/flight-logbook): A pilot's logbook. Total time (with hours brought forward from earlier logbooks), PIC, night, the last 90 days and how many entries are still incomplete… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).