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

Update react flow package implementation

Browse Source
This commit is contained in:
Hazem Krimi
2023-04-09 22:31:25 +01:00
parent ca2b2de8bd
commit 9967dc9d6a
4 changed files with 270 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FrontendFeatureCard/index.tsx
+44 -37
View File
@@ -1,53 +1,60 @@
import { Handle, Position } from 'reactflow';
import { Box, Text } from '..';
import { FeatureOutput } from '../../graphql/types';
type FrontendFeatureCardProps = {
feature: FeatureOutput;
data: FeatureOutput;
isConnectable?: boolean;
className?: string;
};
const FrontendFeatureCard = ({
feature,
data,
isConnectable = false,
className,
}: FrontendFeatureCardProps) => {
return (
<Box
className={className}
padding='10px'
background='white'
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
display='grid'
gridTemplateRows='auto'
alignItems='center'
rowGap='10px'
borderRadius='10px'
cursor='pointer'
textAlign='left'
>
<Box display='flex' flexDirection='row' alignItems='center'>
<Box flexGrow='1'>
<Text variant='title' weight='bold'>
{feature.name}
</Text>
<>
<Handle type="target" position={Position.Top} isConnectable={isConnectable} />
<Box
className={className}
padding='10px'
background='white'
boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
display='grid'
gridTemplateRows='auto'
alignItems='center'
rowGap='10px'
borderRadius='10px'
cursor='pointer'
textAlign='left'
>
<Box display='flex' flexDirection='row' alignItems='center'>
<Box flexGrow='1'>
<Text variant='title' weight='bold'>
{data.name}
</Text>
</Box>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='space-between'
padding='5px 20px'
>
{data.wireframes?.map((wireframe) => (
<img
src={wireframe.src}
alt={wireframe.name}
key={wireframe.id}
style={{ width: '100px', height: 'auto', marginRight: '10px' }}
/>
))}
</Box>
</Box>
<Box
display='flex'
flexDirection='row'
alignItems='center'
justifyContent='space-between'
padding='5px 20px'
>
{feature.wireframes?.map((wireframe) => (
<img
src={wireframe.src}
alt={wireframe.name}
key={wireframe.id}
style={{ width: '100px', height: 'auto', marginRight: '10px' }}
/>
))}
</Box>
</Box>
<Handle type="source" position={Position.Bottom} isConnectable={isConnectable} />
</>
);
};