crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete feature

Browse Source
This commit is contained in:
Hazem Krimi
2021-05-28 17:41:41 +01:00
parent eb137ae70e
commit 682776a3c6
1 changed files with 70 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Feature/index.tsx
+70 -3
View File
@@ -4,7 +4,14 @@ import { useLazyQuery, useReactiveVar } from '@apollo/client';
import { Redirect } from 'react-router';
import { roleVar } from '../../graphql/state';
import { Empty, Settings } from '../../assets';
import { Box, Text, Button, Spinner } from '../../components';
import {
Box,
Text,
Button,
Spinner,
ImagePreview,
Link,
} from '../../components';
import { Wrapper } from './styles';
import {
FeatureOutput,
@@ -77,10 +84,70 @@ const Feature = () => {
onClick={() => history.push(`/feature-settings/${id}`)}
/>
</Box>
<Box>
<Text variant='headline'>Description</Text>
<Box marginBottom='30px'>
<Text variant='headline' gutterBottom>
Description
</Text>
<Text>{feature.description}</Text>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='30px'
>
<Box marginRight='35px'>
<Text variant='headline' gutterBottom>
Price
</Text>
</Box>
<Text variant='title' weight='bold'>
${feature.price}
</Text>
</Box>
{feature.wireframes && (
<Box
display='flex'
flexDirection='column'
marginBottom='30px'
>
<Text variant='headline' gutterBottom>
Wireframes
</Text>
<Box
background='white'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
borderRadius='10px'
width='100%'
padding='30px'
display='grid'
gridTemplate='auto / repeat(auto-fit, 175px)'
gap='30px'
alignItems='stretch'
>
{feature.wireframes.map((image) => (
<ImagePreview
key={image.name}
color={role}
image={image}
/>
))}
</Box>
</Box>
)}
<Box
display='flex'
flexDirection='row'
alignItems='center'
marginBottom='30px'
>
<Box marginRight='35px'>
<Text variant='headline' gutterBottom>
Repo
</Text>
</Box>
<Link href={feature.repo}>{feature.repo}</Link>
</Box>
</Box>
</Wrapper>
) : (