Skip to content

Instantly share code, notes, and snippets.

@rafaelrinaldi
Created May 10, 2022 16:06
Show Gist options
  • Save rafaelrinaldi/3a8b3cb61a9647c497ad7beb1fd53c50 to your computer and use it in GitHub Desktop.
Save rafaelrinaldi/3a8b3cb61a9647c497ad7beb1fd53c50 to your computer and use it in GitHub Desktop.
import { H1, Text, View } from '@doppio/core';
import { Alert, Button, Checkbox, Radio, Spacer, TextArea } from '@doppio/elements';
import { RadioGroup } from '@doppio/patterns';
import * as React from 'react';
type DrinkSize = '12' | '16';
type DrinkType = 'Espresso' | 'Doppio' | 'Cappuccino';
const modifiers = ['Mocha', 'Vanilla', 'Caramel'];
export const Demo = () => {
const [drinkSize, setDrinkSize] = React.useState<DrinkSize>('12');
const [drinkType, setDrinkType] = React.useState<DrinkType>('Espresso');
const [drinkModifiers, setDrinkModifiers] = React.useState(
new Array(modifiers.length).fill(false),
);
const [isError, setIsError] = React.useState(false);
const handleModifierChange = (position) => {
const updateDrinkModifiers = drinkModifiers.map((item, index) =>
index === position ? !item : item,
);
setDrinkModifiers(updateDrinkModifiers);
};
return (
<View>
<View sx={{ marginBottom: '$8' }}>
<View sx={{ flexDirection: 'row' }}>
<H1 sx={{ lineHeight: '$0' }}>Doppio</H1>
<Spacer right="$3" />
<Text
sx={{
padding: '$2',
borderRadius: 'default',
backgroundColor: 'backgroundWeak',
alignSelf: 'center',
}}
>
v0.2.0
</Text>
</View>
<Text>Odeko's single source of truth</Text>
</View>
<View sx={{ marginBottom: '$8' }}>
<Text sx={{ fontSize: '$2', fontWeight: 'bold', marginBottom: '$3' }}>Drink Size</Text>
<RadioGroup
name="drink-size"
value={drinkSize}
onChange={(value) => setDrinkSize(value as DrinkSize)}
>
<Radio value="12">12 oz.</Radio>
<Radio value="16">16 oz.</Radio>
</RadioGroup>
</View>
<View sx={{ marginBottom: '$8' }}>
<Text sx={{ fontSize: '$2', fontWeight: 'bold', marginBottom: '$3' }}>Drink Type</Text>
<RadioGroup
name="drink-type"
value={drinkType}
onChange={(value) => setDrinkType(value as DrinkType)}
>
<Radio value="Espresso">Espresso</Radio>
<Radio value="Doppio">Doppio</Radio>
<Radio value="Cappuccino">Cappucino</Radio>
</RadioGroup>
</View>
<View sx={{ marginBottom: '$8' }}>
<Text sx={{ fontSize: '$2', fontWeight: 'bold', marginBottom: '$3' }}>Modifiers</Text>
{modifiers.map((modifier, index) => (
<Checkbox
checked={drinkModifiers[index]}
value={modifier}
onChange={() => handleModifierChange(index)}
>
{modifier}
</Checkbox>
))}
</View>
<View sx={{ width: '40vw', marginBottom: '$8' }}>
<TextArea
label="Special Instructions"
placeholder="Enter instructions..."
defaultValue=""
/>
</View>
<View sx={{ marginBottom: '$3', flexDirection: 'row' }}>
<Button onPress={() => setIsError(true)}>Submit Order</Button>
<Spacer right="$3" />
<Button onPress={() => setIsError(false)} variant="secondary">
Cancel
</Button>
</View>
<View sx={{ width: '40vw', opacity: isError ? 1 : 0, transition: 'opacity 0.25s linear' }}>
<Alert variant="error">Order was unable to be submitted</Alert>
</View>
</View>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment