Draft UI for pet compatibility rule fields

not wired up to a mutation yet, but it looks pretty!
This commit is contained in:
Emi Matchu 2020-08-11 23:05:38 -07:00
parent 7a58546700
commit 3e012ec2c0

View file

@ -77,6 +77,7 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
<Box paddingBottom="5"> <Box paddingBottom="5">
<Stack spacing="8"> <Stack spacing="8">
<ItemSupportSpecialColorFields item={item} /> <ItemSupportSpecialColorFields item={item} />
<ItemSupportPetCompatibilityRuleFields item={item} />
<ItemSupportAppearanceFields item={item} /> <ItemSupportAppearanceFields item={item} />
</Stack> </Stack>
</Box> </Box>
@ -232,6 +233,22 @@ function ItemSupportSpecialColorFields({ item }) {
); );
} }
function ItemSupportPetCompatibilityRuleFields({ item }) {
return (
<FormControl>
<FormLabel>Pet compatibility rule</FormLabel>
<Select>
<option>Default: Auto-detect whether this fits all pets</option>
<option>Body specific: Always different for each pet body</option>
</Select>
<FormHelperText>
By default, we assume Background-y zones fit all pets the same. When
items don't follow that rule, we can override it.
</FormHelperText>
</FormControl>
);
}
/** /**
* NOTE: This component takes `outfitState` from context, rather than as a prop * NOTE: This component takes `outfitState` from context, rather than as a prop
* from its parent, for performance reasons. We want `Item` to memoize * from its parent, for performance reasons. We want `Item` to memoize