ShowDecision

import { ShowDecision } from '@noodlestan/designer-shows/astro';

This component renders the appropriate visualization according to the decision type.

In this example we are rendering decisions of 4 different types:

Color

#9b2c5a

Space

5px

Color Set

#dd3f3f

#b55372

#8d5a99

#6257bd

#3049e0

Space Scale

5px

10px

15px

20px

30px

50px

Props

༶ DecisionProps: `store` and `d`

These two mandatory props serve to identify and retrieve the decision.

༶ ValueProps: `value`, `viz`, and `size`

You can use these props to control how the visualization and value are displayed.

In the following example we are hiding the visualization and customizing the color value display to render both rgb and hsl color spaces.

<ShowDecision store={store} d="Action Color" viz={false} value={['rgb', 'oklch']} />

#9b2c5a

oklch(47.63% 0.15 359.38deg)

In this other example we are rendering the space scale with size xs.

<ShowDecision store={store} d="Layout Space Scale" size="xs" />

5px