vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: include logo and change style of triangle

Browse Source
This commit is contained in:
karishmas6
2024-10-23 20:17:56 +05:30
parent 3c464a4133
commit 94d15fc607
1 changed files with 33 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/molecules/ActionDescriptionBox.tsx
View File

@@ -1,30 +1,40 @@
import React, { ReactNode } from 'react';
import React from 'react';
import styled from 'styled-components';
import { PaginationType, useActionContext, LimitType } from '../../context/browserActions';
import { Typography, FormControlLabel, Checkbox, Box } from '@mui/material';
import { useActionContext } from '../../context/browserActions';
// Styled components
const CustomBoxContainer = styled.div`
position: relative;
min-width: 250px;
width: auto;
width: auto;
min-height: 100px;
height: auto;
border: 2px solid #ff00c3;
// border: 2px solid #ff00c3;
border-radius: 5px;
background-color: white;
margin: 30px 15px;
margin: 70px 15px 30px 15px; /* Increased top margin to move the box down */
`;
const Triangle = styled.div`
position: absolute;
top: -20px;
top: -20px; /* Moved the triangle down */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ff00c3;
border-bottom: 20px solid white;
`;
const Logo = styled.img`
position: absolute;
top: -70px; /* Adjusted to move the logo further above the box */
left: 50%;
transform: translateX(-50%);
width: 60px; /* Increased logo size */
height: auto;
`;
const Content = styled.div`
@@ -36,22 +46,10 @@ const ActionDescriptionBox = () => {
const { getText, getScreenshot, getList, captureStage } = useActionContext();
const messages = [
{
stage: 'initial' as const,
text: 'Select the list you want to extract along with the texts inside it',
},
{
stage: 'pagination' as const,
text: 'Select how the robot can capture the rest of the list',
},
{
stage: 'limit' as const,
text: 'Choose the number of items to extract',
},
{
stage: 'complete' as const,
text: 'Capture is complete',
},
{ stage: 'initial' as const, text: 'Select the list you want to extract along with the texts inside it' },
{ stage: 'pagination' as const, text: 'Select how the robot can capture the rest of the list' },
{ stage: 'limit' as const, text: 'Choose the number of items to extract' },
{ stage: 'complete' as const, text: 'Capture is complete' },
];
const renderActionDescription = () => {
@@ -61,14 +59,14 @@ const ActionDescriptionBox = () => {
<Typography variant="subtitle2" gutterBottom>Capture Text</Typography>
<Typography variant="body2" gutterBottom>Hover over the texts you want to extract and click to select them</Typography>
</>
)
);
} else if (getScreenshot) {
return (
<>
<Typography variant="subtitle2" gutterBottom>Capture Screenshot</Typography>
<Typography variant="body2" gutterBottom>Capture a partial or full page screenshot of the current page. </Typography>
<Typography variant="body2" gutterBottom>Capture a partial or full page screenshot of the current page.</Typography>
</>
)
);
} else if (getList) {
return (
<>
@@ -77,23 +75,21 @@ const ActionDescriptionBox = () => {
Hover over the list you want to extract. Once selected, you can hover over all texts inside the list you selected. Click to select them.
</Typography>
<Box>
{messages.map(({ stage, text }, index) => (
{messages.map(({ stage, text }) => (
<FormControlLabel
key={stage}
control={
<Checkbox
checked={
(stage === 'initial' && captureStage !== '') || // Checked if captureStage is at least 'initial'
(stage === 'pagination' && (captureStage === 'pagination' || captureStage === 'limit' || captureStage === 'complete')) || // captureStage is at least 'pagination'
(stage === 'limit' && (captureStage === 'limit' || captureStage === 'complete')) || // captureStage is at least 'limit'
(stage === 'complete' && captureStage === 'complete') // captureStage is 'complete'
(stage === 'initial' && captureStage !== '') ||
(stage === 'pagination' && (captureStage === 'pagination' || captureStage === 'limit' || captureStage === 'complete')) ||
(stage === 'limit' && (captureStage === 'limit' || captureStage === 'complete')) ||
(stage === 'complete' && captureStage === 'complete')
}
disabled
/>
}
label={
<Typography variant="body2" gutterBottom>{text}</Typography>
}
label={<Typography variant="body2" gutterBottom>{text}</Typography>}
/>
))}
</Box>
@@ -105,12 +101,13 @@ const ActionDescriptionBox = () => {
<Typography variant="subtitle2" gutterBottom>What data do you want to extract?</Typography>
<Typography variant="body2" gutterBottom>A robot is designed to perform one action at a time. You can choose any of the options below.</Typography>
</>
)
);
}
}
};
return (
<CustomBoxContainer>
<Logo src="https://ik.imagekit.io/9owqhz0po/Screenshot%202024-10-20%20232710.png" alt="Logo" />
<Triangle />
<Content>
{renderActionDescription()}